Animejs

by freshtechbro1da73febff0cNo license1K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 10 months ago

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.

Includes scriptsDesign & Creative Software Development

AI-generated overview

Guides Anime.js web animation work: timelines, stagger effects, SVG morphing, keyframes and playback control.

What it does: This skill documents how to build web animations with the Anime.js JavaScript library, covering basic animations, targets, animatable CSS, SVG and object properties, timelines, stagger utilities, keyframes, easing options and playback control. It also lists integration patterns for React and Vue, performance advice and common pitfalls. It ships two Python scripts that generate animation boilerplate and build timeline sequences, plus reference guides and a starter template.
When to use it: Use it when creating timeline-based or choreographed web animations, staggered sequences across many elements, SVG path drawing or morphing, or keyframe animations in framework-agnostic projects. It is also relevant when choosing between Anime.js and alternatives such as GSAP or Framer Motion.
Requirements: Requires the Anime.js JavaScript library in the target project and a JavaScript or web runtime; the bundled Python scripts need a Python interpreter. No credentials or network access are described.

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'})

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 })

// 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'})

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})

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})

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)})

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

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})

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'})

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})

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'})

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')

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})

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)})

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>}

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    })  }}

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})

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})

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

Steps Easing

Custom Bezier

javascript

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

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'})

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

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'})

// ✅ 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 })})

// ✅ 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

Disable autoplay for Scroll Animations

javascript

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

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' })

// ❌ 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 })

// ❌ 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()}, [])

// ❌ 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

// ❌ 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

// ❌ 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); }}

// ❌ 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.

Source and attribution

Source:freshtechbro/claudedesignskillsin.claude/skills/animejsat commit1da73fe

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Animejs

Anime.js

Overview

Core Concepts

Basic Animation

Targets

Animatable Properties

Timeline

Common Patterns

1. Stagger Animation (Sequential Reveal)

2. Stagger from Center

3. SVG Line Drawing

4. SVG Morphing

5. Timeline Sequence

6. Keyframe Animation

7. Scroll-Triggered Animation

Integration Patterns

With React

With Vue

Path Following Animation

Advanced Techniques

Spring Easing

Steps Easing

Custom Bezier

Direction and Loop

Playback Control

Performance Optimization

Use Transform and Opacity

Batch Similar Animations

Use will-change for Complex Animations

Disable autoplay for Scroll Animations

Common Pitfalls

1. Forgetting Unit Types

2. Using CSS transform Property Directly

3. Not Handling Animation Cleanup

4. Animating Too Many Elements

5. Incorrect Timeline Timing

6. Overusing Loop

Resources

Scripts

References

Assets

Related Skills

Source and attribution

More from freshtechbro/claudedesignskills

Web3d Integration Patterns

Threejs Webgl

Substance 3d Texturing

Scroll Reveal Libraries

Rive Interactive

Pixijs 2d

More in Design & Creative

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design

Use `will-change` for Complex Animations