Anime js
Anime.js v4 — fast, tree-shakeable JS animation. Load for JS animation that Framer Motion doesn't cover well: multi-target timelines, SVG morph/line-draw, draggable with spring release, motion paths, scroll-scrub, staggered grids, and text splitting. Triggers on "anime.js"/"animejs", timeline, stagger, SVG morph, draw/drawable, motion path, draggable, splitText.From its SKILL.md
npx -y skills add INERATE/atelier --skill anime-jsAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
2.6 KB, as published. Nobody here has run it
Anime.js v4
Modular, tree-shakeable. Import only what you use. In Atelier, reach for it when the effect is timeline-, SVG-, or draggable-heavy; for trigger-driven React UI motion prefer Framer Motion (design-law §4), for continuous card schematics prefer [[living-graphics]]. All motion still obeys the design-law motion system: expo/spring physics, reduced-motion fallback, transform/opacity/canvas only.
Install
npm i animejs · ESM import { animate } from 'animejs' · CDN https://esm.sh/animejs
Core API (import from animejs)
animate(targets, params)— CSS/transforms/vars, SVG attrs, JS objects, HTML attrs. Values: numeric, units, relative+=/-=/*=, color,[from, to], or(el,i,total)=>functions.ease:'outExpo',createSpring({stiffness,damping,mass}).createTimeline({defaults})→.add(t, params, pos)— position'<'(with prev),'-=200','+=100', ms, or a label.stagger(100, { from:'center', grid:[cols,rows] })— fordelay/values.onScroll({ target, sync:true, enter, leave })— pass asautoplayto scrub.- SVG:
morphTo(path),createDrawable('path')+{ draw:['0 0','0 1'] },createMotionPath(path). splitText(el,{chars,words,lines})→.addEffect()for per-char reveals.createDraggable(el,{ container, releaseEase:createSpring(...) }).- Utils:
$,get/set,remove,random,clamp,lerp,mapRange.
Patterns
import { animate, createTimeline, stagger, createDrawable } from 'animejs';
animate('.item', { translateY:[16,0], opacity:[0,1],
delay: stagger(70, { from:'center' }), duration:600, ease:'outExpo' });
createTimeline({ defaults:{ duration:500, ease:'outExpo' } })
.add('.a',{ x:100 }).add('.b',{ x:100 }, '<').add('.c',{ x:100 }, '-=200');
animate(createDrawable('path'), { draw:['0 0','0 1'], duration:2000, ease:'inOutQuad' });
React — always scope + revert
useEffect(() => {
const scope = createScope({ root: ref.current })
.add(() => animate('.box', { rotate:360 }));
return () => scope.revert(); // cleanup is mandatory
}, []);
Bundle: full ~24.5KB gzip; animation core ~10KB; add draggable/scroll only if used. Docs: https://animejs.com/documentation · easing editor: https://animejs.com/easing-editor