Webflow Animation and Interactions | Motion Design Tutorial

Webflow makes it super easy to create interactions and animations. In just a few minutes, you can create a 3D rotation effect, a page loading animation, or even a parallax effect that is triggered by page scroll. Hey, everyone, I'm Adi, and in this course I'm gonna show you how to create what you just saw and much more in Webflow. We're gonna start by learning the basics of workflow interactions, how to add them, how triggers work, and we'll also play around with the animation timeline. We'll also talk about interpolation, easing and smoothing. Then we'll dive straight into

practical application, and we'll cover several different types of interactions and animations, such as mouse-triggered effects, transitions, and page scroll animations. At the end, we'll learn about working with Lottie animations inside Webflow. Let's get to work, and first, learn the basics. This video is brought to you by Envato Elements, the largest, unlimited creative subscription in the world. Click the link in the description to find out more. In Webflow, interactions dictate how elements respond to user input or certain events. And to show you what I mean by that, I prepared a very simple demo here. You'll see

that as I'm scrolling up and down this page, these elements, these two rows of images, will move left to right, independently of course. So, what's the interaction here? It's the page scrolling, right? I'm interacting with the page, I'm scrolling up and down. And that action of scrolling dictates how these elements respond. And they respond by moving left to right or right to left. So, let's dive into workflow and see exactly how this animation is constructed. And I won't go into super detail in this lesson because this is just about the basics. So, in Webflow, to

get to the interactions, you need to open up the interactions panel so. So you would go to the sidebar on the right side and click on Interactions, or press H on your keyboard. And here we can use two types of triggers, element triggers and page triggers. Now, page triggers are actions that involve the page, for example, scrolling up and down, right? The action of scrolling is a page trigger. Element triggers are, for example, when I click on a certain element. So let's go into this page trigger. You can see that every trigger is displayed as

a list item right here and we can click on it. And we have the following, while the pages scrolling, right, on scroll, we can choose what action to take. In my case, I want to play a scroll animation. And right here I can search for certain animations, I can pick an animation that already exists, and then we have a couple of different trigger settings here. We can specify where do we want this to trigger, on which device basically, desktop, tablet, phone, because as you know, in Webflow, you can design your website with different breakpoints in

mind. In my case, I'm just gonna keep these on for all the demos. So, if we want to create a new animation that will play as we're scrolling up and down the page, I can click the plus sign, which we'll do in future lessons. But for now, let's take a look at this gallery animation which I have created for this lesson. So, let's click on that and see what we got. This right here is called the animation timeline. You can see 0% at the top, 100% at the bottom. These, where it says row, they are

called actions. So basically, if I click on this, it selects the corresponding element on the canvas, right? If I click this, it's gonna select the second element on the canvas. So these are basically references to elements that I already have in my canvas here. As you can see in the layers panel or in the navigator, I should say, we have two rows of elements. And one important thing to remember here is that, even though I'm executing an animation when I'm scrolling the page, I can animate whatever element I want inside that page. Same goes for

an element trigger, right? I can select this element and add an element trigger to it, let's say on click, but I don't have to animate this element. I can animate everything basically, on the canvas, any element. It doesn't have to be the one that triggered the animation. Okay, now, let's go back to our animation timeline. So, on 0%, which means when the animation starts, I added a move action to this row, and I moved it 320 pixels to the left. As you can see, I can move the slider to affect the position of this element.

Now, when the animation finishes, I moved the same element, notice, they are highlighted, I moved it to the right, 320 pixels. So the animation goes like this, I can live-preview it. So if I scroll up and down, you'll see that As the animation progresses, and here it's at 100%, which means I scrolled all the way down in the page. Now, this row sits on the right side, 320 pixels. If I start moving the scroll bar up and I go all the way up at 0%, that element is at minus 328 pixels. We can't see it,

but the animation still happens in the background, right? Let me turn on Live Preview again. So that's basically how it works. And for the second row, the bottom row, when the animation starts, I'm sending that to the right side this time. And when the animation ends, I'm sending it, or I'm moving it to the left side, and that's all there is to it, really. It's a very simple effect, very simple animation, but one that makes your simple page interactive, basically. Now, if I would like this animation, or these elements to move at a different time

