anime-js-animation-patterns

name	Anime.js Animation Patterns
description	Use this skill when the build agent is writing JavaScript animations for a spec page. Provides six named patterns — scroll-triggered reveals, SVG path draw, counter animation, hero title entrance, tab transitions, and typewriter — with working code and guidance on when to reach for each one.
version	0.1.0

Anime.js v4 Animation Patterns for Spec Pages

Animation library: Anime.js v4 CDN: https://cdn.jsdelivr.net/npm/animejs@4/lib/anime.min.js

Why Anime.js: Lightweight, modular, vanilla JS with no framework dependency — matches The Point's "works everywhere" philosophy. SVG path animation is the key capability for spec pages: drawing connection lines, tracing flow diagrams, animating arrows.

---

General constraints — apply before choosing any pattern

• Load Anime.js from CDN only — never bundle, copy inline, or reference a local copy
• Use IntersectionObserver for all scroll-triggered animations — never listen to the scroll event directly
• Always wrap ALL animation calls in a prefers-reduced-motion check:

  if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    // animation code here
  }
  

• Animate at most 2-3 elements per section — restraint is the rule
• Hero content is never animated in on scroll — it must be visible immediately on load
• Never animate layout properties (width, height, top, left) — only opacity, transform, and SVG-specific properties (strokeDashoffset, pathLength)
• One animation library only — never mix Anime.js with CSS keyframe animations on the same element

---

Pattern 1 — Scroll-triggered section reveals (staggered)

The most common pattern on spec pages. Cards, feature sections, and pipeline stages animate in sequentially as the user scrolls to them.

When to use: Agent sections, feature grids, pipeline stages. Do not use on hero content — it must be immediately visible.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      anime({
        targets: entry.target.querySelectorAll('.bp-card'),
        opacity: [0, 1],
        translateY: [20, 0],
        delay: anime.stagger(80),
        duration: 500,
        easing: 'easeOutQuart'
      });
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.15 });

document.querySelectorAll('.bp-section').forEach(s => observer.observe(s));

---

Pattern 2 — SVG path draw (pipeline flows and diagrams)

Draws SVG paths progressively — the effect of a line being traced from start to end. Used for pipeline flow diagrams, connection arrows, and loop diagrams.

When to use: Any SVG diagram showing flow, connection, or sequence. The pipeline diagram in a spec page. Connection lines between stages.

// Requires SVG paths with a known total length
const paths = document.querySelectorAll('.flow-path');
paths.forEach(path => {
  const length = path.getTotalLength();
  path.style.strokeDasharray = length;
  path.style.strokeDashoffset = length;
});

anime({
  targets: '.flow-path',
  strokeDashoffset: [anime.get('.flow-path', 'strokeDashoffset'), 0],
  duration: 1200,
  delay: anime.stagger(200),
  easing: 'easeInOutSine'
});

---

Pattern 3 — Counter animation (stats and numbers)

Animates a number from zero to its target value. Makes specific claims feel earned rather than static.

When to use: Any page with a stats section containing specific numbers ("26 bugs fixed", "80 hours saved per week", "10 specialized agents").

anime({
  targets: '.bp-stat-value[data-count]',
  innerHTML: (el) => [0, el.dataset.count],
  round: 1,
  duration: 1400,
  delay: anime.stagger(120),
  easing: 'easeOutExpo'
});

Required HTML structure:

<div class="bp-stat">
  <div class="bp-stat-value" data-count="26">26</div>
  <div class="bp-stat-label">bugs fixed in production testing</div>
</div>

---

Pattern 4 — Hero title word-by-word entrance

Each word in the hero title animates in with a slight upward drift and fade. Only runs once on page load — never on scroll.

When to use: Pages where the hero title is the primary hook. Reserve for concepts where the title is doing heavy lifting. Do not use on every page.

const heroTitle = document.querySelector('.bp-hero-title');
const words = heroTitle.innerText.split(' ');
heroTitle.textContent = '';
words.forEach((word, i) => {
  if (i > 0) heroTitle.appendChild(document.createTextNode(' '));
  const span = document.createElement('span');
  span.className = 'word';
  span.style.display = 'inline-block';
  span.style.opacity = '0';
  span.textContent = word;
  heroTitle.appendChild(span);
});

anime({
  targets: '.bp-hero-title .word',
  opacity: [0, 1],
  translateY: [12, 0],
  delay: anime.stagger(60, { start: 200 }),
  duration: 500,
  easing: 'easeOutQuart'
});

---

Pattern 5 — Tab and panel transitions

When the user switches tabs (e.g., an artifact templates section), the incoming panel fades and slides in slightly. Prevents jarring cuts between panels.

When to use: Any tabbed interface on the page.

function switchTab(panelId) {
  const incoming = document.getElementById(panelId);
  anime({
    targets: incoming,
    opacity: [0, 1],
    translateY: [8, 0],
    duration: 280,
    easing: 'easeOutQuart'
  });
}

---

Pattern 6 — Terminal / typewriter effect

Types text character by character into a terminal-style element. More precise than CSS animation — timing can be controlled per-character.

When to use: Hero demonstrations, command examples, any place where showing the output appearing feels more compelling than showing it already there.

function typewriter(element, text, speed = 40) {
  element.textContent = '';
  let i = 0;
  const interval = setInterval(() => {
    element.textContent += text[i];
    i++;
    if (i >= text.length) clearInterval(interval);
  }, speed);
}

---

Choosing the right pattern

What you're animating	Pattern to reach for
Cards or sections entering on scroll	Pattern 1
SVG pipeline diagram or flow chart	Pattern 2
Stats section with numbers	Pattern 3
Hero headline on a high-stakes concept page	Pattern 4
Tabbed content switching	Pattern 5
Command demos or terminal output	Pattern 6
Anything else	Stop. Do not animate it.

The last row is not a joke. The instinct to animate everything is the thing this list is designed to prevent. Three animated elements per page is usually one too many.