Logo Animation

When to use

• Build an intro stinger, sign-off, app splash, or loader idle loop.
• Reveal a brand mark on a landing hero or sizzle reel.
• Draw on an SVG mark, wipe/build it in piece by piece, or morph an icon into a wordmark.
• Sync the final settle of the mark to a sound-logo beat.

Core principle

prefers-reduced-motion

Technique map

stroke-dashoffset

<clipPath>

<mask>

Quick start: SVG stroke draw-on

<svg viewBox="0 0 200 80" id="logo">
  <path class="ink" d="M10 60 L40 20 L70 60" fill="none"
        stroke="#111" stroke-width="6" stroke-linecap="round"
        pathLength="1" stroke-dasharray="1" stroke-dashoffset="1"/>
</svg>
<style>
  @keyframes draw { to { stroke-dashoffset: 0; } }
  #logo .ink { animation: draw 1.1s cubic-bezier(.65,0,.35,1) forwards; }
  @media (prefers-reduced-motion: reduce) {
    #logo .ink { animation: none; stroke-dashoffset: 0; }
  }
</style>

pathLength="1"

stroke-dasharray

offset

animation-delay

Quick start: build-on with stagger (GSAP)

import gsap from "gsap";
// each <g class="piece"> is one mark component
gsap.from(".piece", {
  opacity: 0, scale: 0.85, transformOrigin: "50% 50%",
  duration: 0.5, ease: "back.out(1.6)", stagger: 0.08,
  onComplete: () => gsap.to("#mark", { scale: 1, duration: 0.2, ease: "power2.out" })
});

Sound-logo sync

Delivery targets

• Web, interactive / hero: inline SVG + CSS or GSAP. Smallest payload, crisp at any size, scriptable.
• Product / app, designer-made: Lottie (

  .json

  exported from After Effects via Bodymovin). Use

  lottie-web

  or

  @lottiefiles/dotlottie-web

  ; set

  loop

  ,

  autoplay

  , and a poster fallback frame.
• Video intro/outro: Remotion (React) or After Effects render to ProRes/H.264. Pre-render at 2x for crispness.

// Lottie delivery with reduced-motion guard
import { DotLottie } from "@lottiefiles/dotlottie-web";
const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
const dl = new DotLottie({
  canvas: document.querySelector("#logo-canvas"),
  src: "/logo.lottie", autoplay: !reduce, loop: false,
});
if (reduce) dl.addEventListener("load", () => dl.setFrame(dl.totalFrames - 1));

Output checklist

• Animated mark in the target format (SVG/Lottie/video).
• Static final-frame fallback (SVG or PNG) for reduced-motion and posters.
• One clear technique, reveal ≤2.5s, brand geometry intact, clearspace respected.
• Sound-logo settle aligned to the audio peak (if audio present).

Deliver & verify (standalone HTML)

Packaged helper (

scripts/

):

scripts/seek-shot.sh anim.html 0 1.5 3

freezes the

?t=N

harness and screenshots each moment;

scripts/contact-sheet.sh sheet.png frame-*.png

tiles them for one-glance review. See

scripts/README.md

.

.html

<script>

• One

  .html

  file: the inline SVG (or Lottie canvas) + the reveal in inline

  <style>

  /

  <script>

  .
• One animation driver — the CSS

  @keyframes

  draw/build, or a single GSAP timeline; not both.
• Include the freeze harness below, matched to the technique, so any moment can be screenshotted deterministically.

<script>
  const t = new URLSearchParams(location.search).get("t");
  if (t !== null) {
    const T = parseFloat(t);
    // CSS stroke-draw / build-on:
    document.querySelectorAll("#logo *").forEach(el => {
      el.style.animationDelay = (-T) + "s";
      el.style.animationPlayState = "paused";
    });
    // GSAP timeline instead? → tl.pause(); tl.seek(T);
    // SMIL <animate>?       → const s = document.querySelector("svg"); s.pauseAnimations(); s.setCurrentTime(T);
    // Lottie?               → dl.setFrame(Math.round(T * fps));
  }
  window.__ready = true;                                          // ready signal for headless wait
</script>

1. Open the file frozen at start / mid / end of the reveal (≤2.5s):

   …/logo.html?t=0

   ,

   ?t=<dur/2>

   ,

   ?t=<dur>

   .
2. Screenshot each frozen frame.
3. Check fidelity (matches the mark, one clear technique) and artifacts — brand geometry undistorted, clearspace clear of motion debris, no half-drawn strokes left at the end frame, the static final frame is the true logo.
4. Iterate: if any check fails (e.g. a half-drawn stroke at

   ?t=<dur>

   or distorted geometry mid-reveal), fix the stroke-dashoffset/duration/easing, re-render the same

   ?t=N

   , and re-screenshot to confirm the fix — loop until every frame is clean.

npx playwright screenshot --wait-for-timeout=500 "file://$PWD/logo.html?t=1.1" frame-mid.png

1. Opens standalone in a browser — no console errors, no missing CDN.
2. One technique/driver;

   ?t=N

   freezes the exact frame correctly.
3. Screenshotted at start / mid / end — geometry intact, clearspace respected, final frame is the clean mark.

4. prefers-reduced-motion

   honored (final static mark shown, no motion) + static end-frame fallback shipped.
5. Reveal ≤2.5s; if audio present, the settle lands on the sound-logo peak.

Reference files

• references/logo-patterns.md

  — runnable code for every technique: stroke draw-on, mask wipe build-on, GSAP MorphSVG morph, seamless idle loop, Lottie delivery, plus timing tables (0.8–2.5s), brand clearspace rules, and reduced-motion fallbacks.