Anime Js

Name: Anime Js
Author: dylantarre

dylantarre/animation-principles

450 installs
68 repo stars
Updated December 30, 2025
dylantarre/animation-principles

anime-js is a Claude Code skill that implements Disney's 12 animation principles using Anime.js timelines, staggers, and SVG or DOM tweens for developers who need lightweight motion on landing pages and dashboards withou

About

anime-js is a Claude Code skill from dylantarre/animation-principles that teaches implementation of all 12 Disney animation principles using the Anime.js library. The skill provides concrete JavaScript patterns for squash and stretch, anticipation, staging, and remaining principles through anime() calls, anime.timeline() sequences, staggers, and SVG or DOM property tweens. Developers reach for anime-js when building marketing sites, landing pages, or dashboards that need polished motion without adopting a heavier React animation framework like Framer Motion. Each principle includes copy-ready code snippets with easing, duration, and transform targets suitable for vanilla or lightly frameworked frontends.

Timeline and stagger orchestration
SVG path and shape morphing
CSS and DOM property tweens
Easing and duration tuning
Small-bundle declarative API

Anime Js by the numbers

450 all-time installs (skills.sh)
Ranked #640 of 2,245 Frontend Development skills by installs in the Skillselion catalog
Data as of Aug 3, 2026 (Skillselion catalog sync)

npx skills add https://github.com/dylantarre/animation-principles --skill anime-js

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/dylantarre/animation-principles/anime-js.svg)](https://skillselion.com/skills/dylantarre/animation-principles/anime-js)

Installs	450
repo stars	★ 68
Last updated	December 30, 2025
Repository	dylantarre/animation-principles ↗

How do you implement Disney animation principles with Anime.js?

Add Anime.js timelines, staggers, and SVG or DOM tweens to landing pages, dashboards, and marketing sites needing lightweight motion without a React animation framework.

Who is it for?

Frontend developers adding lightweight motion to vanilla HTML, CSS, or non-React pages who want Disney-quality animation principles via Anime.js rather than a React-specific library.

Skip if: Teams standardized on React animation frameworks like Framer Motion or GSAP-only workflows where Anime.js timeline patterns are not part of the stack.

When should I use this skill?

A landing page, dashboard, or marketing site needs Anime.js motion implementing squash-and-stretch, anticipation, staging, or other Disney animation principles.

What you get

Anime.js timeline scripts, stagger animations, and SVG or DOM tween code covering all 12 Disney animation principles.

Anime.js animation scripts
Timeline sequences
SVG tween code

By the numbers

Covers all 12 Disney animation principles with Anime.js implementations

Files

SKILL.mdMarkdownGitHub ↗

Anime.js Animation Principles

Implement all 12 Disney animation principles using Anime.js's flexible animation engine.

1. Squash and Stretch

anime({
  targets: '.ball',
  scaleX: [1, 1.2, 1],
  scaleY: [1, 0.8, 1],
  duration: 300,
  easing: 'easeInOutQuad'
});

2. Anticipation

anime.timeline()
  .add({
    targets: '.character',
    translateY: 10,
    scaleY: 0.9,
    duration: 200
  })
  .add({
    targets: '.character',
    translateY: -200,
    duration: 400,
    easing: 'easeOutQuad'
  });

3. Staging

anime({
  targets: '.background',
  filter: 'blur(3px)',
  opacity: 0.6,
  duration: 500
});
anime({
  targets: '.hero',
  scale: 1.1,
  duration: 500
});

4. Straight Ahead / Pose to Pose

anime({
  targets: '.element',
  keyframes: [
    { translateX: 0, translateY: 0 },
    { translateX: 100, translateY: -50 },
    { translateX: 200, translateY: 0 },
    { translateX: 300, translateY: -30 }
  ],
  duration: 1000
});

5. Follow Through and Overlapping Action

anime.timeline()
  .add({ targets: '.body', translateX: 200, duration: 500 })
  .add({ targets: '.hair', translateX: 200, duration: 500 }, '-=450')
  .add({ targets: '.cape', translateX: 200, duration: 600 }, '-=500');

6. Slow In and Slow Out

anime({
  targets: '.element',
  translateX: 300,
  duration: 600,
  easing: 'easeInOutCubic'
});
// Options: easeInQuad, easeOutQuad, easeInOutQuad
// easeInCubic, easeOutCubic, easeInOutCubic
// spring(mass, stiffness, damping, velocity)

7. Arc

anime({
  targets: '.ball',
  translateX: 200,
  translateY: [
    { value: -100, duration: 500 },
    { value: 0, duration: 500 }
  ],
  easing: 'easeOutQuad',
  duration: 1000
});

// Or use SVG path
anime({
  targets: '.element',
  translateX: anime.path('.motion-path')('x'),
  translateY: anime.path('.motion-path')('y'),
  duration: 1000
});

8. Secondary Action

const tl = anime.timeline();
tl.add({
  targets: '.button',
  scale: 1.1,
  duration: 200
})
.add({
  targets: '.icon',
  rotate: 15,
  duration: 150
}, '-=150')
.add({
  targets: '.particles',
  opacity: [0, 1],
  delay: anime.stagger(50)
}, '-=100');

9. Timing

// Fast - snappy
anime({ targets: '.fast', translateX: 100, duration: 150 });

// Normal
anime({ targets: '.normal', translateX: 100, duration: 300 });

// Slow - dramatic
anime({ targets: '.slow', translateX: 100, duration: 600 });

// Spring physics
anime({ targets: '.spring', translateX: 100, easing: 'spring(1, 80, 10, 0)' });

10. Exaggeration

anime({
  targets: '.element',
  scale: 1.5,
  rotate: '2turn',
  duration: 800,
  easing: 'easeOutElastic(1, 0.5)' // overshoot
});

11. Solid Drawing

anime({
  targets: '.box',
  rotateX: 45,
  rotateY: 30,
  perspective: 1000,
  duration: 500
});

12. Appeal

anime({
  targets: '.card',
  scale: 1.02,
  boxShadow: '0 20px 40px rgba(0,0,0,0.2)',
  duration: 300,
  easing: 'easeOutQuad'
});

Stagger Animation

anime({
  targets: '.item',
  translateY: [20, 0],
  opacity: [0, 1],
  delay: anime.stagger(100), // 100ms between each
  easing: 'easeOutQuad'
});

Key Anime.js Features

anime.timeline() - Sequence animations
keyframes - Multiple poses
anime.stagger() - Offset delays
anime.path() - SVG motion paths
Built-in easings + spring() + elastic()
'-=200' - Relative offset timing
anime.set() - Instant property set

Related skills

Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6k

Vercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6k

ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120k

Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72

Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4k

Image To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4k

FAQ

How many animation principles does anime-js cover?

anime-js covers all 12 Disney animation principles with Anime.js implementation patterns. Each principle includes JavaScript snippets using anime() and anime.timeline() with easing, duration, and transform targets.

Does anime-js require React or a component framework?

anime-js targets lightweight Anime.js usage on landing pages, dashboards, and marketing sites without a React animation framework. Patterns use vanilla JavaScript against DOM or SVG selectors.

Frontend Developmentfrontendintegrations