Build an After Effects animation to load on click

Set up an animation to load with a mouse click or tap.

elements
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!


As part of our course on After Effects and Lottie in Webflow, we created an animation of a circle that explodes into many smaller circles. In this tutorial, we’ll set up our animation to load with a mouse click or tap. 

We’ll do this in 3 steps:

  1. Add the Lottie animation 
  2. Set up the trigger 
  3. Set up the animation

To follow along, go ahead and clone this project

Got it? Great! Let’s get started.

Add the Lottie animation

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

Start with a blank page in the Webflow Designer and set the background color to black at the bottom of the Style panel on the right. 


To find and add the exploding Lottie animation, click the photo icon (Assets panel) from the left toolbar and drag the circle animation onto the Canvas. 


To center the circle, make sure the body element is selected in the Assets panel on the left. From the Style panel on the right under Layout, set Align and Justify to center.


When you preview the page (click the eye in the top left), the animation plays immediately on load. This isn’t quite what we want to happen, so we’ll adjust this in step 2. 

Set up the trigger

In this step, we’ll set the animation to load on click instead of automatically playing when the page loads.  

Before we add our trigger, we want to make sure the animation is selected, not another element, like the body.  


From the Interactions panel on the right toolbar, open the Element trigger menu and choose Mouse click (tap). 

Set up the animation

On the Interactions panel under On 1st click, select Lottie Playback from the Action menu.


And voilà — you did it! Your Lottie animation will now play on click. Go ahead and try it out in preview. When the page loads, the animation will be static until it’s triggered by a mouse click or tap. 


Nice work!

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?