Is there anyone out there who doesn’t make their websites responsive nowadays? I don’t think so right?

In this module I want to show you the best approach in Framer Motion to making your animations responsive. I’ll show you there’s multiple routes to take, but a few that will make your life a lot harder if you choose them.

No need for media queries at all

Before we even dive into the Framer Motion specifics, I couldn’t resist to add one more lesson before that. That lesson will be a CSS lesson. I’m gonna show you that you might not even need media queries at all.

The web is a responsive medium by default. Leveraging smart CSS techniques can make your website responsive without the need for media queries.

What we’re working towards

At the end of this module we will be creating this notification component, which has a different animation on mobile and on desktop.

Toggle the demo below by clicking on the bell icon. In this demo it will automatically toggle between desktop and mobile, but in the exercise we’ll of course make this switch based on the actual screen size.

Let’s start squashing some divs.