Anime Js

dylantarre/animation-principles/skills/09-by-tool-framework/anime-js

by dylantarre83597134ba8fNo license99 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 9 months ago

Use when implementing Disney's 12 animation principles with Anime.js library

Instructions onlyDesign & Creative Software Development

AI-generated overview

Reference guide for implementing Disney's 12 animation principles with the Anime.js JavaScript library.

What it does: This skill provides code examples that show how to express each of Disney's 12 animation principles using Anime.js. It covers squash and stretch, anticipation, staging, pose-to-pose keyframes, follow through, easing, arcs, secondary action, timing, exaggeration, solid drawing and appeal. It also documents supporting Anime.js features such as timelines, stagger, SVG motion paths and spring or elastic easings.
When to use it: Use it when building web animations with Anime.js and you want to apply classic animation principles to the motion. It is suited to front-end work where timing, easing and sequencing of animated elements matter.
Requirements: Requires the Anime.js JavaScript library in the target project. It ships no scripts or assets; it is an instructions-only reference.

Anime.js Animation Principles

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

1. Squash and Stretch

javascript

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

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

2. Anticipation

javascript

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

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

3. Staging

javascript

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

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

javascript

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

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

javascript

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

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

javascript

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

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

7. Arc

javascript

anime({  targets: '.ball',  translateX: 200,  translateY: [    { value: -100, duration: 500 },    { value: 0, duration: 500 }  ],  easing: 'easeOutQuad',  duration: 1000});
// Or use SVG pathanime({  targets: '.element',  translateX: anime.path('.motion-path')('x'),  translateY: anime.path('.motion-path')('y'),  duration: 1000});

anime({  targets: '.ball',  translateX: 200,  translateY: [    { value: -100, duration: 500 },    { value: 0, duration: 500 }  ],  easing: 'easeOutQuad',  duration: 1000});
// Or use SVG pathanime({  targets: '.element',  translateX: anime.path('.motion-path')('x'),  translateY: anime.path('.motion-path')('y'),  duration: 1000});

8. Secondary Action

javascript

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

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

javascript

// Fast - snappyanime({ targets: '.fast', translateX: 100, duration: 150 });
// Normalanime({ targets: '.normal', translateX: 100, duration: 300 });
// Slow - dramaticanime({ targets: '.slow', translateX: 100, duration: 600 });
// Spring physicsanime({ targets: '.spring', translateX: 100, easing: 'spring(1, 80, 10, 0)' });

// Fast - snappyanime({ targets: '.fast', translateX: 100, duration: 150 });
// Normalanime({ targets: '.normal', translateX: 100, duration: 300 });
// Slow - dramaticanime({ targets: '.slow', translateX: 100, duration: 600 });
// Spring physicsanime({ targets: '.spring', translateX: 100, easing: 'spring(1, 80, 10, 0)' });

10. Exaggeration

javascript

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

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

11. Solid Drawing

12. Appeal

javascript

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

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

Stagger Animation

javascript

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

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

Source and attribution

Source:dylantarre/animation-principlesinskills/09-by-tool-framework/anime-jsat commit8359713

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Anime Js

Anime.js Animation Principles

1. Squash and Stretch

2. Anticipation

3. Staging

4. Straight Ahead / Pose to Pose

5. Follow Through and Overlapping Action

6. Slow In and Slow Out

7. Arc

8. Secondary Action

9. Timing

10. Exaggeration

11. Solid Drawing

12. Appeal

Stagger Animation

Key Anime.js Features

Source and attribution

More from dylantarre/animation-principles

Rive Animations

Timing Principle Mastery

Ux Friction

User Feedback Clarity

Straight Ahead Pose Mastery

Universal Solutions

More in Design & Creative

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design