Image themes

A theme can swap a picture, not only colours: one file, four destinations. Each theme changes the photo, the destination's name, the page dot and the colour of the Book button, and a state machine turns the switch into a transition, so the card changes as a whole instead of blinking. The sample comp is Destination card (folder Interactive examples).

Loading the player…

Live · dotlottie-webDownload .lottie

Try it: wait six seconds, or click the arrow on the photo. The machine trip moves to the next destination; the theme chips show which one it set.

Mark the image in After Effects

Essential Graphics has no control for a footage layer's picture, so an image is marked by its layer name, the same way as a gradient:

Rename the image layer to slot: <id>: here slot: photo.

The layer must show a still image file (PNG, JPEG, WebP), not a solid or a precomp. The export makes that picture a slot; everything else about the layer (its position, scale, mask or matte) stays in the comp and keeps animating. In Destination card the photo sits under a rounded-rectangle alpha matte and drifts slowly (scale only), while the theme changes what is in it.

The names are the other half: each destination's name is its own line of text whose Opacity is a slot (title_alps, title_desert, …). A theme shows one and hides the others, the same trick as the music player's song titles.

The transition

A theme switch is instant: the player repaints with the new values in one frame. To make it feel like a page turn, the comp carries the movement around the switch, and the machine switches the theme at the one moment nothing shows it:

Segment	Frames	What moves
loop	0–239	a slow zoom on the photo (scale only)
out	240–263	a white veil fades over the photo while it pushes in; the name and the price slide left and fade; the arrow dips
in	264–299	the veil fades off a photo settling from 114 %; the new name slides in from the right; Book pops

State	Plays	Then
show-k	in, once; Switch theme to destination k on entering	shown (on complete) → idle-k
idle-k	loop, for ever; a 6 s timer starts on entering	the arrow is clicked (next) or the timer runs out → leave-k
leave-k	out, once	left (on complete) → show-k+1

The theme switches on entering show, when out has just ended under a full veil, so the old picture is never seen turning into the new one. Swiss Alps has a theme of its own that restates the comp, so the machine can come back to it.

In AXO

Interactive Studio → Slots and themes lists photo as a token: Default names the comp's picture, and every theme's cell has Choose…. Pick a file; the cell shows it as a thumbnail. Then Build as .lottie.

• The picture travels in the theme. AXO stores the chosen file inside the theme itself (as data), so the library still has it on another computer, and the built file carries it, with nothing to copy next to it.
• Same size, same place. The new picture is drawn where the comp's picture was, in the comp's layout. Use pictures with the same proportions as the original, or the layer's scale will crop or stretch them differently.
• Every theme carries every image slot; a theme that does not change the picture restates the comp's own, so switching back really goes back.

On a web page

// the version these pages use
import { DotLottie } from "https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web@0.81.0/+esm";

const card = new DotLottie({ canvas: document.querySelector("#card"), src: "destination-card.lottie", autoplay: true, loop: true });

card.addEventListener("load", () => {
  card.stateMachineLoad("trip"); // the carousel with its transitions…
  card.stateMachineStart();
  // …or, without the machine, one theme by id: card.setTheme("sahara");

  // Or a picture from the page: a data: URI (or a file name inside the .lottie).
  // card.setImageSlot("photo", "data:image/png;base64,…");
});

Measured in dotlottie-web 0.80:

• The slot belongs to the image asset, and a theme's Image rule gives the picture as src: a file name in the archive's i/ folder, or a data: URI. The player's own type definitions also list id and url; a theme written with either is rejected as a whole (no colour in it applies either). AXO writes src.
• setImageSlot returns a Promise; the new picture shows on the next frame the player draws.
• lottie-web (the .json) has no image slots: it shows the comp's picture. AXO's Preview shows image themes in both players.

Variations

• Product colours: one product shot per theme (the red shoe, the blue shoe), with the page's colour picker calling setTheme.
• Avatars: a profile animation where the page puts the user's photo in with setImageSlot.
• Seasonal art: a hero animation whose illustration changes for winter and summer, chosen by the date.