An interactive guide to Disney's 12 Principles of Animation.
Desktop view, dark mode
Context
Disney animators Frank Thomas and Ollie Johnston published The Illusion of Life in 1981. Inside it, twelve principles that explain why some animation feels alive and some doesn't. They're widely referenced but rarely demonstrated in a way you can actually feel.
Most resources explain the principles with diagrams or static examples. I wanted to build something where the principles were the interface. Where you could adjust a slider and immediately understand why timing changes the weight of a movement, or why removing arcs makes something read as mechanical.
Overshoot.dev is that. Twelve interactive animations, one per principle, built to be played with.
Mobile view, dark mode
Role
- Concept and creative direction
- Animation design and specification
- UI and interaction design
- Full-stack development (SvelteKit, TypeScript, GSAP, Tailwind)
Secondary Action card, light mode
Solution
- Twelve individual SVG animations, each designed to demonstrate one principle in isolation.
- A card grid on desktop and a Swiper carousel on mobile, each expanding into a full detail view per principle.
- The aesthetic sits between two polar references. Disney's warmth meets Material Design's precision. Sans serif typefaces with a retro character. Off-white and off-black for a vintage feel. Coral and teal pulled from two-strip Technicolor processing. Old craft, modern precision.
- Used GSAP throughout for both the UI transitions and all principle animations, keeping the motion system consistent and the site itself animated.
- Shipped as a SvelteKit SPA at overshoot.dev in a single weekend.
Straight Ahead and Pose card, light mode
Impact
Overshoot is a portfolio piece but also a genuinely useful resource. It lives at overshoot.dev and is publicly accessible.
It demonstrates something that's harder to show in a showreel: that the same instinct behind the motion work drives the development work.
The animations required deep knowledge of each principle to spec correctly.
The development required building a system flexible enough to make each one interactive.
Neither half works without the other.
