Anime.js integration

Capture Anime.js v4 animations, timelines and staggers with @erenthedeveloper0/motionpr/animejs.

Anime.js renders JavaScript animations from its own engine loop, so browsers cannot see them through document.getAnimations(), and the per-target timing of a staggered animation lives in private objects. MotionPR therefore instruments Anime.js explicitly, when animations are created, using public APIs only.

Status: supported. Tested against Anime.js 4.5.0; versions outside >=4.0.0 <5.0.0 are reported as untested. Anime.js v3 (anime({ targets, … })) is not supported.

#Setup

Create the instrumentation once, before any animation, and use the wrapped functions in place of the originals. A small module that re-exports them keeps the rest of the app unchanged:

// src/motion.ts
import { animate, createTimeline, waapi, eases, engine, stagger } from "animejs";
import { createAnimeInstrumentation } from "@erenthedeveloper0/motionpr/animejs";

const motion = createAnimeInstrumentation({ eases, engine });

export const track = motion.wrapAnimate(animate);
export const timeline = motion.wrapTimeline(createTimeline);
export const waapiAnimate = motion.wrapWaapi(waapi.animate);
export { motion, stagger };

// anywhere in the app
import { stagger, timeline, track } from "./motion";

track(".card", {
  translateY: [30, 0],
  opacity: [0, 1],
  duration: 700,
  delay: stagger(60),
  ease: "out(3)",
});

const intro = timeline({ defaults: { duration: 400, ease: "outQuad" } });
intro
  .label("title")
  .add(".title", { opacity: [0, 1] })
  .label("cards")
  .add(".card", { scale: [0.9, 1] }, "-=200");
motion.track(intro, "intro"); // a stable name for reports

Then capture as usual (npx motionpr run). motionpr doctor checks that Anime.js is installed, that its version is in the tested range and that the adapter actually registers in your page.

#Options

#Is it safe in production?

Yes. Without a capturing MotionPR agent in the page, createAnimeInstrumentation() returns an inactive handle whose wrap* methods return the original functions (same identity) and nothing is patched. The module adds about 13 kB gzipped to a bundle; import it only in builds you capture if that matters.

#API

The demo app's process timeline above is recorded through wrapTimeline: in the candidate the "design" step moves from -=120 to +=120 and the bar grows from 700 to 900 ms. MotionPR reports the moved label, the later starts and the longer timeline.

#How it observes Anime.js

• Parameters pass through unchanged, except that function-valued delay, duration and ease (such as stagger(60)) are wrapped with transparent recorders. Anime.js calls them exactly as before, with the same arguments, and receives exactly the same values; MotionPR learns what each target received. This is how staggered targets get their own records.
• onUpdate is composed, never replaced. MotionPR's observer runs, then your callback runs with the same this, arguments and return value. Assigning animation.onUpdate = fn later still works. Errors in MotionPR's observer are caught and reported as diagnostics; they never reach your animation. For timeline children, a missing onUpdate falls back to the timeline's defaults.onUpdate, as Anime.js does.
• Start times are observed: each frame callback pairs performance.now() with the instance's public currentTime. Speed is taken from the public speed of the instance and its parents (times engine.speed when provided) and checked against the observations.
• Replay renders root animations and timelines with seek(time, true) (callbacks muted), pausing them by assigning paused = true (so onPause does not fire), and afterwards restores currentTime, paused, began, completed and the cancelled state. onBegin, onUpdate, onComplete and then() do not fire during replay.
• WAAPI animations created with waapi.animate() are real Web Animations. MotionPR's native collector records them (with exact keyframes and timing, replayed through clones) and labels them source: animejs, driver: waapi. They are recorded once: never both as native and as Anime.js.

#What is captured

Per target (and per group of properties sharing delay, duration and ease):

Every record carries provenance so reports show which values Anime.js declared, which MotionPR observed, and which it had to infer.

#Supported patterns

• animate() on selectors, elements, NodeLists, arrays and plain objects.
• Function-based values and stagger() for delay, duration and ease, at the top level or per property ({ to, delay, duration, ease }). Tested with linear staggers; other stagger() options (from, grid, seeded jitter) produce function values that are recorded the same way but are not covered by tests yet.
• Timelines with labels, relative positions ("-=200", "<", labels), defaults, and stagger positions (tl.add(targets, params, stagger(100)), one record per target).
• reversed, playbackRate (tested); alternate, loop, loopDelay and springs (createSpring()) are read from public values but not yet covered by browser tests.
• Pause/resume, seek, restart, reverse() during the window (the latest continuous segment of observations is used).
• waapi.animate().

#Limitations

• Instances created without a wrapper (or before the instrumentation) can be observed with track(), but their properties and per-target timing are not public in Anime.js: they are recorded as timing-only with provenance: unavailable.
• keyframes and per-property keyframe arrays are recorded with the animation's overall timing; per-keyframe timing is not reconstructed.
• composition: "blend" is rendered by Anime.js's engine loop and cannot be replayed: such animations are recorded as metadata only.
• Timeline playbackEase: child start times assume linear timeline time (a note is added).
• Unseeded random staggers (stagger(…, { from: "random" }) without seed) can give different values per property; the first value is recorded and a diagnostic explains why.
• createTimer(), createAnimatable(), createDraggable(), onScroll() and the layout/text utilities are not instrumented.
• After replay, Anime.js's resume() advances a still-running animation by up to 12 ms (its own "at least one frame" behavior). Finished animations are unaffected.

#Cleanup

dispose() restores each onUpdate property it composed (to a plain writable property holding your current callback) and each wrapped timeline.add, and forgets the instances it observed. Several handles share one adapter; it unregisters from MotionPR when the last handle is disposed. Wrapped functions keep working after dispose() and simply call the originals.

#Troubleshooting