agentsclimarketplace

Animejs animation

Skill pinkpixel-dev/skills-collection-1/SKILLS/animejs-animation

Part 1 of a large AI and agent skills collection featuring 900+ reusable skill folders, prompt workflows, references, scripts, and assets across engineering, cloud, security, research, writing, design, and automation.

Install
npx -y skills add pinkpixel-dev/skills-collection-1 --skill animejs-animation

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

One thing to look at

  • 7 stars7 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.3 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

  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: Use anime.timeline() to sequence complex choreography. Master the use of timeline offsets (relative '-=200' vs absolute) to create seamless overlapping motion.
  4. 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.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.