/animejs-animation
--- name: animejs-animation description: Advanced JavaScript animation library skill for creating complex, high-performance web animations. risk: safe source: community date_added: "2026-03-07" ---
One skill from agentic-awesome-skills.
shell
$ npx -y skills add sickn33/agentic-awesome-skills --skill animejs-animation --agent claude-codeInstalls just this skill. Get the whole plugin for auto-invocation.
How it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfClaude auto-loads it when your prompt matches the work.
- You can call itInvoke it directly when you want it.
- Slash command
/animejs-animation
Context preview
The summary Claude sees to decide when to auto-load this skill.
--- name: animejs-animation description: Advanced JavaScript animation library skill for creating complex, high-performance web animations. risk: safe source: community date_added: "2026-03-07" ---
Stats
Stars43,761
Forks6,465
LanguagePython
LicenseMIT
Ships with agentic-awesome-skills
SKILL.md
animejs-animation.SKILL.md
--- name: animejs-animation description: Advanced JavaScript animation library skill for creating complex, high-performance web animations. risk: safe source: community date_added: "2026-03-07" --- # Anime.js Animation Skill [Anime.js](https://animejs.com/) 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.
