mcpField
A
anime-js

anime-js

github.com/dylantarreDesign & UI134645 installsUpdated 43w ago
Repository

About anime-js

A coding reference for implementing Disney’s 12 animation principles with Anime.js. It provides JavaScript examples for motion techniques and demonstrates timelines, keyframes, staggering, and easing.

Key features

  1. 01Examples for all 12 animation principles
  2. 02Anime.js timelines and keyframes
  3. 03Staggered delays and relative timing
  4. 04SVG paths and easing options

Use cases

  1. 01Adding anticipation and follow-through to interface motion
  2. 02Sequencing multiple animated elements
  3. 03Creating curved or staggered movement with Anime.js

Install

Copy the command and run it in a terminal.

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

After installing, type/anime-jsin Claude Code to confirm it loaded.

Details

From the project README

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

Comments

Markdown supported