Which one is the odd one out?

Boxes 1, 3 and 4 all used different timing functions (ease-in, ease-out, linear). However, they were all timed animations set to run for 500ms.

Box 2 is different. The animation wasn’t set to run for a certain time. Instead the law of physics, in particular a spring, was used to create the animation. You can tell a spring was used because towards the end of the animation, it takes a while for the box to settle into its final position. The difference becomes even more apparent if we interrupt the animation. Box 1, 3 and 4 animation will look a bit jarring if we interrupt it. Box 2 on the other hand handles the change gracefully and naturally springs into its new position (play around with these values on codepen)

Stiffness and damping to change animation

In a spring animation, there are two variables you can control: stiffness and damping. Changing these two variables will result in a different feel to the animation.

Stiffness defines how strong the object is pulled towards its final value.

Damping is the friction the object will encounter as it gets pulled towards its target.

Changing these two values will result in a completely different feel to an animation.

The below examples can be tweaked in this code pen