bowtiedswan/animejs-skills

Overview

This skill provides a comprehensive reference and examples for Anime.js v4, a fast, modular JavaScript animation library. It covers installation, core APIs (animate, createTimeline, createTimer), utilities (stagger, motion path, SVG morphing), and integrations for web, SVG, and React. Use it to design performant, complex animations with small bundle sizes and tree-shaking support.

How this skill works

The skill organizes Anime.js v4 features into focused modules: timers, animations, timelines, draggable, layout, scope, scroll events, SVG tools, text utilities, and easing/spring systems. It explains how to import only required modules for smaller bundles and demonstrates programmatic APIs, playback controls, callbacks, and utility helpers. Practical examples show basic tweens, keyframes, staggered sequences, scroll-driven playback, motion paths, and draggable interactions.

When to use it

• Animating DOM, CSS transforms, CSS variables, or JS object properties programmatically
• Coordinating complex sequences with precise timing using timelines
• Animating SVG shapes, morphing paths, or drawing strokes
• Creating scroll-synced or viewport-triggered animations
• Implementing draggable elements with physics-based release via springs
• Building staggered entrances or grid-based choreography

Best practices

• Import only the modules you need (animate, timeline, draggable) to keep bundles small
• Prefer transforms and opacity for smooth, GPU-accelerated animations
• Use timelines and labels for maintainable sequencing instead of chained timeouts
• Use function-based values and stagger utilities for reusable, data-driven motion
• Use createTimer/frameRate controls and pauseOnDocumentHidden to conserve resources
• Sync with WAAPI when you need native hardware-accelerated advantages

Example use cases

• Animate card grid entrances with staggered translateY and opacity for UX polish
• Create an SVG logo morph and line-draw animation on page load
• Build a scroll-driven hero animation that syncs progress to scroll position
• Compose a reusable draggable carousel with spring release behavior
• Coordinate multi-element choreography with createTimeline and relative offsets
• Integrate scoped animations inside React components and revert on unmount