in the animation, I can do that, no problem. I can take them from here and I can move them down. Let's say I want to start animating when the page is scrolled 30% of the way. So now if I enable Live Preview, you'll see that the animation is slightly different, right? Because these are in their original position, and only when I get to 30% of the way, they start animating. See? And if I wanna do the same for the bottom row, I can do that too. I can move it there. I can hold down Shift

and select multiple actions. And I can hold down Ctrl or Cmd to select individual actions just like this. Now, the stuff that you see here on the left side, 0%, 16%, 100%, these are called keyframes. And if you've ever done animations before, then you're familiar with this concept, and a keyframe is basically a point in the animation when something changes. But in my case, I'm running this animation starting from 0% to 100%. Or I should say, the actions are at 0% and 100%. Now, if you would like to add an action, let's say, maybe I

would like to affect the opacity of this row. I can select that element and I can click anywhere in here to create an action at that keyframe. So let's say at, I don't know, 50%, I want to start affecting the opacity, right? I want to bring the opacity to about, let's say 50%. And let's also create a corresponding opacity property right here at the start, right? So with the row selected, I'm gonna click on 0, set the opacity to 100%. So it has somewhere to start, right, it has an initial value. So now if I

enable live preview, you'll see that as I'm getting closer to 50%, the opacity of that first row is set to 50%, and is gonna stay that way. Right, but if I want to bring it back at some point, let's say at 72%, I wanna bring it back to 100%, now it's at 50% opacity and now when I get to 72%, it's gonna be at full opacity once again. And then if I want to delete these, I can hold on shift, click, and then delete. Let's also delete this bit, and if I'm done with the animation,

I can click on save. Now, one term that you'll probably come across when creating animations in general is interpolation. And let me just quickly explain that, interpolation is basically the creation of the intermediate frames in an animation. So, if you think about it, if I move my hand, right, from here to here, you saw a fluid motion, right? You didn't see the starting point and then the ending point. You saw everything in between you saw the whole motion, right? Well, those intermediate places where my hand just went, so that it gets from A to B,

those you can call them intermediate frames. And the process of generating these intermediate frames is called interpolation, okay? That's what technology does for us. So, that's happening automatically, we don't have to do anything ourselves. It's just the intermediate frames are generated automatically for us, which is great. Now, another term that you might come across is easing, and easing is basically the animation curve. Now, let me give you a quick comparison here. By default, an animation is linear, which means, it goes from point A to point B at the same pace, at the same speed, it

doesn't have any kind of acceleration. So, please take a look at the element right here at the bottom, the turquoise box. So if I hit Go, you'll see that it goes from point A to point B, it goes from left to right at the same speed. The purple one, on the other hand, has this animation curve where it accelerates a bit at the start, then it slows down, and then it accelerates again at the very end. So, you can clearly see what's happening here. And if I want, I can make this acceleration even more dramatic,

let's say towards the end, I want an even bigger acceleration. So right now, See, it accelerates a little bit at the start, it slows down to about here, and then it quickly accelerates towards the end. So hopefully that gave you a bit of insight into the animation curves and how easing can play a role in how an animation behaves. Now, if we go back to our example here, you'll notice that, in Webflow, we have access to several curves, several easing options. For the movement of these elements, I chose In-Out Quad, which is a slightly different

type of easing, but you can choose from any one of these. And you can even select multiple elements like I showed you previously, and change the easing on multiple elements at the same time, like so. Now, let's click Save here. And there's one last thing I wanna draw your attention to, and that is smoothing. It's this option that you see right here, and it's under the interactions, not inside the actual animation that we created. So, smoothing, you can think of it like a lag. It's like a lag, a delay that you apply so that the

animation doesn't react immediately to the trigger, but instead it has, as I said, a kind of delay between the trigger and when the animation starts. So if I click this, or if I drag this to zero, this will result in the animation instantly moving as I'm scrolling up and down the page, or the animation instantly playing. But you'll see that as I'm adding more and more smoothing, let's put this at 100% just to exaggerate it a bit. See how the animation kind of lags in a little bit. And if I scroll a little bit up,

it starts moving. And if I scroll down again, then it starts moving a little bit. So, it just makes the animation smoother, see. 100% is still a little bit too much, so probably leave it at about 80%. This is really up to you, it really depends on how you want the animation to behave. But just keep this in mind, that if an animation feels off for some reason, then usually applying some kind of smoothing will usually address that. Just give it that tiny bit of lag between the trigger and the start of the animation. So

