tynoecreatesHire Me
← All Articles
MotionOct 20247 min read

The Physics of Good UI Animation

How spring dynamics, mass, and damping can replace every easing curve you’ve ever used.

Bezier curves are a lie.

Bezier easing curves borrow the visual grammar of physical motion without its underlying logic. When a real object moves, it responds to forces: inertia, friction, elasticity. Bezier curves approximate the result without capturing the cause.

Enter spring physics.

Spring-based systems replace curves with physics parameters: mass, stiffness, and damping. Spring physics are interruptible — when interrupted mid-flight, they respond naturally rather than snapping to a new state. This is what makes interfaces feel alive.

Tuning your springs.

High stiffness means fast, snappy motion — good for micro-interactions. Low stiffness means slow, loping motion — better for layout transitions. Damping controls overshoot. Mass affects the overall feel of weight.

When not to use springs.

For purely choreographed animation — a loading sequence, a cinematic transition — Bezier curves remain the right tool. The question: does this animation respond to input, or does it play out on its own?

The meta-lesson.

Both tools are just ways of asking: what does this element weigh, and how does it want to move? When you can answer that intuitively, the technical implementation becomes secondary.

tynoecreates
Senior Designer specializing in Motion Graphics and 3D. Writing about design process, visual thinking, and the philosophy of making.

More Writing

01
Motion

The Grammar of Motion: How Timing Defines Meaning

Feb 2025
8 min read
02
3D

Why Most 3D Design Fails (And How to Fix It)

Jan 2025
6 min read
03
Design

Designing for Stillness: Negative Space in Digital Interfaces

Nov 2024
5 min read
View All Articles