When creating responsive animations, there’s multiple routes you could choose. If you however plan to (also) make looping animations, there is only one.

Because of the weird challenges that looping animations bring in Framer Motion, I decided to only include the solution that works in every case in this lesson. Learning this as your goto solution, will make sure you won’t waste hours of your time debugging vague issues.

In the next lesson we will still dive into two alternatives, and why I think they’re less suitable.

CSS Variables

CSS Variables are a very powerful recent-ish addition to CSS. They allow you to define a variable in CSS, and then use that as a value for a style property. You can even set this variable as an inline style on an element, and use it on the same element in the CSS property.

This is super powerful if we want to make responsive animations. Mainly because by using CSS variables, we don’t need to know the current breakpoint in JavaScript. We simply set 2 variables (for each breakpoint in CSS), and show the correct variable based on the current breakpoint in CSS.

Probably sounds a bit confusing, right? Let me show you an example.

Let’s say we have this animation, where a drawer animates in view from left to right on desktop, and from bottom on mobile.