those are the basics of Webflow interactions explained in just a few minutes, and don't worry, we'll get back to these and we'll create them from scratch in the upcoming lessons. And speaking of that, let's get to work, let's begin by creating some mouse-triggered, Interactions. Now there are three mouse triggers we can use in Webflow interactions. We have the click, we have hover, and we have move over. So the click, pretty self explanatory, right? It happens when you click on something. Hover is when you move your mouse cursor over a certain element or away from a

certain element. And the mouse move over is a little bit different in the sense that it keeps changing as you move your mouse cursor over a certain element. It will animate continuously, right? So, let's start by looking at a demo that involves the click trigger. For this first demo we have a site header that has a navigation and the first item in that navigation has a submenu. And I want to animate this so that when I click on the Services link, this submenu is shown or hidden depending on its state, so how do we do

that? Well, first of all, we need to figure out the trigger, right? What's the element that we wanna interact with? In my case, it's this link with some menu, okay? So I'm gonna select that, I'm gonna go to Interactions, and I'm gonna add an element trigger, click this, mouse click or tap. So now I have two options, I can choose what happens when we, click it once, and I can choose what happens when we click it the second time. So when we click it the first time, I wanna show the submenu. Okay, so let's select

an action. There are a few pre-made actions here for you, but we're gonna create our own, so start an animation. We're gonna create a new one. We're gonna call it Show Submenu. Okay, now, by default, because we designed it this way, this submenu is visible. So the very first thing we need to do is hide it. So, with the submenu selected, click the plus sign and I can choose Hide Show. And in here at the very bottom, I'm gonna set display to none. And this we're gonna set as the initial state, which means that's where

it starts. Now we need to show the submenu, right? So with the submenu still selected, click on another action. Again, we're gonna select Hide Show, but this time we're gonna set it to what it was initially. In my case, that's Flex. Okay, so now let's save. So if I preview this page, right away you can see the sub-menu is hidden and when I click on the services link, it shows up, very simple. Now to hide it, because if we click a second time, nothing happens. We can go to on the second click, start an animation.

We're gonna create one that's called Hide Submenu. So with the sub menu selected, click the plus sign, Hide Show, and set the hide, sorry, set the display to none, save that. Now if we preview, That's the most basic interaction we can do. But it's not much of an animated thing, right? I mean, just shows up and disappears. We can do much better than this. So let's start with the show submenu animation. Instead of using hide show, let's delete those. Let's do something a bit more interesting. Let's start by moving this element initially. A bit further

down, let's say -24 pixels, or sorry, a bit towards the top. And we'll set that as an initial state. Let's also change its opacity. So, click this, opacity, and we'll set that to 0. And we'll set it again as the initial state and also affect the height, okay? Initial state again and we'll change the height to zero pixels. So let's save. Now, these are the initial states. This is where it starts, but how do we want to show the submenu? So, with the sub menu selected, let's add another action. And we'll start with this, move.

And let's actually click and drag this outside so it's not inside the initial state group anymore. So we're gonna move it vertically to zero pixels, which is its initial position. Let's add a new one, let's change the height to auto, which is its default height. And also change what else, the opacity, right, so change that to 100%. So now let's test it. So click, And it shows up, but it's not exactly what we wanted. And that's because these three actions all happen at a 0.5 second interval. So what we can do is we can execute

all of these at the same time. So we can select one and just drag it over another one, and that's gonna group them. Let's do the same for this. So now, the move, the size, the opacity, they're both gonna be affected at the same time, okay? So save that. That's much better, right? Now, select all of these, let's change the duration of the animation, let's say, 0.2 seconds, let's also add an easing, let's say, in-out cubic. And we can also click this play icon to preview the animation live. So the animation basically goes from the

initial state of the element to what we set after that. Let's also increase this to let's say 0.3 seconds. So now it looks like this. Cool, and we can preview it. Nice, now click again. This just hides and we don't want that. So let's tweak the hide submenu. Now animation on the second click, so let's delete this. And instead what we're gonna do is the reverse basically of what we did previously. We gonna move it up 24 pixels. We're gonna change its height to zero, and we're gonna change its opacity to zero. And just like

we did previously let's group these. So they all happen at the same time. And let's change their duration. We had 0.3 seconds there and chose the same easing. So let's save that and let's preview. So that's show and that's hide. Show hide, perfect. One last thing to do here, how about we rotate this arrow so that it points up when the menu is open? So we go to the Show Submenu Animation, and let's select the image. Now let's add an action. We're gonna choose Rotate, and we're gonna rotate to 180 degrees. So now it's pointing

