Conditional playback for responsive interactions

Design and layout can change between screen sizes, and animations that look great on desktop might not translate well to smaller screens. One of the most useful features of webflow interactions is the ability to control how animations behave on different screen sizes. So on desktop on this site, we've got this fun card stagger animation. So the section pins and these items all stagger in from the bottom. So this is really fun on a large breakpoint. But if we go down to mobile and we look at this same animation, the section pins and the cards all kind of come in on top of each other in a very weird way. So this isn't really ideal. We can disable this animation on smaller screen sizes by using conditional playback. So if we look at our settings over here, we've got this conditional playback setting and we can add a condition. We're going to add Breakpoint Point. And in this dropdown, we can choose which screen sizes we want to disable the animation on. So we're going to disable this on mobile breakpoints. And now if we go into our preview and we scroll down, we've got the animation playing on desktop. Wonderful. And if we go into our mobile size and we scroll down, we've got no animation. So that's perfect. Now we've just got the cards showing up on the screen. We can scroll through them, we can see everything. But what if we wanted to add an animation on mobile, but just a simpler one that's styled for that design? So we can do that by setting up a new interaction. So we're going to exit out of this stagger animation, and then we're going to go to our interactions panel and we're going to create a new scroll animation. We'll call this Mobile Cards. What we want to do is we want to just gently fade in the cards as they come into view at the bottom of the screen. So we're going to select our card element and we'll go to our trigger, and we want to set our trigger target to the card class. So we're going to choose card. And then we want to say animate in when the card comes into view at the bottom of the screen. At the moment, it's saying animate in when the top of the element hits the bottom of the viewport. That might be a little bit soon. So we're going to set this up to 90% of the way down the bottom of the viewport so that there's a little bit more space before the card fades in. And then we don't want to Scrub this animation on scroll. That ties it to the scroll progress. We just want it. The element comes into view. So we're going to say play when the element enters in our trigger action settings. And then we're going to add an action. We can set a preset here. So we're going to say fade in. And actually these aren't set up exactly how we would want them. So this is perfect if you wanted to fade in elements that were already at opacity zero, but our elements are actually at opacity 100 and we want to fade them in for from opacity zero. So we're going to enable the from column and we're going to say opacity zero. This is going to set their initial state. And then we don't need the to side of this because our cards are already at 100%. So that's our animation setup. And now if we scroll our cards into view. There we go. They each fade in as they come into view at the bottom of the screen. Perfect. But now we need to set up this animation to not play on large screens, just the same as we did with our previous animation. So we'll go back into our trigger settings and then we'll click on conditional playback again and we'll add breakpoint. And then this time we're saying don't play on desktop and don't play on tablet. And now if we go into our preview and we look at our animation, we've got our simple card fade on mobile. And then if we go into desktop and we scroll down, we've got our fun card stagger. So it's generally a good idea to disable or simplify down your animations for mobile. Mobile devices and browsers can be a little less capable, and they can struggle with really complex animation. Also, users on mobile tend to be more task focused on the move, maybe on bad connections, and usually just trying to find information. So save the really jazzy animations for desktop and keep it more functional for mobile. And that's how to use conditional playback to set up animations for different breakpoints using Webflow interactions.