Page loader animation

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

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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:

  1. Add the Lottie animation to our project
  2. Set up the trigger
  3. Configure the animation to disappear

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. 

The .json asset is highlighted on the assets panel. There are five other assets in the panel.

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

The lottie animation settings panel displays a replace lottie sequence button, a preview window, a preview animation button, a check box for use built-in duration, loop and play in reverse. It also displays an input field for the use built-in duration. Below are two options for Render, SVG and canvas. At the bottom there is a show all settings button.

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%. 

The size section in the style panel displays a width of 100% and a height of 100%. These are highlighted on the panel.

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. 

The z-Index input field with 9999 entered is highlighted in the position section of the style panel.


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

Step one on the left select the color button to open up the color picker, step 2 on the right, select the background color of your choice.

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. 

Step one on the left, click on the plus sign on the Page trigger section. Step two on the right, click on the Page load option on the dropdown menu.

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

The When page finishes loading has a dropdown menu open for the action selection. There are 2 options, custom animation and start an animation which is highlighted.

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.

Step one on the left, select the plus sign on the Timed animations section. Step 2 in the middle, select the plus sign on the actions bar. Step 3 on the right, select the Hide/Show option from the Miscellaneous section in the actions dropdown menu.

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

The Hide/show displays the 6 display options. The none option is highlighted.


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

Step one on the left, select the 0.00 time code. Step two on the right, select the Opacity action from the dropdown menu.

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

The timing settings panel displays a radio button to set as initial state, a start drop down menu with a delay input field, an easing duration and two settings with a type of ease dropdown menu. The opacity section includes a slider to increase the percentage.

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

Step one on the left click on the action at the 1.50 timecode, step two on the right, select the none display setting on the Hide/show settings panel.e

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

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top