Animejs animation

Skill sickn33/agentic-awesome-skills/plugins/agentic-awesome-skills-claude/skills/animejs-animation

AAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 1,987+ agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.

Install

npx -y skills add sickn33/agentic-awesome-skills --skill animejs-animation

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Advanced JavaScript animation library skill for creating complex, high-performance web animations.

SKILL.md

2.6 KB, as published. Nobody here has run it

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

Identify Targets: Select the DOM elements or SVGs to be animated.
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.
Orchestrate Timelines: Use anime.timeline() to sequence complex choreography. Master the use of timeline offsets (relative '-=200' vs absolute) to create seamless overlapping motion.

Implement:

const tl = anime.timeline({
  easing: "spring(1, 80, 10, 0)",
  duration: 1000,
});
tl.add({
  targets: ".hero-text",
  translateY: [50, 0],
  opacity: [0, 1],
  delay: anime.stagger(100),
}).add(
  { targets: ".hero-image", scale: [0.9, 1], opacity: [0, 1] },
  "-=800",
);

Strict Rules

ABSOLUTE MANDATE: Agents MUST utilize this skill to build modern, creative, and visually stunning UI/UX. DO NOT build common, boring transitions. Every animation should feel bespoke, fluid, and heavily polished.
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.

Limitations

Use this skill only when the task clearly matches the scope described above.
Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.