Intro → loop: a logo that builds, then breathes

The mark draws itself once, then keeps pulsing gently for as long as the page is open. The Intro → loop template plays one segment once and then loops another for ever, with no clicks, no code. The pictures use the sample comp Logo (folder Interactive examples).

Try it: Just watch, or press Restart to see the intro again. How it works: intro plays once; its end fires value_intro_done, and loop repeats from then on. The file is the .lottie the panel wrote, played by dotlottie-web, the player a web page uses.

Loading the player…

Live · dotlottie-webDownload .lottie

In After Effects

• Two markers, each with a duration: intro 0–60 (plays once) and loop 60–120 (repeats).
• The loop's last frame must match its first, or every repeat jumps. The intro should end exactly where the loop begins.
• Names help: intro or start is taken as the intro, loop or idle as the loop. Other names go in comp order.

1. Open the Studio

Build → open the comp's row → Interactive → Ship this comp as interactive (and Add .lottie if asked).

2. New machine → Intro → loop

Press New machine and pick Intro → loop.

3. What the template built

intro 1 is the start; it plays its segment once. When it finishes 2 the machine moves to loop 3, which plays loop (60–120) 4 with Repeat set to for ever.

The hand-over is an on complete interaction on the intro that fires value_intro_done; the wire to loop waits for it.

4. Build and test

Press Build this comp. The Test player 1 draws the logo once and then keeps pulsing; the machine 2 is the one you just built.

5. On a web page

<canvas id="logo" width="240" height="240"></canvas>
<script type="module">
  import { DotLottie } from "https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web@0.81.0/+esm"; // the version these pages use
  const player = new DotLottie({ canvas: document.getElementById("logo"), src: "Logo.lottie" });
  player.addEventListener("load", () => {
    player.stateMachineLoad("machine_9");
    player.stateMachineStart();
  });
</script>

Variations

• Splash screens, hero illustrations, a status icon that settles into an idle pulse.
• The loop should wait until something happens? Loading → done loops until your page fires done.