Page loader animation

Create a sequenced animation that animates multiple elements once a page loads.

This video features an old UI. Updated version coming soon!

With a fast enough connection, page load animations should look like this. That according to Grimur, was a single frame. The animation was made in After Effects, we exported it using the Bodymovin plug-in. Now we’re going to add it to our project so it shows up on the screen and disappears once the page has finished loading. Let’s cover this now, and we'll do it in three parts. We’ll add the Lottie animation to our project, we’ll set up a trigger for when the page finishes loading, and finally we’ll make it disappear.

Okay, adding the animation. We’ve added this JSON file, this Lottie animation asset to the assets panel. We can drag it in anywhere, let’s put ours right at the top of the page. We can also choose loop, which will play the animation over and over. Let’s close out of the settings, and for now we’ll control its position, its position on the screen, by making it fixed. That means it's fixed to the browsers viewport. If we scroll up and down, the animation doesn’t care. And let’s size it to 100 percent width, this is 100 percent of the viewport, and 100 percent height as well. Just in case, let’s also set the z-index, the stacking order, to an obscenely high number. This way it stacks on top of other content and parts of the page won’t start appearing on top of the animation. We can also go in and add a background color. When a Lottie asset like this has a transparent background, we can change the background color right here in the Style panel. If we preview it right now, it works.

Now, how long will this go on for? Well, we tested it, and our theory is, it’ll go on forever. So, this is part two. How can we set up a trigger to hide the animation when the page finishes loading? Let’s head over to Add an Interaction. This is going to be a page trigger, on page load, when it finishes loading, we want our animation to go away. When the page finishes loading, we want to start an animation. What kind of animation? The one we’re creating right now. On any of these kinds of interactions, once we create a new animation we can name it to keep things organized. So, once the page finishes loading, we want this thing to hide. We’ll make sure the page load animation is selected, and we’ll simply set it to hide. We’re going to set it’s display, its display setting, to none. If we preview now, it’s maybe a bit too fast. Now if we were on a slower connection it might look something like this, but, just in case, let’s add opacity to this. We want it to fade down to 0 percent. This means we can fade out the animation over a particular duration, let’s say 1.5 seconds. Even though the animation is set to 0 percent opacity, it’s still there. So right after it becomes 0 percent opacity, we want to set it’s display setting to none. Display none doesn’t just mean its invisible, it won't even take up space on the page, completely gone. That’s what we want after the page finishes loading.

There’s no right or wrong way to do this. Some might feel 1.5 seconds is too long. Do we need a fade out? Not necessarily. But we can tweak our values and adjust the animation to get it just right for the page we’re designing. Now, one thing to note, it might be frustrating to edit your content, to edit the rest of the page, if this animation is floating on top. One thing we could do is set the elements display to none by default. But, if we preview that it's completely blank. The animation never shows up. So, if that’s what we’re going to do, let's go back into that interaction, back into our page load controls, and add one more thing. At the beginning, let’s set the display to block. This is the default display setting the element came with, and let’s set that as the initial state. This means if we’re back in the Style panel, we can still edit our page content, remember a moment ago we set its display to none, but when the page loads, the interaction kicks in and shows its initial state. This way we can still edit everything on the page without it being in the way.

But, that’s it. We added our Lottie asset, we set up a page load trigger when the page finishes loading, and the elements display setting switches to none so it hides after the page load.

As part of our series on After Effects and Lottie in Webflow, we created a page load animation in After Effects using the Bodymovin plug-in. In this tutorial, we’ll add it to our project so it appears on the screen and disappears once the page has finished loading.

In this lesson:

Add the Lottie animation to our project

You’ll need to export your Lottie animation from After Effects and upload it to your Webflow project. We exported the animation using Bodymovin. Learn how to do this in steps 3 and 4 of our full walkthrough tutorial.

To find and add the animation, click the photo icon in the Assets panel from the left toolbar and drag the animation to the top of the page.

To loop the animation, check Loop in the Lottie Animation Settings popup.

Close out of the settings and in the Style panel on the right, choose Fixed from dropdown menu next to Position. The will control the animation’s position on the screen.

Under Size, give it a width and height of 100%.

Under Position, set the z-index (the stacking order) to a high number (e.g., 9999). This makes sure the animation always stacks on top.

‍

If your animation has a transparent background, you can also add a background color.

Great! Now let’s set up the trigger to hide the animation when the page finishes loading.

Set up the trigger

In the Interactions panel, click the plus sign next to Page trigger and choose Page load from the dropdown menu.

Under When page finishes loading, choose Start an Animation from the Action menu.

To keep things organized, click the plus sign next to Timed Animations and name your animation (e.g., Page loader).

Stay in the Interactions panel for the next step where we make sure the animation hides once the page is loaded.

Configure the animation to disappear

From the Interactions panel click the plus sign next to Timed Actions and choose Hide/Show from the dropdown menu.

Under Hide/Show, set the Display setting to none.

Under Timed Actions, click 0.00 second in the timeline and choose Opacity from the dropdown menu.

Scroll Opacity to 0 and Duration to 1.5 seconds to fade out the animation.

Under time Actions, click the Lottie Animation at 1.5 seconds in the timeline and under Hide/Show, set its Display setting to none.

Check your work in preview mode — tweak your values and adjust the animation to get it just right for the page you’re designing.

‍

Try Webflow — it's free

Thanks for the feedback! This will help us improve our content.

Reach out to our community

Contact the support team

Something went wrong while submitting the form. Please contact support@webflow.com

Discover our courses related to this lesson and learn more!

Page loader animation

Add the Lottie animation to our project

Set up the trigger

Configure the animation to disappear

Thanks for the feedback! This will help us improve our content.

Discover our courses related to this lesson and learn more!

Freelance web design boot camp

Webflow 101 crash course

CMS & dynamic content

CSS styling

Didn’t find what you’re looking for?

Discuss your build, design on Webflow Forum

Visit the Webflow Wishlist

Contact support

Product

Company

Learn & Get help

Social