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.
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.
Add a Lottie animation straight from the Assets panel.
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.
Add a Lottie animation element from the Add Elements panel, then replace the placeholder with a JSON animation file.
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
Adjust the animation through the Lottie animation settings.
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.
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:
The Lottie playback animation
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.
Use a quick Lottie playback animation to play an animation when a user clicks it.
Let’s say you want to play an animation when a user clicks it:
Select the Lottie animation element on the canvas
Add a mouse click (tap) element trigger in the interactions panel
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.
This animation plays when it enters the viewport as you scroll the page.
In this example, let’s set the animation to play when it enters the viewport:
Select the Lottie animation element
Add a scroll into view element trigger in the interactions panel
Create an animation under when scrolled into view
Choose Lottie playback in the actions menu under On 1st click
Optionally, set an offset if the animation plays too soon
Choose Lottie playback in the actions menu under On 2nd click
Reverse the playback
Optionally, set an offset
Two animations are set for this scroll interaction. The first plays the animation when 10% of the Lottie element is scrolled into view. The second plays the animation in reverse when the Lottie element is scrolled out of view by an offset of 10%.
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.
By setting an initial state, we can set a custom start frame for our animation. Otherwise, the animation will always play from the first frame.
If you want to adjust the start or end frames:
Select the Lottie animation element
Add a page load element trigger in the Interactions panel
Create an animation under when page starts loading
Add a Lottie action
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
Add another Lottie action
Set the end frame to 100% or smaller if you want the animation to stop at a different frame
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.