animejs-scrollcraft

anime.js v4 scrollcraft — verified API + design language

The marketing site (website/) must feel like https://animejs.com/ — scroll-scrubbed storytelling where a central object assembles/explodes as you move, springs and staggers everywhere, SVG lines that draw themselves, numbers that count with the scroll. This file is the contract; deviations from the API here caused the last rebuild to fail.

1. Verified imports (from the ACTUAL vendored bundle, animejs 4.5.0)

import {
  animate,
  createTimeline,
  createTimer,
  createSpring,
  createDrawable,
  createMotionPath,
  morphTo,
  onScroll,
  stagger,
  svg,
  utils,
  text,
  eases,
  TextSplitter,
  ScrollObserver
} from "./vendor/anime.esm.min.js";

All of the above are REAL named exports (verified by import + export-map inspection). svg object = { createDrawable, createMotionPath, morphTo } equivalents; prefer the top-level named exports. v4 is TWO-ARGUMENT: animate(targets, options) — NEVER animate({ targets, ... }) (that's v3; do not shim it, write v4 natively).

2. Core idioms

// basic
animate(".chip", {
  opacity: [0, 1],
  translateY: [24, 0],
  delay: stagger(60, { from: "first" }),
  duration: 700,
  ease: "out(3)"
});

// spring
animate(el, { scale: [0.6, 1], ease: createSpring({ stiffness: 120, damping: 12 }) });

// timeline
const tl = createTimeline({ defaults: { duration: 600, ease: "inOutQuad" } });
tl.add("#g-docs", { translateX: -180, translateY: -60 })
  .add("#g-code", { translateX: 180, translateY: -40 }, "<<") // '<<' = with previous
  .add(
    "#g-links path",
    { strokeDashoffset: [utils.$("#g-links path")[0]?.getTotalLength?.() || 300, 0] },
    "+=200"
  );

// SCROLL-SCRUBBED timeline (the signature move) — verified option keys:
// container, axis, enter, leave, sync, repeat, debug,
// onEnter/onLeave/onEnterForward/onEnterBackward/onLeaveForward/onLeaveBackward,
// onUpdate, onSyncComplete
const tl2 = createTimeline({
  autoplay: onScroll({
    target: sectionEl, // element whose position drives progress
    enter: "bottom top", // '<target-edge> <container-edge>' — when target bottom meets viewport top… (also accepts 'min max', numbers, 'center', '+=/-=' offsets)
    leave: "top bottom",
    sync: true // true = hard progress link (scrub); or an ease name string for smoothed scrub ('inOutQuad'); or 'play pause' method pair
  })
});

// SVG line drawing
const [line] = createDrawable("#seal-lineage path"); // returns proxies with a `draw` prop
animate(line, { draw: "0 1", duration: 900, ease: "inOutSine" });

// text splitting (kinetic type)
const split = text.split(".hero-headline", { words: { wrap: "clip" } });
animate(split.words, { y: ["1.2em", 0], opacity: [0, 1], delay: stagger(40), ease: "out(4)" });

// counter scrub
animate(statEl, { textContent: [0, 248], modifier: utils.round(0), duration: 1200 });