cycle-atlas/.agents/skills/logo-animation/references/logo-patterns.md

Logo Animation Patterns — Cookbook

Self-contained, runnable recipes for every logo technique. Pick ONE per logo.

Timing guidance

Beat	Duration	Easing
Stroke draw-on (per path)	0.6–1.2s	cubic-bezier(.65,0,.35,1) (easeInOutCubic)
Mask wipe reveal	0.5–0.9s	cubic-bezier(.22,1,.36,1) (easeOutQuint)
Build-on per piece	0.4–0.6s, stagger 0.06–0.10s	back.out(1.5)
Morph	0.6–1.0s	power2.inOut
Final settle / overshoot	0.12–0.20s	scale 1.04→1.00, power2.out
Full reveal envelope	0.8–2.5s total	—
Idle loop cycle	1.5–4s, infinite	sine.inOut / linear for spin

Rule of thumb: longer marks (wordmarks, detailed monograms) sit near 2.0–2.5s; simple icons near 0.8–1.4s. Hold the settled mark at least 0.4s before any sign-off cut.

Brand clearspace & geometry rules

• Clearspace: keep a margin equal to the mark's cap-height (or the brand's defined unit) clear of moving particles, wipes, or overshoot. Motion must not visually crop into the safe margin.
• No distortion: scale uniformly, fade, translate, rotate-on-axis, and mask are safe. Avoid non-uniform scaleX≠scaleY, skew, and squash on the final mark — they read as off-brand. A squash-and-settle is acceptable ONLY as a sub-0.2s micro-overshoot that returns to 1.0.
• Color: never animate brand color away from spec mid-reveal. Reveal in brand color, or grayscale→brand as an intentional, approved beat.
• Lockup integrity: animate the symbol and wordmark with a clear hierarchy (symbol leads, wordmark follows) but land both in the exact locked relationship.

1. Stroke draw-on (SVG + CSS)

<svg viewBox="0 0 240 80" id="mark">
  <path class="ink" pathLength="1" fill="none" stroke="#0A84FF"
        stroke-width="7" stroke-linecap="round" stroke-linejoin="round"
        d="M12 64 L48 16 L84 64 M120 16 L120 64 M156 16 H204"/>
</svg>
<style>
  #mark .ink {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: draw 1.1s cubic-bezier(.65,0,.35,1) forwards;
  }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @media (prefers-reduced-motion: reduce){
    #mark .ink { animation: none; stroke-dashoffset: 0; }
  }
</style>

Draw-then-fill (line settles into a solid mark):

