anime-js

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