Lesson 5/5

Animating child components

As explained in the previous two lessons: Variants you add on a parent motion component, are inherited on its children.

It is exactly this that is very helpful when animating multiple children. By default if you change the variant, they will change all at the same time on the children. Framer Motion also provides a way to change the variant of each child with a small delay.

Enter staggerChildren

staggerChildren is a special property you can add to the transition prop, whenever you are animating with variants.

Unlock the full lesson with PRO

Want to read the full lesson? Join Frontend.FYI PRO.

PRO is a one time purchase of €149 that gives you lifetime access to this course, any courses released in the future, and so much more!