Overshoot

The twelve principles of animation have been part of how animators think about movement for decades. But reading about squash and stretch, anticipation or arcs isn't quite the same as feeling what changes when you adjust them.

I wanted to make a guide you could actually play with. Instead of placing an animation next to an explanation, the animation would be the explanation.

Overshoot↗ (opens in a new tab) is a collection of twelve interactive studies, one for each principle, where movement and controls do most of the teaching.

Each study needed to make its principle immediately understandable. That meant designing different animations rather than dressing up one repeated example.

Squash and stretch needs to preserve the sense of volume. Anticipation depends on the relationship between preparation and action. Take the arc out of a movement and its character can change completely.

I designed the illustrations as SVGs and used GSAP to animate both the examples and the interface, keeping the interaction responsive and the motion language consistent. The site was built in SvelteKit over a weekend.

The visual direction borrows some warmth from traditional animation and pairs it with a more precise, modern interface. The challenge was to make twelve distinct demonstrations feel like they belonged together, without making them feel identical.

Overshoot is as much an exercise in explaining motion as it is in making it. The important work wasn't listing twelve established principles; it was isolating what each one does and giving someone a way to discover that for themselves.

Try the interactive studies at overshoot.dev↗ (opens in a new tab).