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

Framer 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, Framer 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, Framer Motion did all the heavy lifting for us.

Behind the scenes of Layout Projections

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