up, same duration, same easing. Now, notice the image is rotated after these three actions are completed, okay? So the sub menu shows and then the arrow gets rotated. If we want this to happen at the same time, we simply drag it in here and it happens at the same time. I don't know, personally, I think it looks good with a bit of delay. So let's keep that. So now our completed animation looks like this. And what are we missing? The arrow rotation on hide, right? So let's choose this, let's choose the image here, rotate, and

let's set this to 0. Duration, 0.3. Or the same easing, save that. Now, I won't go over the mouse hover trigger because that's pretty self-explanatory. But instead, I wanna show you a really cool use case for the mouse move over trigger. So that goes something like this. In this simple layout, we have a portfolio image, right, with some meta information on the left and the image itself on the right side. And I want to use the mouse move over trigger to kinda rotate this image in 3D as I'm moussing over it, basically. So let me

show you how to do that. So let's go ahead and select the 3D image here. And we'll go to Element trigger, we're gonna select Mouse move over element, and we're gonna choose Play mouse animation. We're gonna create a custom one, and we're gonna call it Card rotate 3d, okay. So what this basically means, we have two sections here, mouse X and mouse Y, and we have the two keyframes, 0 and 100%. Mouse X refers to the actions that should happen when the cursor moves along the x-axis, so horizontally. 0 is when it's to the left,

100% is when the cursor is to the right. Mouse Y actions are the ones that happen when the cursor is moved top to bottom. 0% is top, 100% is the bottom. So what I wanna do is select this 3D image. Let's start on the X actions. So I want to rotate this. I'm moving left to right, so I wanna rotate on the y-axis here, right? And don't worry, this looks a bit off, but we're gonna fix it in just a little bit. Let's add a very smooth rotation here of 8 degrees, and we're gonna select

what happens when the cursor is on the right side. We're gonna choose this value at plus 8. So now if we set up live preview, you will see that the card is actually rotating, but it doesn't really look like it's rotating, is it? That's because we haven't set a perspective. So to do that, we're gonna select the parent element, which in my case, it's cell 2, and I'm gonna go all the way down here where it says 2D & 3D transforms. And I'm gonna set the children perspective here to, let's say, a value of about

a thousand pixels, something like that, okay? So now if we preview, now it's starting to change. Now it's starting to look like it's in 3D. So it's a very simple interaction, right? I'm moving my cursor to the left, in which case the card is rotated by negative 8 degrees on the y-axis, mind you. And when the mouse cursor is at 100%, the card is rotated 8 degrees. So the opposite way. And I guess you can see that a bit more clearly if we go to the interactions here, right? And if we have live preview, notice

here on the X actions, how the card behaves and how the animation is happening. See, here I'm at the middle of the image, and the green cursor there is at 50%. So that takes care of the X actions, when I move the cursor from right to left or vice versa. But what about top and bottom? Let's do the same. Let's do rotate. When I'm at 0%, I want the card to rotate like this, 8 degrees towards the top, so to speak. And when I'm at 100%, I want this to be negative 8 degrees. So if

we do a live preview now, you'll see that the card kind of tilts to the bottom when I'm hovering here, and it tilts to the top when I'm hovering here. And of course, I can combine these effects to achieve that very nice hover effect. So let me actually show you in the full preview here. Now you'll see that as I'm moving my mouse left, right, up, and down, the card responds to my actions, which is super, super cool. One thing that we can do here, let's go ahead and save this, we can add a bit

of smoothing. So that little bit of delay between when the trigger occurs and when the animation starts playing, all right? So the animation is just a little bit smoother right now, which is always a good thing. And since we're here, I might as well just tell you about animation resting state. The resting state is when, in this case, I'm moving with my mouse cursor outside of it, okay? So right now, the resting state says that the X and Y are at 50%. Which means, if I'm running the animation and I take my mouse curser outside,

the image element stays rotated as if my mouse curser is at 50%, 50%, or right in the middle. And let me actually demonstrate that by bringing these down to 0%. Now the resting state looks like this, all right? So if I take my cursor outside, the card reverts back to this position, because it's acting as if my mouse cursor was at 0% X, which is the left side, 0% Y, which is the top side. So I hope that makes sense. But right now I'm gonna set these back to 50%, 50%, so The resting state looks

