What is the animejs-animation skill?
Animejs-animation is a skill that teaches an AI coding agent to build complex web motion with the Anime.js library: multi-stage timelines, staggered reveals across grids or text, and SVG path morphing. It checks the installed Anime.js version first, since v3 and v4 use different timeline syntax, then applies custom easing instead of plain linear motion.
Animejs-animation is one entry in the agentic-awesome-skills catalog, built around the Anime.js JavaScript animation engine. It targets complex timelines, staggering and precise control over DOM, CSS and SVG properties rather than basic CSS transitions.
It is meant for high-fidelity motion: multi-stage landing page sequences, staggered grid or text reveals, SVG path morphing, and kinetic UI elements that respond to input. The skill names this the tool of choice for awards-caliber interactive sites.
What changes in the agent's output
- The agent identifies the exact DOM elements or SVGs to animate before writing any motion code.
- It checks which Anime.js major version is installed, since v3's anime.timeline() and v4's createTimeline() take different arguments.
- It reaches for named easing curves such as cubicBezier, spring or elastic rather than defaulting to linear or ease-in-out.
- It sequences steps with anime.timeline() and relative offsets like -200 so animations overlap instead of running one after another.
- It applies anime.stagger() across grids, text characters or data points so reveals read as organic rather than simultaneous.
Who the skill is for
Best for
- Landing pages or product sites that need an orchestrated, multi-stage motion sequence rather than a single fade.
- Interfaces with staggered reveals across grids, lists or individual text characters.
- SVG-heavy pages that need path morphing or line-drawing animation, not just transform and opacity changes.
Not for
- If your stack already uses GSAP for sequencing, GSAP Timeline covers that timeline and label system directly instead of Anime.js.
- Choosing a fixed set of duration and easing tokens for an entire product is a separate exercise that Motion System handles across a whole design system.
- Wiring up ready-made animated components from a library rather than writing custom timeline code is what Animated Component Libraries covers.
Use it with UiChemy
The skill writes the Anime.js motion code inside your project. Once a build with that motion needs to live in WordPress as an editable page, UiChemy AI to WordPress imports it. Click Get Started on uichemy.com.
How to install Anime.js Animation Skill for Staggered Web Motion
npm exec --yes --ignore-scripts [email protected] -- agentic-awesome-skills --release 19.10.1 --path .agents/skills --skills animejs-animation --dry-runPreview the install
Run the command above. It validates the animejs-animation id against the catalog and writes an aas-stack.json preview without installing anything yet.
Review the preview
Check aas-stack.json for the animejs-animation entry, then repeat the same command without --dry-run to copy SKILL.md into .agents/skills.
Optional: configure the MCP server
Run aas mcp configure with --host and --scope flags if you want an agent to pick skills from the full catalog itself instead of naming one directly.
Ask the agent to use it
Reference the skill in a request, for example: use the animejs-animation skill to build a staggered reveal for this grid.
Check that it loaded
Confirm SKILL.md for animejs-animation exists under .agents/skills, then ask for a staggered or timeline animation and check the output calls anime.timeline() or anime.stagger().
Key features
- Advanced easing controlDirects the agent toward named easing curves such as cubicBezier, spring or elastic instead of plain linear or ease-in-out, so motion reads as deliberate.
- Timeline orchestrationUses anime.timeline() to sequence multi-step choreography, with relative offsets such as -200 so one step can start before the previous one finishes.
- Version awarenessChecks the installed Anime.js major version first, since v3 uses anime.timeline() while v4 uses a separate createTimeline() function with a different signature.
- Staggered revealsApplies anime.stagger() to grids, text characters or data points so multiple elements animate in sequence instead of all at once.
- SVG path animationCovers morphing shapes and drawing dynamic lines along SVG paths, beyond moving or fading plain DOM elements.
- Performance guardrailsCalls for watching main-thread usage and applying will-change on transform and opacity only where it earns a real frame-rate gain.
- Reduced-motion handlingRequires a static final state for prefers-reduced-motion users, no scroll hijacking, and animations that get removed when their component unmounts.
- Scope disciplineTells the agent to use motion only when the brief calls for it, keeping plain transitions and static states as valid choices.
Frequently asked questions
What is the animejs-animation skill?
It is a catalog entry that teaches an AI coding agent to build Anime.js motion: multi-stage timelines, staggered reveals across grids or text, and SVG path morphing, using named easing curves instead of plain linear motion.
How do I install the animejs-animation skill?
Run npm exec --package=agentic-awesome-skills -- agentic-awesome-skills --path .agents/skills --skills animejs-animation with --dry-run first to preview the change, then run the same command again without that flag to copy SKILL.md into your project under .agents/skills.
Does the animejs-animation skill support Anime.js v4?
It names both major versions explicitly and warns against mixing their syntax in one project: Anime.js v3 uses anime.timeline() for sequencing, while v4 uses a separate createTimeline() function with a different target and parameter signature.
What kind of motion does the animejs-animation skill build?
Multi-stage landing page sequences, staggered reveals for grids or individual text characters using anime.stagger(), SVG path morphing and line-drawing animation, plus kinetic UI elements that respond to user input with custom easing curves.
Does the animejs-animation skill respect reduced motion settings?
Yes. It requires a static final state for users with prefers-reduced-motion enabled, avoids scroll hijacking, keeps keyboard and focus interactions usable right away, and removes animations when the component they belong to unmounts.
Does the animejs-animation skill work in Cursor or Codex?
The agentic-awesome-skills catalog it ships from lists support for Claude Code, Cursor, Codex and Gemini CLI, all through the same install command plus an optional MCP server for agent-driven skill selection across the full catalog.
What easing does the animejs-animation skill recommend?
Named curves such as cubicBezier, spring or elastic, chosen over basic linear or ease-in-out so the motion feels considered rather than mechanical. It also warns that will-change is a temporary rendering hint, not a guaranteed performance gain.
Is the animejs-animation skill free to use?
The agentic-awesome-skills repository it comes from carries the MIT license, which permits free use, modification and redistribution as long as the original copyright notice stays with the code. Anime.js itself is licensed separately by its own maintainers.