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.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
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.
cluster
creative-frontend
version
1.0.0
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)
// ❌ 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
// ❌ 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
// ❌ 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); }
}
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.
