Animejs

作者 freshtechbro1da73febff0c无许可证1K 个星标收录于 2026年10月8日更新于 2026年10月8日仓库10个月前更新

Versatile JavaScript animation engine for DOM, CSS, SVG, and JavaScript objects. Use when creating timeline-based animations, stagger effects, SVG morphing, keyframe sequences, or complex choreographed animations. Triggers on tasks involving Anime.js, timeline animations, staggered sequences, SVG path animations, morphing, or multi-step animation choreography. Alternative to GSAP for SVG-heavy animations and React-independent projects.

包含脚本Design & CreativeSoftware Development
AI 生成的概览

指导使用 Anime.js 制作网页动画：时间轴、交错效果、SVG 变形、关键帧与播放控制。

功能
该技能说明如何使用 Anime.js JavaScript 库构建网页动画，涵盖基础动画、目标选择、可动画的 CSS、SVG 与对象属性、时间轴、交错工具、关键帧、缓动选项和播放控制。它还给出 React 与 Vue 的集成方式、性能建议和常见错误。技能附带两个 Python 脚本，用于生成动画样板代码和构建时间轴序列，并提供参考文档和入门模板。
适用场景
适用于制作基于时间轴或编排式的网页动画、多元素的交错序列、SVG 路径绘制或变形，以及框架无关项目中的关键帧动画。在需要比较 Anime.js 与 GSAP、Framer Motion 等方案时也适用。
运行要求
目标项目需安装 Anime.js JavaScript 库并具备 JavaScript 或网页运行环境；附带的 Python 脚本需要 Python 解释器。未说明需要凭据或网络访问。

Anime.js

Lightweight JavaScript animation library with powerful timeline and stagger capabilities for web animations.

Overview

Anime.js (pronounced "Anime JS") is a versatile animation engine that works with DOM elements, CSS properties, SVG attributes, and JavaScript objects. Unlike React-specific libraries, Anime.js works with vanilla JavaScript and any framework.

When to use this skill:

  • Timeline-based animation sequences with precise choreography
  • Staggered animations across multiple elements
  • SVG path morphing and drawing animations
  • Keyframe animations with percentage-based timing
  • Framework-agnostic animation (works with React, Vue, vanilla JS)
  • Complex easing functions (spring, steps, cubic-bezier)

Core features:

  • Timeline sequencing with relative positioning
  • Powerful stagger utilities (grid, from center, easing)
  • SVG morphing and path animations
  • Built-in spring physics easing
  • Keyframe support with flexible timing
  • Small bundle size (~9KB gzipped)

Core Concepts

Basic Animation

The anime() function creates animations:

javascript
import anime from 'animejs'
anime({  targets: '.element',  translateX: 250,  rotate: '1turn',  duration: 800,  easing: 'easeInOutQuad'})

Targets

Multiple ways to specify animation targets:

javascript
// CSS selectoranime({ targets: '.box' })
// DOM elementsanime({ targets: document.querySelectorAll('.box') })
// Array of elementsanime({ targets: [el1, el2, el3] })
// JavaScript objectconst obj = { x: 0 }anime({ targets: obj, x: 100 })

Animatable Properties

CSS Properties:

javascript
anime({  targets: '.element',  translateX: 250,  scale: 2,  opacity: 0.5,  backgroundColor: '#FFF'})

CSS Transforms (Individual):

