Agent skill · design visual · sickn33
animejs-animation
Advanced JavaScript animation library skill for creating complex, high-performance web animations.
Why this skill is useful
Provides advanced techniques and specific code examples for high-performance web animations that the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 44,571 stars on the source repository.
What this skill does
Anime.js Animation Skill Anime.js is a lightweight but extremely powerful JavaScript animation engine. It excels at complex timelines, staggering, and precise control over DOM, CSS, and SVGs. Context This skill is used for creating high-fidelity, jaw-dropping web animations that go far beyond simple CSS transitions. It's the tool of choice for awards-caliber interactive sites. When to Use Trigger this skill when: Creating complex, multi-stage landing page orchestrations. Implementing staggered animations for revealing grids, text, or data visualizations. Animating SVG paths (morphing shapes, drawing dynamic lines). Building highly interactive, kinetic UI elements that respond fluidly to user input. Execution Workflow 1. Identify Targets: Select the DOM elements or SVGs to be animated. 2. Define Properties & Easing: Specify values to animate. Crucially, utilize advanced easing functions (e.g., custom cubicBezier, spring, or elastic) instead of basic linear or ease-in-out to make the motion feel expensive and natural. 3. Orchestrate Timelines: Inspect the installed major version first. This example targets Anime.js v3; use anime.timeline() to sequence complex choreography. Master the use of timeline offsets (relative '-=200' vs absolute) to create seamless overlapping motion. 4. Implement: For a bundler with Anime.js v3 installed, import anime from "animejs"; supplies the anime binding. The selectors must exist in the rendered DOM. Motion and Compatibility Scope: Use motion when it serves the product brief and user task. Respect the existing design system; simple transitions and static states are valid choices. Staggering: Leverage anime.stagger() extensively to add organic rhythm to multiple elements. Performance: Monitor main thread usage; use will-change: transform, opacity where appropriate for GPU acceleration. Example User request: Create complex, multi-stage landing page orchestrations. Limitations The code above uses the v3 API. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sickn33/animejs-animation