like the cursor is just sitting right there in the middle. And of course, if you want to create a much more dramatic effect, you can change the rotation numbers here. For example, if I set -16 pixels, that's gonna be a more aggressive rotation. And let's change this to 16. And let's change these. Okay, so now you'll see that we have a much more dramatic rotation when I hover with my mouse over this. But again, don't forget if you're going for one of these 3D rotations, make sure that you set the correct perspective on the parent

element. So in Webflow, you go to 2D and 3D transforms, and under Children perspective, you set the distance right here. All right, so with the mouse triggered effects out of the way, let's move on and learn about creating transitions in Webflow. Design adventures can be tricky, especially when you're on the hunt for device mockups, icon, and whatnot. So if you're looking for a place where you can find this stuff really easy, I recommend Envato Elements. Recently, I was working on a website design and this Feature section needed to show an image of the client's app.

And it's a Mac app, so I wanted to present it in a special meaningful way. So I found this Apple Pro Display mockup on Envato Elements. After importing it to Figma, I changed the image, then copied the whole thing in my project, adjusted the size and positioning, and I was done. Very simple, very fast. So check out Envato Elements for all sorts of digital assets. You need one subscription for unlimited downloads. For more info, check out the links in the video description. A transition is a basic animation that smoothly changes an element's property from one

value to another. And in this lesson, we'll explore a different method of creating transitions. And that's by using element states instead of the interactions panel. Let's take a look at this header element. We have a navigation here with four links and then a button on the right side. But currently in the live preview, we have no kind of feedback for these elements. So when I hover on them, I don't get anything. I don't get a state or a change in color, in background color, nothing. And that's usually something that you would need to add to

an interactive element just to signal that fact that it's an interactive element. So let's add some transitions for these elements. So we're gonna be working, first of all, with the hover state, okay? So let's go ahead and select one of these links. And I wanna go in here to the style selector, and we click on the dropdown, by default, None is selected. But I wanna affect how the hover state looks like. So when I choose Hover, I can go ahead and make some changes. For example, I can change the color opacity to white 100%. So

now you'll see that on preview, Yeah, the link color changes, but it happens so sudden. Let's add a transition. So let's go back to the non-state because transitions always get applied to the default state of the element and we're gonna scroll all the way down where it says Transitions. Click on the plus sign. What exactly are we transitioning? The font color, right? We can choose an easing here, 200 or, sorry, a duration, 200 milliseconds, and an easing. And I'm just gonna to go with the default here, right? So now we have the same color change,

but now it has a transition. It's not sudden, it's not abrupt, it changes the color smoothly. Now, let's apply the same principle for this button. I want this to change the text in the border color when I hover it, and I also want to make it a little bit smaller when I click on it, okay? So let's select the button. Let's select the hover state. And when it's hovered, I'm gonna simply change the text color, the border color. And when I'm pressing it, I wanna do a transform, right? So I'm gonna go to 2D &

3D transforms and I'm gonna add a scale, and I'm gonna make it, let's say, 0.8 or 0.9, just a little bit smaller, okay? So if we preview this, we get the nice color change, and when we click, The button gets smaller. But again, these changes happen abruptly. Let's add some transitions. So with the button selected, again, the default state, we'll go to Transitions. Let's add one for the font color, let's add another one for the border color, and let's add another one for the transform, because we applied that scale transform, right? So preview, so that's

a nice color transition right there. And we can probably increase the, or sorry, decrease the transition duration here to about 100 milliseconds. Just like that. And that's how you add transitions in Webflow by using the element states. Now, let's turn our attention to scroll animations. Scroll animations are triggered by a scrolling action, right? And these can be applied to both elements and pages. Now, let me show you a couple of examples of how you can use these Scrolling triggers. And we'll start with a demo that reveals elements as they scroll into view. So we have

a very simple layout here. It's basically a gallery of images, right? And I want these images to appear as I'm scrolling to them, okay? So here's how you do that in Webflow. Just select any image and go to Interactions, go to Element trigger, create a new one, and select Scroll into view. So basically, when the image scrolls into view, so when it comes from the bottom, and the top of the image reaches the bottom of the viewport, that's when the animation starts playing. So here we have a couple of options. We can create a custom

