Frontend.FYI

April 3th

Get back to learn more about Framer Motion — I just released to new modules!

Hey there!

You guys blasted through the first modules of the course, I love it! Time to get back to learning again though — the next two modules of the Framer Motion course dropped just now! You can watch them right now!

Go to the course

Module 4: Stepping up our game

The next step in our animations. We'll be taking a look at some APIs Framer Motion offers, which enables us to make fairly complex animations with little effort!

View the FREE intro lesson to this module

Exit animations

Exit animations aren't so easy in plain CSS, but Framer Motion got us covered there. We will be building this card toggle animation together, to discover how easy it is to add this with Framer Motion!

Animation variants

Animation variants help us to structure our animations in a better way, while at the same time preventing repetition.

Next to that variants also are 'inherited' by any child motion elements. We can utilise this to make the carousel below. By using these variants, we're able to only change a single motion element, and trigger the correct animation in all children. It's truly next level! Together we will find out how this works.

Staggered animations

Staggered animations are animations where multiple animations (in this case children) run with a small delay, one after another. By using variants, we can also stagger our children with almost no effort. We'll be recreating a navigation menu together, were all items appear on by one.

Module 5: Responsive animations

Sometimes you want to have different animations on mobile and desktop. With Framer Motion there are multiple ways to achieve this, but many have their own pitfalls.

Together we'll explore what is the only right way to make your animations responsive, by creating this notifications component. This component will animate all notifications in from right to left on desktop, while animating them from bottom to top on mobile. Do you notice the staggered animations too?!

View the FREE intro lesson to this module

Hope you enjoy the new lessons! Let me know if you have any feedback or questions!

Jeroen.
​

Hi, I'm Jeroen After over a decade of writing frontend code and teaching my colleagues, I decided it was time to teach a wider audience the craft in frontend engineering. Which is when I started Frontend.FYI.