Anime v4 choreography recipes

Use these patterns to explain causality, spatial order or state change. Keep Reveal for navigation and the pinned Anime UMD bundle for motion. These are original examples, not copied peer implementations. Read this before adapting catalog examples with anime(...), anime.timeline(...), easing, anime.path or anime.setDashoffset: those are v3 APIs, not our v4 contract.

Motion brief before code

For each slide record: stable objects, meaningful change, named beats, final readable state, previous/next behavior, and reduced-motion equivalent. Motion must carry information, not merely fade in a panel. A dependency can draw from cause to effect; a comparison can preserve object identity; an assembly can separate and rejoin parts. Keep a plain title legible while its explanatory diagram changes. Do not impose the sample's three beats or six slides on a real deck.

One clock, explicit instances

Create timelines synchronously with autoplay:false. Register them by slide; initialize inactive slides to their final state. Start only the active slide's timeline. Avoid randomness, asynchronous DOM mutations and side-effect callbacks in seekable scenes. Wait for fonts/assets before constructing geometry-sensitive timelines. Layout changes require rebuilding that geometry, not assuming cached path measurements remain correct.

The starter provides presentationQA.seek(milliseconds), replay(), settle() and active(). Seeking pauses, clamps to the finite timeline and must reproduce the same DOM state after forward/backward seeks. Replay is explicit: ordinary revisits remain complete. Reduced motion and overview reject replay and force the final state. Departure, overview, page hiding and print settle timelines. The API is a QA/authoring surface, not a request to bolt extra controls onto the delivered presentation.

Use dedicated motion wrappers. Do not overwrite a diagram part's structural transform or let Reveal Auto-Animate own the same properties. For an SPA/embedded deck, additionally detach event listeners and call revert() on its owned timelines when unmounting; the single-document starter does not implement component mounting.

Semantic timeline positions

const tl = anime.createTimeline({autoplay:false,
  defaults:{duration:300, ease:'outCubic'}});
tl.label('cause', 0)
  .add(cause, {opacity:[0,1]}, 'cause')
  .label('effect', 240)
  .add(effect, {opacity:[0,1]}, 'effect');

Labels express narrative beats; explicit overlap is a decision, not arbitrary delay accumulation. Keep descriptions in normal HTML; never make an essential conclusion available only during a transition.

SVG connections and motion paths

Use the UMD anime.svg namespace. Keep the path in an SVG coordinate space shared with the animated marker. A marker starting at the path origin avoids accidental double offsets.

const edge = document.querySelector('#flow-path');
const trace = anime.animate(anime.svg.createDrawable(edge), {
  draw:['0 0','0 1'], duration:600, ease:'linear', autoplay:false
});
const flow = anime.animate(document.querySelector('#packet'), {
  ...anime.svg.createMotionPath(edge), duration:600,
  ease:'linear', autoplay:false
});

Register both instances with the owner; settle them to full duration on departure/reduced motion/print. Animate a flow marker only when travel encodes direction or latency. Do not animate essential labels away. Avoid arbitrary path morphs: establish corresponding shapes, direction and final labels first. No automatic conversion of incompatible v3 d interpolation snippets.

Spatial stagger

const pulse = anime.animate(cells, {
  opacity:[0.25,1], delay:anime.stagger(60,{grid:[3,2],from:'center'}),
  duration:240, ease:'linear', autoplay:false
});

The grid is [columns, rows]; supply targets in row-major visual order and match columns * rows to the actual node count. Spatial order must mean something (e.g. propagation from an origin), not decorate a list. Choose opacity/transform rather than animating layout width/height across many nodes. Restore full readability when motion is disabled.

Acceptance

Run npm test through terminal in the copied package. scripts/test-motion.mjs covers deterministic seeking, replay, departure/revisit, overview, live reduced-motion changes, print, no network and SVG/grid primitives against the actual vendored v4 bundle. Inspect meaningful intermediate frames as well as final screenshots. Library existence is not compatibility proof; keep these checks when upgrading pins. Browser-based headless checks do not establish screen-reader, other-browser or performance acceptance.

4.6 KiB Raw Blame History