An interactive guide to Disney's 12 Principles of Animation.
Vidsy MusicMatch UI
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.
Overshoot macOS app icon
Role
- Concept and creative direction
- Animation design and specification
- UI and interaction design
- Full-stack development (SvelteKit, TypeScript, GSAP, Tailwind)
Stress testing the tool with 7999 tracks
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.
Overshoot uses ShazamKit under the hood
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.