Agent skill
anime-js
Anime.js animation patterns for web interfaces including timelines, staggering, and motion design.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/anime-js-5dlabs-cto-2
SKILL.md
Anime.js Animation Patterns
High-performance animations for web interfaces using Anime.js.
Core Concepts
| Concept | Description |
|---|---|
| Targets | CSS selectors, DOM elements, or JS objects |
| Properties | CSS, SVG, DOM, or object properties to animate |
| Timeline | Sequence and coordinate multiple animations |
| Staggering | Cascade animations across multiple targets |
| Easing | Control animation timing curves |
Basic Animation
import anime from 'animejs'
// Simple animation
anime({
targets: '.element',
translateX: 250,
opacity: [0, 1],
duration: 1000,
easing: 'easeOutExpo'
})
CSS Properties
anime({
targets: '.box',
translateX: 250,
translateY: 50,
rotate: '1turn',
scale: 1.5,
opacity: 0.5,
backgroundColor: '#FFF',
borderRadius: ['0%', '50%'],
duration: 2000
})
SVG Animations
// Line drawing
anime({
targets: 'path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay: (el, i) => i * 250
})
// Morph path
anime({
targets: 'path',
d: [
{ value: 'M0 0 L100 0 L100 100 L0 100 Z' },
{ value: 'M50 0 L100 50 L50 100 L0 50 Z' }
],
easing: 'easeInOutQuad',
duration: 2000
})
Timeline
const tl = anime.timeline({
easing: 'easeOutExpo',
duration: 750
})
tl
.add({ targets: '.header', translateY: [-100, 0], opacity: [0, 1] })
.add({ targets: '.content', translateX: [-100, 0], opacity: [0, 1] }, '-=500')
.add({ targets: '.footer', translateY: [100, 0], opacity: [0, 1] }, '-=500')
Staggering
// Basic stagger
anime({
targets: '.grid-item',
translateY: [100, 0],
opacity: [0, 1],
delay: anime.stagger(100)
})
// Grid stagger
anime({
targets: '.grid-item',
scale: [0, 1],
delay: anime.stagger(50, { grid: [7, 5], from: 'center' })
})
// Stagger with easing
anime({
targets: '.item',
translateX: 350,
delay: anime.stagger(100, { easing: 'easeOutQuad' })
})
Easing Functions
| Category | Functions |
|---|---|
| Built-in | linear, easeInQuad, easeOutExpo, etc. |
| Spring | spring(mass, stiffness, damping, velocity) |
| Steps | steps(5) |
| Custom | cubicBezier(0.5, 0, 0.5, 1) |
anime({
targets: '.element',
translateX: 250,
easing: 'spring(1, 80, 10, 0)'
})
Keyframes
anime({
targets: '.element',
keyframes: [
{ translateY: -40 },
{ translateX: 250 },
{ translateY: 40 },
{ translateX: 0 },
{ translateY: 0 }
],
duration: 4000,
easing: 'easeOutElastic(1, .8)'
})
Callbacks
anime({
targets: '.element',
translateX: 250,
begin: (anim) => console.log('Started'),
update: (anim) => console.log(`Progress: ${anim.progress}%`),
complete: (anim) => console.log('Completed'),
loopBegin: (anim) => console.log('Loop started'),
loopComplete: (anim) => console.log('Loop completed'),
changeBegin: (anim) => console.log('Change began'),
changeComplete: (anim) => console.log('Change completed')
})
Controls
const animation = anime({
targets: '.element',
translateX: 250,
autoplay: false
})
animation.play()
animation.pause()
animation.restart()
animation.reverse()
animation.seek(1000) // Seek to 1000ms
React Integration
import { useEffect, useRef } from 'react'
import anime from 'animejs'
function AnimatedComponent() {
const elementRef = useRef<HTMLDivElement>(null)
useEffect(() => {
if (elementRef.current) {
anime({
targets: elementRef.current,
translateX: 250,
opacity: [0, 1],
duration: 1000
})
}
}, [])
return <div ref={elementRef}>Animated</div>
}
Common Patterns
Page Load Animation
anime.timeline()
.add({ targets: '.logo', scale: [0, 1], duration: 600 })
.add({ targets: '.nav-item', translateY: [-20, 0], opacity: [0, 1], delay: anime.stagger(100) }, '-=400')
.add({ targets: '.hero', translateY: [50, 0], opacity: [0, 1] }, '-=200')
Hover Effect
element.addEventListener('mouseenter', () => {
anime({ targets: element, scale: 1.1, duration: 300 })
})
element.addEventListener('mouseleave', () => {
anime({ targets: element, scale: 1, duration: 300 })
})
Scroll Reveal
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
anime({
targets: entry.target,
translateY: [50, 0],
opacity: [0, 1],
duration: 800
})
observer.unobserve(entry.target)
}
})
})
document.querySelectorAll('.reveal').forEach(el => observer.observe(el))
Performance Tips
- Prefer transform and opacity (GPU accelerated)
- Avoid animating layout properties (width, height, top, left)
- Use
will-changesparingly for complex animations - Batch animations with timeline
- Clean up animations on component unmount
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?