name: motion-one description: Use when implementing Disney's 12 animation principles with Motion One (modern, lightweight animation library)

Motion One Animation Principles

Implement all 12 Disney animation principles using Motion One's performant Web Animations API wrapper.

1. Squash and Stretch

import { animate } from "motion";

animate(".ball",
  { scaleX: [1, 1.2, 1], scaleY: [1, 0.8, 1] },
  { duration: 0.3, easing: "ease-in-out" }
);

2. Anticipation

import { timeline } from "motion";

timeline([
  [".character", { y: 10, scaleY: 0.9 }, { duration: 0.2 }],
  [".character", { y: -200 }, { duration: 0.4, easing: "ease-out" }]
]);

3. Staging

animate(".background", { filter: "blur(3px)", opacity: 0.6 });
animate(".hero", { scale: 1.1 });

4. Straight Ahead / Pose to Pose

animate(".element", {
  x: [0, 100, 200, 300],
  y: [0, -50, 0, -30]
}, { duration: 1 });

5. Follow Through and Overlapping Action

timeline([
  [".body", { x: 200 }, { duration: 0.5 }],
  [".hair", { x: 200 }, { duration: 0.5, at: "-0.45" }],
  [".cape", { x: 200 }, { duration: 0.6, at: "-0.5" }]
]);

6. Slow In and Slow Out

animate(".element", { x: 300 }, {
  duration: 0.6,
  easing: [0.42, 0, 0.58, 1] // cubic-bezier ease-in-out
});
// Or: "ease-in", "ease-out", "ease-in-out"
// Or spring: { easing: spring({ stiffness: 100, damping: 15 }) }

7. Arc

animate(".ball", {
  x: [0, 100, 200],
  y: [0, -100, 0]
}, { duration: 1, easing: "ease-in-out" });

// Or with offset path
animate(".element", {
  offsetDistance: ["0%", "100%"]
}, { duration: 1 });
// CSS: offset-path: path('M0,100 Q100,0 200,100');

8. Secondary Action

const button = document.querySelector(".button");
button.addEventListener("mouseenter", () => {
  animate(button, { scale: 1.05 }, { duration: 0.2 });
  animate(".icon", { rotate: 15 }, { duration: 0.15 });
});

9. Timing

import { spring } from "motion";

// Fast snap
animate(".fast", { x: 100 }, { duration: 0.15 });

// Spring physics
animate(".spring", { x: 100 }, {
  easing: spring({ stiffness: 300, damping: 20 })
});

// Slow dramatic
animate(".slow", { x: 100 }, { duration: 0.8, easing: "ease-out" });

10. Exaggeration

import { spring } from "motion";

animate(".element", { scale: 1.5, rotate: 720 }, {
  easing: spring({ stiffness: 200, damping: 10 }) // overshoot
});

11. Solid Drawing

animate(".box", {
  rotateX: 45,
  rotateY: 30
}, { duration: 0.5 });
// Set perspective in CSS: perspective: 1000px;

12. Appeal

animate(".card", {
  scale: 1.02,
  boxShadow: "0 20px 40px rgba(0,0,0,0.2)"
}, { duration: 0.3, easing: "ease-out" });

Stagger Animation

import { stagger } from "motion";

animate(".item",
  { opacity: [0, 1], y: [20, 0] },
  { delay: stagger(0.1) }
);

Scroll Animations

import { scroll, animate } from "motion";

scroll(
  animate(".parallax", { y: [0, 100] }),
  { target: document.querySelector(".container") }
);

In-View Animations

import { inView } from "motion";

inView(".section", ({ target }) => {
  animate(target, { opacity: 1, y: 0 }, { duration: 0.5 });
});

Key Motion One Features

animate() - Single animation
timeline() - Sequence with at positioning
stagger() - Offset delays
spring() - Physics-based easing
scroll() - Scroll-linked animations
inView() - Intersection observer wrapper
Uses Web Animations API (hardware accelerated)
Tiny bundle size (~3kb)

motion-one

Installation

Details

Usage

Skill Instructions

name: motion-one description: Use when implementing Disney's 12 animation principles with Motion One (modern, lightweight animation library)

Motion One 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

Scroll Animations

In-View Animations

Key Motion One Features

More by dylantarre