javascript
anime({  targets: '.element',  translateX: 250,   // Individual transform  rotate: '1turn',   // Not 'transform: rotate()'  scale: 2})

SVG Attributes:

javascript
anime({  targets: 'path',  d: 'M10 80 Q 77.5 10, 145 80', // Path morphing  fill: '#FF0000',  strokeDashoffset: [anime.setDashoffset, 0] // Line drawing})

JavaScript Objects:

javascript
const obj = { value: 0 }anime({  targets: obj,  value: 100,  round: 1,  update: () => console.log(obj.value)})

Timeline

Create complex sequences with precise control:

javascript
const timeline = anime.timeline({  duration: 750,  easing: 'easeOutExpo'})
timeline  .add({    targets: '.box1',    translateX: 250  })  .add({    targets: '.box2',    translateX: 250  }, '-=500') // Start 500ms before previous animation ends  .add({    targets: '.box3',    translateX: 250  }, '+=200') // Start 200ms after previous animation ends

Common Patterns

1. Stagger Animation (Sequential Reveal)

javascript
anime({  targets: '.stagger-element',  translateY: [100, 0],  opacity: [0, 1],  delay: anime.stagger(100), // Increase delay by 100ms  easing: 'easeOutQuad',  duration: 600})

2. Stagger from Center

javascript
anime({  targets: '.grid-item',  scale: [0, 1],  delay: anime.stagger(50, {    grid: [14, 5],    from: 'center', // Also: 'first', 'last', index, [x, y]    axis: 'x'       // Also: 'y', null  }),  easing: 'easeOutQuad'})

3. SVG Line Drawing

javascript
anime({  targets: 'path',  strokeDashoffset: [anime.setDashoffset, 0],  easing: 'easeInOutQuad',  duration: 2000,  delay: (el, i) => i * 250})

4. SVG Morphing

javascript
anime({  targets: '#morphing-path',  d: [    { value: 'M10 80 Q 77.5 10, 145 80' }, // Start shape    { value: 'M10 80 Q 77.5 150, 145 80' }  // End shape  ],  duration: 2000,  easing: 'easeInOutQuad',  loop: true,  direction: 'alternate'})

5. Timeline Sequence

javascript
const tl = anime.timeline({  easing: 'easeOutExpo',  duration: 750})
tl.add({  targets: '.title',  translateY: [-50, 0],  opacity: [0, 1]}).add({  targets: '.subtitle',  translateY: [-30, 0],  opacity: [0, 1]}, '-=500').add({  targets: '.button',  scale: [0, 1],  opacity: [0, 1]}, '-=300')

6. Keyframe Animation

javascript
anime({  targets: '.element',  keyframes: [    { translateX: 100 },    { translateY: 100 },    { translateX: 0 },    { translateY: 0 }  ],  duration: 4000,  easing: 'easeInOutQuad',  loop: true})

7. Scroll-Triggered Animation

javascript
const animation = anime({  targets: '.scroll-element',  translateY: [100, 0],  opacity: [0, 1],  easing: 'easeOutQuad',  autoplay: false})
window.addEventListener('scroll', () => {  const scrollPercent = window.scrollY / (document.body.scrollHeight - window.innerHeight)  animation.seek(animation.duration * scrollPercent)})

Integration Patterns

With React

javascript
import { useEffect, useRef } from 'react'import anime from 'animejs'
function AnimatedComponent() {  const ref = useRef(null)
  useEffect(() => {    const animation = anime({      targets: ref.current,      translateX: 250,      duration: 800,      easing: 'easeInOutQuad'    })
    return () => animation.pause()  }, [])
  return <div ref={ref}>Animated</div>}

With Vue

javascript
export default {  mounted() {    anime({      targets: this.$el,      translateX: 250,      duration: 800    })  }}

Path Following Animation

javascript
const path = anime.path('#motion-path')
anime({  targets: '.element',  translateX: path('x'),  translateY: path('y'),  rotate: path('angle'),  easing: 'linear',  duration: 2000,  loop: true})

Advanced Techniques

Spring Easing

javascript
anime({  targets: '.element',  translateX: 250,  easing: 'spring(1, 80, 10, 0)', // mass, stiffness, damping, velocity  duration: 2000})

Steps Easing

javascript
anime({  targets: '.element',  translateX: 250,  easing: 'steps(5)',  duration: 1000})

Custom Bezier

javascript
anime({  targets: '.element',  translateX: 250,  easing: 'cubicBezier(.5, .05, .1, .3)',  duration: 1000})

Direction and Loop

javascript
anime({  targets: '.element',  translateX: 250,  direction: 'alternate', // 'normal', 'reverse', 'alternate'  loop: true,             // or number of iterations  easing: 'easeInOutQuad'})

Playback Control

javascript
const animation = anime({  targets: '.element',  translateX: 250,  autoplay: false})
animation.play()animation.pause()animation.restart()animation.reverse()animation.seek(500) // Seek to 500ms

Performance Optimization

Use Transform and Opacity

javascript
// ✅ Good: GPU-acceleratedanime({  targets: '.element',  translateX: 250,  opacity: 0.5})
// ❌ Avoid: Triggers layoutanime({  targets: '.element',  left: '250px',  width: '500px'})

Batch Similar Animations

javascript
// ✅ Single animation for multiple targetsanime({  targets: '.multiple-elements',  translateX: 250})
// ❌ Avoid: Multiple separate animationselements.forEach(el => {  anime({ targets: el, translateX: 250 })})

Use will-change for Complex Animations

css
.animated-element {  will-change: transform, opacity;}

Disable autoplay for Scroll Animations

javascript
const animation = anime({  targets: '.element',  translateX: 250,  autoplay: false // Control manually})

Common Pitfalls

1. Forgetting Unit Types

javascript
// ❌ Wrong: No unitanime({ targets: '.element', width: 200 })
// ✅ Correct: Include unitanime({ targets: '.element', width: '200px' })

2. Using CSS transform Property Directly

javascript
// ❌ Wrong: Can't animate transform stringanime({ targets: '.element', transform: 'translateX(250px)' })
// ✅ Correct: Individual transform propertiesanime({ targets: '.element', translateX: 250 })

3. Not Handling Animation Cleanup

javascript
// ❌ Wrong: Animation continues after unmountuseEffect(() => {  anime({ targets: ref.current, translateX: 250 })}, [])
// ✅ Correct: Pause on cleanupuseEffect(() => {  const anim = anime({ targets: ref.current, translateX: 250 })  return () => anim.pause()}, [])

4. Animating Too Many Elements

javascript
// ❌ Avoid: Animating 1000+ elementsanime({ targets: '.many-items', translateX: 250 }) // 1000+ elements
// ✅ Better: Use CSS animations for large sets// Or reduce element count with virtualization

5. Incorrect Timeline Timing

javascript
// ❌ Wrong: Missing offset operator.add({ targets: '.el2' }, '500') // Treated as absolute time
// ✅ Correct: Use relative operators.add({ targets: '.el2' }, '-=500') // Relative to previous.add({ targets: '.el3' }, '+=200') // Relative to previous

6. Overusing Loop

javascript
// ❌ Avoid: Infinite loops drain batteryanime({  targets: '.element',  rotate: '1turn',  loop: true,  duration: 1000})
// ✅ Better: Use CSS animations for infinite loops@keyframes rotate {  from { transform: rotate(0deg); }  to { transform: rotate(360deg); }}

Resources

Scripts

  • animation_generator.py - Generate Anime.js animation boilerplate (8 types)
  • timeline_builder.py - Build complex timeline sequences

References

  • api_reference.md - Complete Anime.js API documentation
  • stagger_guide.md - Stagger utilities and patterns
  • timeline_guide.md - Timeline sequencing deep dive

Assets

  • starter_animejs/ - Vanilla JS + Vite template with examples
  • examples/ - Real-world patterns (SVG morphing, stagger grids, timelines)

Related Skills

  • gsap-scrolltrigger - More powerful timeline features and scroll integration
  • motion-framer - React-specific declarative animations
  • react-spring-physics - Physics-based spring animations
  • lightweight-3d-effects - Simple 3D effects (Zdog, Vanta.js)

Anime.js vs GSAP: Use Anime.js for SVG-heavy animations, simpler projects, or when bundle size matters. Use GSAP for complex scroll-driven experiences, advanced timelines, and professional-grade control.

Anime.js vs Framer Motion: Use Anime.js for framework-agnostic projects or when working outside React. Use Framer Motion for React-specific declarative animations with gesture integration.

来源与署名

来源：freshtechbro/claudedesignskills位于.claude/skills/animejs提交1da73fe

许可证： 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多来自 freshtechbro/claudedesignskills 的技能

Web3d Integration Patterns

freshtechbro

在 3D 网页应用中组合 Three.js、GSAP、React Three Fiber、Motion 与 React Spring 的架构模式。

Software Development1K10个月前更新

Threejs Webgl

freshtechbro

指导 Three.js WebGL/WebGPU 开发，用于构建交互式 3D 网页场景，并提供参考文档与起始场景。

包含脚本
Software Development1K10个月前更新

Substance 3d Texturing

freshtechbro

指导在 Substance 3D Painter 中创建并导出面向网页与实时引擎的 PBR 贴图，并提供 Python 批量自动化。

包含脚本
Design & Creative1K10个月前更新

Scroll Reveal Libraries

freshtechbro

指导使用 AOS 库为网页添加简单的滚动触发显现动画。

包含脚本
Software Development1K10个月前更新

Rive Interactive

freshtechbro

指导在 React 中使用状态机、输入、ViewModel 和事件构建可交互的 Rive 矢量动画。

包含脚本
Design & Creative1K10个月前更新

Pixijs 2d

freshtechbro

指导使用 PixiJS WebGL/WebGPU 引擎构建高性能 2D 图形、粒子效果和交互式画布。

包含脚本
Software Development1K10个月前更新

更多Design & Creative技能

Theme Factory

anthropics

精选

提供 10 套预设配色与字体主题，并可即时生成新主题，用于为幻灯片、文档、报告和 HTML 页面统一风格。

Design & Creative179K今天更新

Slack Gif Creator

anthropics

精选

为 Slack 创建尺寸与体积经过优化的动画 GIF，提供 PIL 绘图辅助、缓动函数与校验工具。

包含脚本
Design & Creative179K今天更新

Frontend Design

anthropics

精选

在构建或改造用户界面时，提供打造独特、有意图的视觉设计的指导。

Design & Creative179K今天更新

Canvas Design

anthropics

精选

依据写好的设计理念创作原创视觉艺术，输出 PNG 或 PDF，适用于海报、艺术作品等静态成品。

Design & Creative179K今天更新

Brand Guidelines

anthropics

精选

将 Anthropic 官方品牌配色与字体应用到需要体现 Anthropic 外观风格的各类产物上。

Design & Creative179K今天更新

Frontend Design

anthropics

精选

指导智能体为新界面或改版界面进行独特、有意图的视觉设计。

Design & Creative149K今天更新