Popmotion

dylantarre/animation-principles/skills/09-by-tool-framework/popmotion

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

Use when implementing Disney's 12 animation principles with Popmotion's functional animation library

Instructions onlyDesign & Creative Software Development

AI-generated overview

Implements Disney's 12 animation principles with Popmotion's functional animation functions.

What it does: This skill provides code recipes for expressing each of Disney's 12 animation principles using the Popmotion JavaScript animation library. It covers squash and stretch, anticipation, staging, pose-to-pose, follow-through, easing, arcs, secondary action, timing, exaggeration, solid drawing and appeal. Each principle is illustrated with a short snippet using animate(), spring() or keyframes(). It also lists core Popmotion features such as easing functions and composable utilities.
When to use it: Use it when building web animations with Popmotion and wanting to apply classic animation principles to motion design. It suits developers who need concrete snippets for easing, springs, keyframes or overlapping action.
Requirements: Requires the Popmotion JavaScript library in the target project; no scripts, credentials or network access are included.

Popmotion Animation Principles

Implement all 12 Disney animation principles using Popmotion's composable animation functions.

1. Squash and Stretch

javascript

import { animate } from "popmotion";
animate({  from: { scaleX: 1, scaleY: 1 },  to: { scaleX: 1.2, scaleY: 0.8 },  duration: 150,  onUpdate: ({ scaleX, scaleY }) => {    element.style.transform = `scaleX(${scaleX}) scaleY(${scaleY})`;  }});

import { animate } from "popmotion";
animate({  from: { scaleX: 1, scaleY: 1 },  to: { scaleX: 1.2, scaleY: 0.8 },  duration: 150,  onUpdate: ({ scaleX, scaleY }) => {    element.style.transform = `scaleX(${scaleX}) scaleY(${scaleY})`;  }});

2. Anticipation

javascript

// Wind up then actionanimate({  from: 0,  to: 10,  duration: 200,  onUpdate: v => element.style.transform = `translateY(${v}px) scaleY(0.9)`,  onComplete: () => {    animate({      from: 10,      to: -200,      duration: 400,      ease: easeOut,      onUpdate: v => element.style.transform = `translateY(${v}px)`    });  }});

// Wind up then actionanimate({  from: 0,  to: 10,  duration: 200,  onUpdate: v => element.style.transform = `translateY(${v}px) scaleY(0.9)`,  onComplete: () => {    animate({      from: 10,      to: -200,      duration: 400,      ease: easeOut,      onUpdate: v => element.style.transform = `translateY(${v}px)`    });  }});

3. Staging

javascript

animate({  from: 1,  to: 0.6,  onUpdate: v => bg.style.opacity = v});animate({  from: 1,  to: 1.1,  onUpdate: v => hero.style.transform = `scale(${v})`});

animate({  from: 1,  to: 0.6,  onUpdate: v => bg.style.opacity = v});animate({  from: 1,  to: 1.1,  onUpdate: v => hero.style.transform = `scale(${v})`});

4. Straight Ahead / Pose to Pose

javascript

import { keyframes } from "popmotion";
keyframes({  values: [    { x: 0, y: 0 },    { x: 100, y: -50 },    { x: 200, y: 0 },    { x: 300, y: -30 }  ],  duration: 1000,  onUpdate: ({ x, y }) => {    element.style.transform = `translate(${x}px, ${y}px)`;  }});

import { keyframes } from "popmotion";
keyframes({  values: [    { x: 0, y: 0 },    { x: 100, y: -50 },    { x: 200, y: 0 },    { x: 300, y: -30 }  ],  duration: 1000,  onUpdate: ({ x, y }) => {    element.style.transform = `translate(${x}px, ${y}px)`;  }});

5. Follow Through and Overlapping Action

javascript

