This Ain’t Disney: A practical guide to CSS transitions and animations
Oh, animation… we want to get it right so badly, don’t we? I mean, does anybody really enjoy a stiff, snappy UI? Can anyone admit they’re not delighted when a component slides into view and appears to slow down before coming to a complete stop? There’s something nice about that. So what is that special touch, and why is it so hard to reproduce?
The answer is physics. Specifically Newtonian physics, the branch of science dedicated to apples falling from trees onto scientists, also referred to as classical mechanics.
The moment before an apple begins to fall from a tree, it’s moving at zero meters per second. Depending on atmospheric pressure, wind, and other elements, it accelerates from zero toward its terminal velocity at a specific rate, until it makes impact. Then, depending on the elasticity of the apple and the contact surface, the apple will bounce a number of times, with the bounce height decreasing by about half after each bounce.
Examining the two charts above, one may notice a symmetry in the curves of an object in freefall and one bouncing on the ground. This symmetry is a result of gravity.