Logo Animation
Bring a brand mark to life with one clear idea, on-brand geometry, and a crisp settle. Animate for web (SVG/Lottie), video intros/outros, or app splash screens, and always ship a static end-frame fallback.
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
Pick ONE technique per logo — draw OR build OR morph — not all at once. Reveals run 0.8–2.5s. Never distort brand geometry; scale and fade are safe, skew and squash usually are not. Respect clearspace (keep the mark's minimum margin clear of motion debris). Always provide a prefers-reduced-motion path that shows the final mark with no motion.
Technique map
| Technique | Best for | Mechanism |
|---|
| Stroke draw-on | Line marks, monograms, signatures | stroke-dashoffset 1→0 |
| Mask wipe / reveal | Filled shapes, gradients | animate a <clipPath> / <mask> rect |
| Build-on (stagger) | Multi-piece marks, grids | per-group opacity+transform, staggered |
| Morph | Icon ↔ wordmark, shape→logo | GSAP MorphSVG or matched path interpolation |
| Idle loop | Loaders, ambient splash | seamless cyclic transform (rotate/pulse) |
| Wordmark | Logotypes | per-letter mask/translate stagger |
Quick start: SVG stroke draw-on
The fastest on-brand web reveal. Each path draws itself, then fills settle in.
<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" normalizes every path to length 1, so one stroke-dasharray/offset value works regardless of geometry. Stagger multiple strokes with 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" })
});
Group order matters: reveal the base/container first, then accents, then the wordmark last so the eye lands on the name.
Sound-logo sync
When audio exists, the brand's final settle frame must land exactly on the sonic accent (the "ding"/whoosh peak). Decide the audio first, find the peak timecode, then time the reveal so the mark snaps to full opacity/scale on that frame. A 1.0s reveal landing a 1.2s mnemonic feels premium; a settle that floats free of the sound feels cheap. Add a tiny overshoot-and-settle (scale 1.04→1.00 over ~0.15s) on the beat for impact.
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.
Logo animation spans web/SVG/Lottie, video, and app splash. For web/SVG/Lottie delivery use this standalone-HTML loop; for a video logo sting, render via the remotion-video verify loop instead.
For web/SVG/Lottie, ship one .html file that opens directly in a browser — inline SVG markup plus the reveal (CSS or one CDN GSAP <script>), self-contained. One file is the right tier.
Output contract:
- 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.
Freeze harness — pin a frame for screenshots. Match the mechanism to the technique:
<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>
Verify loop — render → freeze → screenshot → check:
- Open the file frozen at start / mid / end of the reveal (≤2.5s):
…/logo.html?t=0, ?t=<dur/2>, ?t=<dur>.
- Screenshot each frozen frame.
- 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.
- 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
Before you finish:
- Opens standalone in a browser — no console errors, no missing CDN.
- One technique/driver;
?t=N freezes the exact frame correctly.
- Screenshotted at start / mid / end — geometry intact, clearspace respected, final frame is the clean mark.
prefers-reduced-motion honored (final static mark shown, no motion) + static end-frame fallback shipped.- 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.