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今天更新