animation or we can choose from the predefined ones that Webflow gives us. So how about we do that instead for this demo. So let's go with slide and we'll slide in from the bottom. And it looks something like this. We can always hit Preview here. So now if we take a look, it's good, however, it kind of immediately shows up. We don't really have the time to see the animation because it's kind of right there. So how about we add an offset to about 40% something like this. And adding an offset means that the trigger

point is not gonna be right at the bottom of the viewport, it's Is gonna be 40% from the bottom, which is roughly about here. So when the top of the image reaches about this point in the viewport, that's when the animation will start taking place. So right about then, so that's cool. But this only applies to this first image, how do we get the other images to behave the same way? Well, we can certainly select each one of these and repeat the process, but nobody has time for that. So, select the first one, or the

one that you applied the trigger to, open up the interaction. And all the way down here on the Trigger settings, instead of applying the trigger only on the selected element, we can choose to apply the trigger on all elements with the same class, which in my case is gallery-img. So now if we open up Preview again and we scroll down, now that trigger is applied to all of the other images. And as they scroll into view, they will appear nicely. And what's nice about this is that I can at any point, add more images with

the same class and they will have the same animation. Super, super cool and super easy. So if you wanna add a simple effect like this, you don't always need to create your own animation. You can choose from the predefined ones here in this list. Now, so far, we focused on element triggers, which activate animations when interacting with a specific element. Webflow also offers page triggers, a very, very powerful feature that trigger animations when there's a change in the pages state. And a good example for that is page scroll. That's a trigger that occurs when we

scroll up and down the page, right, or left to right. So let me show you two very popular examples of how to use these page scroll triggers in Webflow. And the very first one we'll be looking at is parallax. And I'm sure a lot of you know what parallax is, you've seen this effect implemented in websites and web apps. But for those of you who don't know, parallax is basically when objects in the background or objects that are further away from you will appear to be moving slower than objects that are closer to you. Think

of the following example, you're driving, or you're in a car, and you're looking out the window, right? And you see mountains in the distance, and then closer to you, you see houses and trees and stuff. Well, the mountains will move very slowly, right, while the houses and trees will just fly by you, right? That's basically the parallax effect. So let me show you very easily how to create something like that in workflow. So I have a couple of elements here that are overlaid. I have some images and some shapes, and right now nothing really happens

because they're just static, right? I scroll up and down, and they're moving at exactly the same pace. And you can't really tell which are closer to you or further away from you, except for the fact that some of these are overlapped, as I said. But let's add some movement to this. So let's select the body element. We'll go to Interactions and where it says page Trigger. Let's add one that says while page is scrolling, okay? So on scroll, we're gonna play scroll animation. We're gonna create one, which we're gonna call Parallax animation. Okay, so let's

start with the objects that are closest to us. One of the, probably the closest to us, the biggest one is this image, right? So what I wanna do is, as I'm scrolling up and down the page, I want to move this, okay? So as I'm scrolling down, let's move this up, all right? So, oops, that's the wrong slider, it's this one. Let's move this up. So at 0% it's gonna be roughly about here. And then at 100% or when I'm scrolled all the way down, I wanna move it like further down the page, something like

this, okay? So let's save that and then let's preview it. So you'll see that as I'm scrolling up and down the page, we get a parallax effect. But it's a very simple one, but that's all it takes. The object that's closest to us moves faster than the elements that are further from us. And we can keep going, we can select some of the other elements. Let's say this one, this is a bit further away, it's a bit smaller, right? So it needs to move a little bit smaller. So let's open up that parallax again and

we're gonna select, yeah, this image. So when we're at the top, let's move it. This time, let's move it down a bit. And at 100%, it's move it up a bit. And we can toggle on live preview. So it moves, but at a different rate. And we can do the same for the others. Select that rectangle, move it a bit up here a bit further down there. And let's do the same for this image. Let's move this down, let's move it up. Maybe this one, let's move this down just by a small amount because it's

smaller so it should move less. So did we miss anything? We also have this one, this is the smallest, so I don't know. Let's move it just a tiny bit, like so and like so, okay? Save and let's check it out. So, as we scroll up and down, you'll see the elements kind of move at different rates, Giving us that parallax effect. Of course, you can go one step further, organize these a little bit better, maybe work on the shadows. So the elements that are farther away have smaller shadows, while these that are closer to

