Free
lesson
Frontend.FYI PRO gives you instant access to all lessons of this and future courses! €149 one time, no subscription.
Stepping up our game
In this module we will be taking a first step towards more advanced animation concepts. Many of these will help you to create more complex animations with less code.
Exit animations
Firstly we will be taking a look at exit animations. Animating elements that get removed from the DOM aren’t that easy to do. But with Framer Motion it’s a breeze!
Animation variants
Next we will be taking a look at animation variants. Variants are a way to define animations once and reuse them in multiple places.
Another powerful feature variants bring is inheritance. Children can inherit the current animation state of their parents, influencing their own.
Sounds a bit vague right? But if you haven’t heard of them before, it will probably be a game-changer in the way you write your animations! It helps us to control many animations happening in a single component, based on a single state. Like you can see in the quote carousel below.
"Saying 'just center it horizontally' is the fastest way to make a frontend developer cry."
Chris Borders - UI/UX Designer at NetscapeGoat
"JavaScript is like a toddler. Sometimes brilliant, sometimes throwing errors for no reason."
Elon Musketeer - Chief Meme Officer at SpaceFlexbox
"I told my browser to embrace its errors. Now it's a motivational speaker."
Krisina Boxmodel - Lead spacing engineer at Margin Collapse Inc.
"Why did the CSS go to therapy? Because it couldn't deal with its parent issues!"
Sarah Overflow - Senior Flexbox Therapist at CSS Grid Clinic
Staggered animations
Finally, as the icing on the cake, we will be looking at staggered animations. A powerful feature driven by variants.
Staggered animations are a way to animate children of a parent element with a delay between each child. This can be used to create a wide variety of animations, from simple lists to complex grid animations.