Lottie animation

With Webflow's After Effects and Lottie integration, you can use After Effects (AE) [↗]  animations in your designs, and even control their playback with the Lottie element settings and Webflow’s interactions and animations tools.

‍

In this lesson:

1. Get JSON animation files
2. Add the animations to your website
3. Control the animation with interactions

Get Lottie JSON animation files

You can upload AE animations to your site in the form of Lottie JSON files. You can get these files in one of the following ways:

1. Export AE animations as JSON files with the free AE bodymovin plugin [↗]
2. Download free JSON animation files from Lottiefiles [↗] (or other online animation libraries)

Resources

• Learn how to create animations for Lottie in After Effects [↗]
• Learn about After Effects features supported by Lottie [↗]
• Learn more about this feature, check out our announcement blog post

Add the animations to your website

You may use JSON or Lottie animations as icons, thumbnails, page backgrounds, page loaders, custom animated cursors, etc.

Just like other image files, you can upload your JSON animation files to your project's Assets panel and directly drop them from there onto your pages.

Alternatively, you can use a Lottie animation element (located in Add elements panel >  Media) as a placeholder for the animation until you upload your JSON file. Then you can choose to replace this placeholder with a Lottie sequence from your Assets panel.

Specify how the animation should play

The Lottie element settings allow you to control how the animation should play on the page. You can override the default duration, set the animation to loop indefinitely, or set the animation to play in reverse

Here's a list of all the parameters you can set for each Lottie animation element:

• Replace Lottie sequence (button) — Replace the animation with another from the Asset panel or by uploading a new animation
• Preview Animation (button) — Play and preview the animation on the canvas
• Use built-in duration (checkbox) — Checked by default, uses the default duration of the animation. Uncheck to override the duration. 
• Use built-in duration (input field - appears when the checkbox is unchecked) — By default, it displays the built-in duration of the animation. Use a smaller value to make it faster or a higher value to slow it down.
• Loop (checkbox) — Make the animation play indefinitely
• Play in reverse (checkbox) — Make the animation play in reverse
• Render mode (preset toggles) — Switch the animation rendering mode. The default is SVG. SVG is great for vector animations. Canvas is good for rasterized layers most common in image sequences. Toggle the renderer if the animation isn’t playing correctly in the selected mode.

Note that Canvas mode may not always render shapes correctly and may alter the scaling behavior. Also, each renderer supports different animation AE features — check which features are supported for each renderer [↗].

Control the animation with interactions

With the power of Webflow interactions and the Lottie integration, you have more control over how and when these animations play. With these options, you can play and pause animations upon user interaction.

You can set triggers to initiate the animation, choose what portion of the animation to play, and where to stop the animation playback. There are two ways to control Lottie animations with interactions:

1. The Lottie playback animation
2. The Lottie action 

Both of these options are available only for Lottie animation elements. Meaning, to access them, you need to select a Lottie animation on the canvas.

Example 1. Play an animation on click

By default, all animations play as the page loads. So, you won’t see animations below the fold play when you scroll to them unless you've set them to loop. With interactions, you can control the playback.

Let’s say you want to play an animation when a user clicks it:

1. Select the Lottie animation element on the canvas
2. Add a mouse click (tap) element trigger in the interactions panel
3. Choose Lottie playback in the actions menu under On 1st click. Optionally, you can choose to delay the playback, reverse it, or set it to loop.

That’s it!

If you need to change the duration/speed of the animation, you can do so through the Lottie element setting in the Elements settings panel. All other settings in the Lottie animation settings will be overwritten by the Lottie playback settings in the Interactions panel.

Example 2. Play an animation when it scrolls into and out of view

You can use the quick action we used in the above example for mouse hover and scroll into view interactions as well.

In this example, let’s set the animation to play when it enters the viewport:

1. Select the Lottie animation element
2. Add a scroll into view element trigger in the interactions panel
3. Create an animation under when scrolled into view
4. Choose Lottie playback in the actions menu under On 1st click
5. Optionally, set an offset if the animation plays too soon
6. Choose Lottie playback in the actions menu under On 2nd click
7. Reverse the playback
8. Optionally, set an offset

Example 3. Play only a part of the animation on page load

For some interaction types, you may need to create a custom animation and use the Lottie action which gives you more control over how your animation plays. This option allows you to set custom start and end frames for the animation. And like other timed actions, you can apply easing effects and set a custom duration. Also, you can add other actions to create more complex animations.

If you want to adjust the start or end frames:

1. Select the Lottie animation element
2. Add a page load element trigger in the Interactions panel
3. Create an animation under when page starts loading
4. Add a Lottie action
5. Optionally, if you want the animation to start at a different frame, adjust the start frame under the Lottie setting and set it as initial state
6. Add another Lottie action
7. Set the end frame to 100% or smaller if you want the animation to stop at a different frame
8. Adjust the duration to control how slow or how fast the animation plays

Pro Tip: If you want to use the default duration of the animation, double-click the animation on the canvas, uncheck the duration checkbox and use the built-in duration that appears.