animate({ from: 0, to: 200, duration: 500,  onUpdate: v => body.style.transform = `translateX(${v}px)` });
animate({ from: 0, to: 200, duration: 500, elapsed: -50, // delay  onUpdate: v => hair.style.transform = `translateX(${v}px)` });
animate({ from: 0, to: 200, duration: 600, elapsed: -100,  onUpdate: v => cape.style.transform = `translateX(${v}px)` });

animate({ from: 0, to: 200, duration: 500,  onUpdate: v => body.style.transform = `translateX(${v}px)` });
animate({ from: 0, to: 200, duration: 500, elapsed: -50, // delay  onUpdate: v => hair.style.transform = `translateX(${v}px)` });
animate({ from: 0, to: 200, duration: 600, elapsed: -100,  onUpdate: v => cape.style.transform = `translateX(${v}px)` });

6. Slow In and Slow Out

javascript

import { animate, easeInOut, easeIn, easeOut } from "popmotion";
animate({  from: 0,  to: 300,  duration: 600,  ease: easeInOut,  onUpdate: v => element.style.transform = `translateX(${v}px)`});

import { animate, easeInOut, easeIn, easeOut } from "popmotion";
animate({  from: 0,  to: 300,  duration: 600,  ease: easeInOut,  onUpdate: v => element.style.transform = `translateX(${v}px)`});

7. Arc

javascript

keyframes({  values: [    { x: 0, y: 0 },    { x: 100, y: -100 },    { x: 200, y: 0 }  ],  duration: 1000,  ease: easeInOut,  onUpdate: ({ x, y }) => {    element.style.transform = `translate(${x}px, ${y}px)`;  }});

keyframes({  values: [    { x: 0, y: 0 },    { x: 100, y: -100 },    { x: 200, y: 0 }  ],  duration: 1000,  ease: easeInOut,  onUpdate: ({ x, y }) => {    element.style.transform = `translate(${x}px, ${y}px)`;  }});

8. Secondary Action

javascript

// Primary action triggers secondaryanimate({  from: 1, to: 1.1, duration: 200,  onUpdate: v => button.style.transform = `scale(${v})`,  onComplete: () => {    animate({      from: 0, to: 15, duration: 150,      onUpdate: v => icon.style.transform = `rotate(${v}deg)`    });  }});

// Primary action triggers secondaryanimate({  from: 1, to: 1.1, duration: 200,  onUpdate: v => button.style.transform = `scale(${v})`,  onComplete: () => {    animate({      from: 0, to: 15, duration: 150,      onUpdate: v => icon.style.transform = `rotate(${v}deg)`    });  }});

9. Timing

javascript

import { spring } from "popmotion";
// Fastanimate({ from: 0, to: 100, duration: 150 });
// Spring physicsspring({  from: 0,  to: 100,  stiffness: 300,  damping: 20,  onUpdate: v => element.style.transform = `translateX(${v}px)`});
// Slowanimate({ from: 0, to: 100, duration: 800, ease: easeOut });

import { spring } from "popmotion";
// Fastanimate({ from: 0, to: 100, duration: 150 });
// Spring physicsspring({  from: 0,  to: 100,  stiffness: 300,  damping: 20,  onUpdate: v => element.style.transform = `translateX(${v}px)`});
// Slowanimate({ from: 0, to: 100, duration: 800, ease: easeOut });

10. Exaggeration

javascript

spring({  from: { scale: 1, rotate: 0 },  to: { scale: 1.5, rotate: 720 },  stiffness: 200,  damping: 10, // low = overshoot  onUpdate: ({ scale, rotate }) => {    element.style.transform = `scale(${scale}) rotate(${rotate}deg)`;  }});

spring({  from: { scale: 1, rotate: 0 },  to: { scale: 1.5, rotate: 720 },  stiffness: 200,  damping: 10, // low = overshoot  onUpdate: ({ scale, rotate }) => {    element.style.transform = `scale(${scale}) rotate(${rotate}deg)`;  }});

11. Solid Drawing

javascript

animate({  from: { rotateX: 0, rotateY: 0 },  to: { rotateX: 45, rotateY: 30 },  duration: 500,  onUpdate: ({ rotateX, rotateY }) => {    box.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;  }});

animate({  from: { rotateX: 0, rotateY: 0 },  to: { rotateX: 45, rotateY: 30 },  duration: 500,  onUpdate: ({ rotateX, rotateY }) => {    box.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;  }});

12. Appeal

javascript

animate({  from: 1,  to: 1.02,  duration: 300,  ease: easeOut,  onUpdate: v => {    card.style.transform = `scale(${v})`;    card.style.boxShadow = `0 ${20*v}px 40px rgba(0,0,0,${0.2*v})`;  }});

animate({  from: 1,  to: 1.02,  duration: 300,  ease: easeOut,  onUpdate: v => {    card.style.transform = `scale(${v})`;    card.style.boxShadow = `0 ${20*v}px 40px rgba(0,0,0,${0.2*v})`;  }});

Key Popmotion Features

animate() - Tween animations
spring() - Physics-based spring
keyframes() - Multi-step animations
decay() - Momentum/inertia
easeIn, easeOut, easeInOut - Easing functions
Composable functions - mix and pipe
Framework agnostic
Powers Framer Motion under the hood

Source and attribution

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

License: No license

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

Report or request removal

Popmotion

Popmotion 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

Key Popmotion 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