you have bigger, more blurred shadows. But for now, I just wanted to show you how to create this effect in Webflow. And of course, you can also play around with the smoothing a little bit. Yeah, add a little bit of that lag element. It's really up to you, just tweak these however you like, and that's how you create a parallax effect. Now, for our final demo for this lesson, we're gonna be looking at a scroll progress indicator. So what does that mean? Well, I have this very long page here, right? And I'm sure you've seen

these around in many, many websites where you have a bar that keeps growing as you scroll down the page, and when you reach the end of the page, the bar is full, right? And that's super easy to create your own Webflow, so let's go ahead and select the body. Let's add a div block, for example. Let's put it all the way at the top, even though it doesn't really matter. Let's set some dimensions here. Let's set the width to 100%, let's set the height, let's say to 1 rem, and let's set the position, this is

important. Set it to fixed, so it's always in the same position, right? It's relative to the body, and let's align it to the top left, okay? And let's do the same thing with the other side Align it to the top left, okay? And let's also give this a background color. Let's say kind of an orange, yellowish type of color, like so. Okay, and let's actually rename this to progress bar just so we know what we're dealing with. Okay, so now, if we take a look, we just have a yellow bar right there on the top.

One other thing that I forgot to do, let's use a high index. So the elements sits above everything else on the page, like so. Now, let's animate it. So that's really simple. Let's go to Body Interactions and Page trigger. We're gonna say again, While pages scrolling, we're gonna create a custom animation. Let's call this scroll progress. So we're gonna select the progress bar, and we're gonna set its initial state. And at 0, we're gonna set the scale on the x-axis to 0 and 100%, or when the page is fully scrolled, we're gonna change the scroll,

sorry, the scale factor to 1. So let's enable Live Preview. You'll see that as we're scrolling down a page, the scroll bar goes from 0 to 100% width, but there's one problem. It does that its skills from the middle. So that's actually something that we need to change back in the style panel. If we scroll all the way down to 2D and 3D transforms, and we click these three dots, we can set the origin to the left side instead of the center. So now, clicking Preview will give us a fully functional progress bar indicator. How

easy is that to create? Just with two actions, we were able to automate that work. And those are just a few examples of how to create scroll animations in Webflow. Now, before we wrap up this course, I wanna quickly show you how to work with Lottie animations in Webflow because that's a very hot topic at the moment. For those of you who don't know, Lottie is a JSON-based animation file format that allows you to add scalable and interactive animations in your websites or web apps. This format was created back in 2017 by a couple of

engineers working for Airbnb. And ever since then, it's been adopted by anyone who wants scalable interactive animations that are very small, yeah, in file size and work on a bunch of different platforms. So web, iOS, Android, you name it, all the big companies use this format. So It's no surprise that Webflow also supports Lottie animations. Let me show you how you can add these to your Webflow project, and of course, where you can get them. Now, usually, Lottie animations are created in Adobe After Effects and then export it as JSON by using a certain plugin

that's called bodymovin. There are other ways as well, but that's kind of outside the scope of this course. What I wanna show you is a place where you can get Lottie animations, which are designed by the community, and that's lottiefiles.com. You can think of this like the kind of official library for Lottie. And if you go to products, you have access to some free animations in here, but also some premium animations which are for sale, basically. But if you go to the Premium to the, sorry, to the free animations and you search for something like

loader, you can find a bunch of loading animations that you can simply download and add to your website. And you can click on a specific one, see it in action, play it, loop it, change some properties here, like the color palette and stuff. You can do a lot with these. So let's actually import one of these in Webflow and use it as a page loader. And I'm gonna grab exactly this one. So go ahead and download this. First of all, you need to create an account and create a workspace, that's all free. And then you

can save this animation to the workspace and then you can download it. So once you're inside your workspace, you basically have a couple of options here on the right side, you can download and export this animation. I can grab the JSON file, which is free, but it's also the largest file format. It's 113 kilobytes, so you can download an optimized JSON file, which is a bit smaller, but you need a premium account for that, which is a paid feature. Or you can grab an insanely small dot Lottie or optimized ot Lottie format, which is super

compressed. In this case, it's just 7 kilobytes, but again, you need a paid account. You can also download this as a GIF, MP4, MOV, or a WebM. In my case, for this demo, the JSON is more than enough. So I downloaded that. We're gonna go back to Webflow, and I basically want to add a page loader, because I have all of these images and I don't really want to display them until they're fully loaded, right? So let's go and Create inside this, or actually now inside the body. Let's add an element, a div block, we'll