#mark .ink { fill: transparent; }
@keyframes fill { to { fill: #0A84FF; stroke-width: 0; } }
#mark .ink { animation: draw 1.1s cubic-bezier(.65,0,.35,1) forwards,
                        fill .3s ease .9s forwards; }

GSAP equivalent with per-path stagger via DrawSVGPlugin:

import gsap from "gsap";
import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";
gsap.registerPlugin(DrawSVGPlugin);
gsap.fromTo("#mark .ink",
  { drawSVG: "0%" },
  { drawSVG: "100%", duration: 1.0, ease: "power2.inOut", stagger: 0.15 });

2. Mask wipe / build-on (clipPath)

Reveal a filled mark by sweeping a clip rect across it.

<svg viewBox="0 0 200 80">
  <defs>
    <clipPath id="wipe"><rect id="wiper" x="0" y="0" width="0" height="80"/></clipPath>
  </defs>
  <g clip-path="url(#wipe)">
    <!-- the full filled logo art here -->
    <path d="M10 10 H190 V70 H10 Z" fill="#111"/>
  </g>
</svg>
<style>
  #wiper { animation: wipe .8s cubic-bezier(.22,1,.36,1) forwards; }
  @keyframes wipe { to { width: 200px; } }
  @media (prefers-reduced-motion: reduce){ #wiper{ animation:none; width:200px; } }
</style>

Directional variants: animate y/height for a top-down build, or use a radial <clipPath> with a growing <circle r> for an iris reveal.

3. Build-on with stagger (GSAP timeline)

import gsap from "gsap";
const tl = gsap.timeline({ defaults: { ease: "back.out(1.6)" } });
tl.from("#base",   { scale: .8, opacity: 0, transformOrigin: "50% 50%", duration: .5 })
  .from(".accent", { scale: .7, opacity: 0, transformOrigin: "50% 50%",
                     duration: .45, stagger: 0.08 }, "-=0.2")
  .from(".word > *", { yPercent: 120, opacity: 0, duration: .4,
                       stagger: 0.04, ease: "power3.out" }, "-=0.15")
  .to("#mark", { scale: 1.04, duration: .12, ease: "power2.out" })
  .to("#mark", { scale: 1.0,  duration: .14, ease: "power2.inOut" });

4. Morph (GSAP MorphSVG)

Morph requires two paths; MorphSVG handles differing point counts.

import gsap from "gsap";
import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";
gsap.registerPlugin(MorphSVGPlugin);
// #shape: a simple start shape (e.g. circle path) -> #logoPath: the brand mark
gsap.to("#shape", {
  duration: .9, ease: "power2.inOut",
  morphSVG: { shape: "#logoPath", shapeIndex: "auto" }
});

No-plugin fallback (Flubber for interpolation + requestAnimationFrame):

import { interpolate } from "flubber";
const from = "M10,10 ...", to = "M0,0 ...";
const lerp = interpolate(from, to, { maxSegmentLength: 2 });
const path = document.querySelector("#shape");
const dur = 900, t0 = performance.now();
(function frame(now){
  const k = Math.min(1, (now - t0) / dur);
  const e = k < .5 ? 2*k*k : 1 - Math.pow(-2*k+2, 2)/2; // easeInOutQuad
  path.setAttribute("d", lerp(e));
  if (k < 1) requestAnimationFrame(frame);
})(t0);

5. Seamless idle loop (loader)

Loop must have identical start and end frames — design the cycle so frame 0 == frame N.

#loader { animation: spin 1.4s linear infinite, pulse 2.8s ease-in-out infinite; }
@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100%{ opacity:.85 } 50%{ opacity:1 } }
@media (prefers-reduced-motion: reduce){
  #loader { animation: pulse 2.8s ease-in-out infinite; } /* drop rotation */
}

GSAP yoyo loop for a breathing mark:

gsap.to("#mark", { scale: 1.03, duration: 1.4, ease: "sine.inOut",
                   yoyo: true, repeat: -1 });

6. Lottie delivery (designer-made)

Export from After Effects via Bodymovin to .json, or compressed .lottie.

<canvas id="logo-canvas" width="512" height="512"></canvas>
<script type="module">
  import { DotLottie } from "https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web/+esm";
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
  const dl = new DotLottie({
    canvas: document.querySelector("#logo-canvas"),
    src: "/logo.lottie", autoplay: !reduce, loop: false, speed: 1,
  });
  // Reduced motion: jump to the final settled frame, no playback.
  if (reduce) dl.addEventListener("load", () => dl.setFrame(dl.totalFrames - 1));
  // Sound-logo sync: fire audio when the settle frame is reached.
  dl.addEventListener("frame", ({ currentFrame }) => {
    if (currentFrame >= SETTLE_FRAME && !audioFired) { audio.play(); audioFired = true; }
  });
</script>

Classic lottie-web (SVG renderer, sharpest for vector logos):

import lottie from "lottie-web";
const anim = lottie.loadAnimation({
  container: document.getElementById("logo"),
  renderer: "svg", loop: false, autoplay: !reduce, path: "/logo.json",
});
if (reduce) anim.goToAndStop(anim.totalFrames - 1, true);

Lottie tips: keep layers/effects Bodymovin-supported (no native blurs/expressions unless baked), name layers cleanly, and request a poster PNG of the final frame from the designer for the static fallback.

7. Reduced-motion fallback (always ship)

Every delivery must degrade to the static, fully-revealed mark:

• CSS/SVG: @media (prefers-reduced-motion: reduce) sets the final state (stroke-dashoffset:0, width:full, opacity:1) with animation:none.
• Lottie: goToAndStop(totalFrames-1) / setFrame(last).
• Video: serve a poster image of the last frame; only autoplay motion when motion is allowed.
• JS gate: branch on matchMedia("(prefers-reduced-motion: reduce)").matches before building any timeline.

---

Match the reveal to the delivery target and a logo lands across web, video, and app. Built by iart.ai — the AI motion agent for editable, on-brand motion graphics.