animejs

📁 lucking7/animejs-skills 📅 Feb 5, 2026

总安装量

周安装量

#35638

全站排名

安装命令

npx skills add https://github.com/lucking7/animejs-skills --skill animejs

Agent 安装分布

opencode 8

gemini-cli 8

github-copilot 8

codex 8

claude-code 6

amp 6

Skill 文档

Anime.js v4

Modern JavaScript animation library. V4 is a complete rewrite â animate() not anime().

Installation

npm install animejs

import { animate, createTimeline, stagger, utils, onScroll, createDraggable, splitText, createScope, createLayout, waapi, svg, eases, cubicBezier, spring, engine } from 'animejs';

CDN: <script src="https://cdn.jsdelivr.net/npm/animejs@4/dist/anime.min.js"></script> â const { animate } = anime;

V3 â V4 Migration (Critical)

If you see ANY V3 pattern, the code MUST be migrated.

V3 (Wrong)	V4 (Correct)	Notes
`anime({ targets: '.el', ... })`	`animate('.el', { ... })`	Targets = first arg
`anime.timeline()`	`createTimeline()`	Named import
`anime.stagger(100)`	`stagger(100)`	Named import
`anime.set()` / `anime.get()`	`utils.set()` / `utils.get()`	On utils object
`anime.remove(targets)`	`utils.remove(targets)`	On utils object
`anime.random(0, 100)`	`utils.random(0, 100)`	On utils object
`translateX` / `translateY` / `translateZ`	`x` / `y` / `z`	Shorthand transforms
`easing: 'easeOutExpo'`	`ease: 'outExpo'`	Param renamed, drop “ease” prefix
`direction: 'alternate'`	`alternate: true`	Boolean property
`direction: 'reverse'`	`reversed: true`	Boolean property
`import anime from 'animejs'`	`import { animate } from 'animejs'`	Named imports only
Timeline `.add({ targets })`	`.add(targets, params, pos)`	Targets = first arg of `.add()`
`spring('mass:1')`	`spring({ mass: 1, stiffness: 200 })`	Object params, not string
`cubicBezier('0.7,0.1,0.5,0.9')`	`cubicBezier(.7, .1, .5, .9)`	Numeric args

V4 Easing Names

Drop the “ease” prefix: easeOutExpo â outExpo, easeInOutQuad â inOutQuad. linear unchanged. Full list â references/easings.md.

API Reference

Load specific reference file for detailed params, methods, callbacks, and examples.

Need	API	Reference
Animate elements	`animate(targets, params)`	animation.md
Reactive animatable values	`createAnimatable(targets, params)`	animatable.md
Sequence animations	`createTimeline(params)`	timeline.md
Frame loops / countdowns	`createTimer(params)`	timer.md
Drag interactions	`createDraggable(targets, params)`	draggable.md
Scroll-driven animations	`onScroll(params)`	events.md
Scope, media queries, cleanup	`createScope(params)`	scope.md
Text character/word splitting	`splitText(targets, params)`	text.md
FLIP layout animations	`createLayout(params)`	layout.md
SVG morph / draw / motion path	`svg.morphTo()`, `svg.drawLine()`	svg.md
Lightweight WAAPI (3KB)	`waapi.animate(targets, params)`	web-animation-api.md
Easing functions, spring, bezier	`eases`, `spring()`, `cubicBezier()`	easings.md
Stagger, get/set, math helpers	`utils`, `stagger()`	utilities.md
Global clock, fps, suspend	`engine`	engine.md
Setup, React integration	Getting started guide	getting-started.md

Common Patterns

Staggered entrance

import { animate, stagger } from 'animejs';
animate('.item', {
  y: [-20, 0], opacity: [0, 1],
  delay: stagger(80, { from: 'center' }),
  ease: 'outExpo', duration: 600,
});

Timeline sequence

import { createTimeline } from 'animejs';
const tl = createTimeline({ defaults: { duration: 750, ease: 'outExpo' } });
tl.add('.a', { x: '15rem' }, 0)
  .add('.b', { x: '15rem' }, '<')         // starts with previous
  .add('.c', { x: '15rem' }, '<-=500');    // 500ms before previous starts

Time positions: 0 (absolute ms), '<' (prev start), '<<' (prev end), '>>' (prev end), '<+=200' / '<-=200' (offset from prev start), '>>=200' (offset from prev end), 'label' / 'label+=500'.

Scroll-linked animation

import { animate, onScroll } from 'animejs';
animate('.progress', {
  scaleX: [0, 1],
  autoplay: onScroll({ target: '.content', enter: 'top bottom', leave: 'bottom top' })
});

Red Flags â V3 Code Detected

Stop and migrate if you see ANY of these:

anime({ or anime.timeline() â V3 constructor
translateX, translateY, translateZ â use x, y, z
easeIn*, easeOut*, easeInOut* prefix â drop “ease”
anime.stagger(), anime.set(), anime.get() â named imports / utils
direction: 'alternate' / direction: 'reverse' â use booleans
easing: parameter â V4 uses ease:
import anime from 'animejs' â use named imports { animate }
"anime is not a function" / "anime is not defined" â V4 has no default export
Animating width/height directly â use scaleX/scaleY or x/y for performance
Missing autoplay for scroll â pass autoplay: onScroll({...})
Not cleaning up in React â use createScope() + .revert() in cleanup

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台