do just fine, and we're gonna call this page loader container. And I'm gonna set this to be 100% wide, 100% viewport height, so it fills the entire view port. And then I'm also gonna set this position to fixed, and let's align it top left. And let's set a really big Z index so it sits above everything else. And let's set a color of white. So currently it looks like this. We're also gonna set display to flex and we're gonna align all the content in the center because this is where we'll be placing the Lottie animation.

So let's go to assets. I've already included that animation, that JSON file, you just drag and drop it from your computer. So I'm gonna take it from here and place it inside the page loader container. I can make the animation loop by checking this box and I can preview it here. This is a bit too big, so in the style panel, let's change its width to about, I don't know, 32%, something like that. So now, if we preview it, we have that animation, that loading animation that fills up my entire viewport. But I want this

to stop at some point, right, and I only want to display it when the page starts loading. But the way it's currently set up, I can't really work on anything else on the page because this loader sits on the very top. So what we can do is we can set the display to none. Okay, we're basically hiding it so that I can work on the other elements on my page. And what I can do is I can display it when the page loads. For that we'll go to body, interactions, page trigger, and I'm gonna select

page load. And when the page starts loading, let's create an animation. We're gonna call it show page loader. And for the actions, I wanna take that loader container and I wanna set its display to flex. So we'll save that. So now, yeah, when the page starts loading, the loader shows up. So this happens when the page starts loading, and it's gonna keep doing that until we tell it otherwise. And here you have two options basically. You can either create a new animation that executes when the page finishes loading, or you can hide it yourself after

a certain time. So how you do that? Well, you select it, you create a new action, hide show, set the display to none. And you set a delay here, let's say of, I don't know, 5 seconds. Okay, and you save. So when the page starts, it's gonna run this for 5 seconds And then it's gonna hide it. And you can play around with the opacity a little bit, right? So maybe you don't necessarily want to just hide it completely all of a sudden, right? Maybe you want to affect the opacity a little bit. So let's

add the opacity value to a 100% here as sort of the initial state and then set the opacity to 0 here. So let's reduce the opacity over 0.3 seconds. And then a second later, we'll just hide and show it. So we still have that opacity effect, that fade out effect. And then that's completely hidden and we can interact with our page like we would normally do. There are lots of ways you can do this. Normally, I would add a second action here, so when the page finishes loading, that's when we hide the loader. But most

of the time with a good connection, the page loads like kind of instantly and you barely see that animation. That's why for this demo, I decided to kind of fake out that loading time by adding a delay here, just so we can see how to work with Lottie animations, right? And with that done, let's actually move to our final example. As I said previously, Lottie animations are also interactive, which means you can interact with them, right? So for this last demo, let's add a Lottie animation here in this blank section. And let's animate that as

we're scrolling up and down the page. That's a super, super cool effect. So I went to LottieFiles, and I got this gradient animation right here. So I downloaded that, I added it to Webflow. So to see that in action, let me actually remove this page loading animation just so it doesn't interfere with what we're doing and we'll do the following. We'll go to Animate while scrolling, which is this section here, and we'll drag the gradient animation in. And then I'm gonna select the section, I'm gonna go to element trigger, I'm gonna go to page trigger

while pages scrolling. Okay, so on scroll, we're gonna play a custom animation. Let's create one, that says animate Lottie. Now under scroll actions with the Lottie element selected, we're gonna click on the plus sign, and under integrations we have a Lottie here. And this is super simple, at 0%, so when we're just starting to scroll, I want the animation progress to be at 0. And at 100%, I want the animation progress to be 100%. That's it, and that's how it works. So as you're scrolling up and down the page the animation plays, if you stop

scrolling, the animation pauses. Once you resume, the animation resumes. How cool is that? And again, you can play around with smoothing and other options here. But that's a very simple way of animating or actually controlling a lot of the animation in Webflow by using one of these ScrollTriggers. And that's just a quick look at using the Lottie animations in Webflow. Now, throughout this course, I gave you some pretty basic examples because I wanted you to understand how to create interactions and animations in Webflow. But there is so much more that you can do with this

and I invite you to explore that on your own and in your own projects. And speaking of I'm curious how would you use interactions and animations in Webflow for your own projects. Drop a comment down below. As always, don't forget to check out the Envato Tuts+ Youtube channel for more content like this, but also to learn about web design and web development and more. It's all free, so make sure to hit that subscribe button and give this video a thumbs up. [MUSIC]