Beyond animating obvious properties like width, Motion’s Layout Animations can animate properties that aren’t easily animatable with CSS alone.

Motion achieves this using a concept called Layout Projections.

In simple terms, it calculates a CSS transform to transition between the start and end states of your layout changes. Even if you don’t use transforms directly, Motion handles this behind the scenes.

In the previous lesson, we used absolute positioning to animate and resize our form button. Once layout animations were enabled, Motion did all the heavy lifting for us.

Behind the scenes of Layout Projections

The steps Motion took to make this happen are as follows: