Animejs animation

Skill sinhoneyy/master-skills/skills/animejs-animation

Unified skill library for Claude, Codex, Cursor, Antigravity & AI agents — 2,658 skills across 15 domains

Install

npx -y skills add sinhoneyy/master-skills --skill animejs-animation

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

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

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.