Skip to content

docs(skills): fix anime.js v3 syntax in v4 adapter guidance - #3064

Open
youngeuibae wants to merge 1 commit into
heygen-com:mainfrom
youngeuibae:fix/animejs-v4-adapter-docs
Open

docs(skills): fix anime.js v3 syntax in v4 adapter guidance#3064
youngeuibae wants to merge 1 commit into
heygen-com:mainfrom
youngeuibae:fix/animejs-v4-adapter-docs

Conversation

@youngeuibae

@youngeuibae youngeuibae commented Aug 6, 2026

Copy link
Copy Markdown

Problem

skills/hyperframes-animation/adapters/animejs.md documents anime.js v3 syntax while telling compositions to load a v4 build, so the examples on the page cannot run as written:

const anim = anime({ targets: ".mark", translateX: 280, easing: "easeOutExpo", autoplay: false });

Every v4 bundle — UMD and IIFE alike — assigns a namespace object to the global anime (var anime = (function (t) { … return t })({})), so v3's call form is a TypeError no matter which v4 file is loaded. On top of that easing: is now ease:, the ease names lost their ease prefix (easeOutExpooutExpo), and timeline.add() takes (targets, parameters, position).

The same v3 snippet appears in skills/hyperframes-keyframes/references/keyframe-patterns.md (anime.timeline({ … }) + add({ targets })).

The one that fails silently

Both the skill page and the adapter docstring advertise anime.running auto-discovery as a safety net for "compositions that forget to register manually". No v4 build exports running — I checked the published 4.0.2 (the version the repo's own fixtures pin) and 4.5.0. So discover() hits its typeof running === "undefined" guard and returns immediately. An unregistered instance is simply never seeked: no error, no warning, just a frozen element in the render.

Changes

  • skills/hyperframes-animation/adapters/animejs.md — rewritten for v4: the namespace-vs-callable distinction, anime.animate() / anime.createTimeline(), ease: names, targets-first add(), position shorthands (<, <<, +=).
  • skills/hyperframes-keyframes/references/keyframe-patterns.md — same v3 snippet, corrected.
  • Auto-discovery documented as v3-only/inert on v4 in the skill page and in the adapter docstring; explicit window.__hfAnime.push(...) is now stated as mandatory rather than optional.
  • Render-safety notes the page lacked: createSeededRandom() as the deterministic replacement for Math.random() (the determinism rules forbid the latter but named no alternative), plus why autoplay: onScroll(...), createDraggable, and pointer-driven createAnimatable cannot work under headless seek rendering.
  • skills-manifest.json regenerated (hyperframes-animation, hyperframes-keyframes).

A version note, not a version bump

The examples target 4.5.0 (dist/bundles/anime.umd.min.js), because splitText / scrambleText / createSeededRandom / createLayout — cited on the page — do not exist in 4.0.2. The page says so explicitly rather than silently implying the fixtures are wrong: animejs@4.0.2/lib/anime.iife.min.js still resolves, and 4.1+ moved the bundles to dist/bundles/, so bumping the pin requires changing the path too. I left the fixtures under packages/producer/tests/animejs-adapter/ and packages/producer/tests/distributed/anime-boundary/ alone — they use the same v3 call form and would need their recorded output regenerated, which felt like a separate change to hand you rather than fold in here.

Runtime behaviour is unchanged

The packages/core edit is comment-only — no logic touched. The seek path already works on v4 (registered instances expose seek/pause/play). I deliberately left discover()'s now-dead anime.running branch in place: it is guarded and try/caught, so it is harmless, and removing it is a behaviour change that deserves its own PR if you want it.

One item is marked unverified on the page rather than asserted: whether waapi.animate()-backed instances honour .seek(). The page steers rendered compositions to the JS engine instead of guessing.

Verification

Run on this exact base (88853f17):

  • All 7 lefthook pre-commit checks pass: tracked-artifacts, lint, format, typecheck, skills-manifest, largefiles, fallow — plus commitlint.
  • bunx tsc --noEmit clean in packages/core and packages/studio.
  • vitest run src/runtime/adapters/animejs.test.ts15/15 pass.

Full-monorepo bun run test does not complete on my machine (Windows / Node 24): vitest's tinypool workers die with ERR_IPC_CHANNEL_CLOSED during teardown, which reproduces in packages I did not touch (e.g. packages/parsers reports 2 failed test files with 0 failed tests, 721 passing). CI will be the real check there.

The animejs adapter docs teach v3 syntax against a v4 build, so the examples
cannot run as written: every v4 bundle assigns a *namespace object* to the
global `anime`, making v3's `anime({ targets })` call form a TypeError. `easing:`
is now `ease:`, ease names lost their `ease` prefix, and `timeline.add()` takes
`(targets, parameters, position)`.

- Rewrite `skills/hyperframes-animation/adapters/animejs.md` for v4:
  `anime.animate()` / `anime.createTimeline()`, `ease:` names, targets-first
  `add()`, position shorthands, and a note that the producer fixtures pin
  4.0.2 (`lib/`) while 4.1+ moved bundles to `dist/bundles/`.
- Fix the same v3 `anime.timeline({ targets })` snippet in
  `skills/hyperframes-keyframes/references/keyframe-patterns.md`.
- Stop advertising `anime.running` auto-discovery as a safety net. No v4 build
  exports `running` (checked 4.0.2 and 4.5.0), so `discover()` returns
  immediately and any instance a composition forgets to push onto
  `window.__hfAnime` is silently never seeked. Marked v3-only/inert in the
  skill page and the adapter docstring; explicit registration is now stated
  as mandatory.
- Add render-safety notes the page lacked: `createSeededRandom()` as the
  deterministic replacement for `Math.random()`, and why
  `autoplay: onScroll(...)`, `createDraggable`, and pointer-driven
  `createAnimatable` cannot work under headless seek rendering.
- Regenerate skills-manifest.json.

Runtime behaviour is unchanged: the `packages/core` edit is comment-only, and
the seek path already works on v4 (registered instances expose
seek/pause/play). The now-dead `anime.running` branch in `discover()` is left
in place — it is guarded and try/caught, and removing it is a behaviour change
that belongs in its own PR.
@youngeuibae
youngeuibae force-pushed the fix/animejs-v4-adapter-docs branch from a3b4689 to 3e98e2b Compare August 6, 2026 08:24
@youngeuibae youngeuibae changed the title docs(skills): fix anime.js adapter guidance for v4 docs(skills): fix anime.js v3 syntax in v4 adapter guidance Aug 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant