How to add a page loading animation — After Effects & Lottie in Webflow

By | February 21, 2020

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.

11 thoughts on “How to add a page loading animation — After Effects & Lottie in Webflow

  1. svnbit Post author

    @webflow Confused, when and for what reason would you use "while page is loading" in the page triggers? Never really seeing it used in any videos, just after page load.
    Any way to set a minimum animation time to display the loading animation so it's not a quick flash on a fast connection? (Assuming it's probably custom code of sort) thanks

  2. Anton King Post author

    Seriously? Is this aimed at people who have dial up internet? 🙄

  3. mark wilson Post author

    Jesse’s right. The voiceover/demo guy is sooooo good at indicating, “I’m saying the obvious for the moron” without calling me a moron directly. Perfect!

  4. Mike Lawson Post author

    This is great. I wanted to add it to a CMS collection which have different preloaded images for each service. Is this possible too?

  5. Riley Dyck Post author

    What would I do if my animation doesn't work? I've exported it from After Effects using bodymovin and it appears on the screen but the animation doesn't play?


Leave a Reply

Your email address will not be published. Required fields are marked *