Anime Js

This is a solid reference for implementing Disney's 12 animation principles with Anime.js, complete with working code for squash and stretch, anticipation, follow-through, and the rest. You get practical examples for timelines, staggers, spring physics, and SVG path animations. The keyframe syntax is straightforward and the relative timing offsets make sequencing intuitive. If you're building UI animations that feel polished rather than robotic, this gives you the building blocks. The examples are copy-paste ready, though you'll want to adjust durations and easing curves to match your specific use case.

skills.sh installs: 682
GitHub stars: 146
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add dylantarre/animation-principles --skill anime-js --agent claude-code

Installs into .claude/skills of the current project.

Files

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
});