Insert Lottie motion graphics

Utilize Lottie animations in your website designs to enhance interaction and captivate users. Then, manage the animation’s playback using Lottie element configurations and engagements.

Within this article, you will discover:

1. The process of obtaining Lottie JSON and dotLottie animation files
2. Adding animations to your site
3. Modifying animation settings
4. The method to control the animation through interactions

Ways to acquire Lottie JSON and dotLottie animation files

You have the ability to upload Lottie animations to your website in the shape of Lottie JSON or dotLottie files. 

There exist 2 methods to obtain a Lottie JSON file:

• Export an After Effect animation as a JSON file utilizing the free After Effects bodymovin plugin
• Retrieve JSON animation files from Lottiefiles.com (or another online animation library)

There are 3 alternatives to acquiring a dotLottie file:

• Transform your existing Lottie JSON file to dotLottie using the JSON to dotLottie conversion tool
• Directly export a dotLottie file from After Effects utilizing the LottieFiles plugin
• Download a prebuilt dotLottie file from LottieFiles.com.

Additional references

• Discover how to craft animations for Lottie in After Effects
• Explore After Effects functionalities supported by Lottie
• Learn more about After Effects and Lottie in Webflow

Incorporating animations into your website

You can utilize Lottie JSON or dotLottie animations as symbols, thumbnails, page backgrounds, page loaders, customized animated cursors, and much more. 

To append Lottie JSON and dotLottie files to the Assets panel:

1. Click the “Assets” symbol within the left toolbar
2. Tap the “cloud” upload symbol
3. Choose 1 or numerous files from your computer

Subsequently, you can integrate the animations into your website. You can either drag and drop them straight from the Assets panel onto the canvas, or you can leverage the Lottie animation component. To employ the Lottie animation component:

1. Navigate to Add panel > Media section
2. Drop the Lottie animation component onto the Webflow canvas
3. Press Replace Lottie sequence in the Lottie animation component settings
4. Choose your Lottie JSON or dotLottie file from the Assets panel

Modifying animation configurations

The Lottie animation component settings govern the behavior of the animation on the site page. To tweak the settings, select the Lottie animation component and head to Element settings panel > Lottie animation settings. You can then adjust the animation’s settings for:

• Inbuilt duration — the duration for which the animation runs
• Looping — whether the animation cycles infinitely
• Reverse playback — if the animation plays in reverse
• Render — SVG or canvas

Top tip: As a default, all animations execute upon page load. Hence, individuals visiting the page won’t witness an animation beneath the fold (the section of the page necessitating scrolling) unless you establish the animation to loop or regulate the animation’s playback with interactions.

Regulating animation through interactions

You can manage your Lottie animations through interactions to modify how and when the animations run. Interactions enable you to define triggers to commence the animation, select a specific segment of the animation to play, and determine where to halt the animation playback. 

Two interactions are accessible for Lottie animations:

1. The Lottie playback animation
2. The Lottie action 

Keep in mind that these interactions are solely applicable to Lottie animations.

Note: If you need to modify the duration/speed of the animation, you can execute this via the Lottie animation settings section within the Elements settings panel. Please be aware that settings in the Lottie animation settings section may be overridden by Lottie playback settings in the Interactions panel.

Top tip: By default, all animations play upon page loading. Consequently, visitors won’t observe an animation beneath the fold (the section necessitating scrolling) unless you configure the animation to loop or control the animation’s playback with interactions.

Illustration 1: Initiate an animation on click

Through interactions, you can set an animation to play when a user clicks on it:

1. Click on your Lottie animation component on the canvas
2. Access the Interactions panel
3. Hit the “plus” icon adjacent to Element trigger
4. Choose “Mouse click (tap)”
5. Select “Select an action” alongside Action in the On 1st click section
6. Opt for “Lottie playback” within Integrations

You also possess the option to delay the playback, reverse the animation, or set the animation to loop.

Demonstration 2: Initiate an animation upon scrolling in and out of view

You also have the option to trigger your animation when it enters and exits the viewable area on the screen:

1. Choose your animated illustration on the design canvas
2. Navigate to the Interactions panel
3. Tap on the “plus” symbol beside Element trigger
4. Opt for “Scroll into view”
5. Select an action next to Action in the When scrolled into view category
6. Choose “Animate” under Integrations
7. Pick an action next to Action within the When scrolled out of view section
8. Select “Animation replay” within Integrations
9. Activate the Reverse option

Customize your animation with an offset or a delay.

Example 3: Commence a segment of the animation during page load

Utilize the animated action interaction for precise control over the animation’s behavior. Tailor start and end frames, implement easing functions, and define a specific duration.

For adjusting the start or end frames of your animation:

1. Locate your animated illustration on the design canvas
2. Open the Interactions panel
3. Select the “plus” icon next to Page trigger
4. Opt for “Page load”
5. Pick an action adjacent to Action in the When page begins loading section
6. Choose “Initiate animation” under Custom animation
7. Tap the “plus” symbol next to Timed animations
8. Assign a title to your animation (e.g., “Starting Animation on Load”)
9. Select the “plus” next to Actions
10. Opt for “Animation” under Integrations
11. Adjust the animation frame under the Animation section for the desired start frame
12. Mark the option “Set as initial state” under Timing
13. Tap the “plus” next to Actions
14. Pick “Animation” under Integrations
15. Define the animation frame in the Animation section to halt at a specific frame (e.g., setting it at 100% for playing until the end frame)
16. Press Save

Adjust the animation’s duration, delay, or easing effects as needed.

Quick tip: To use the default duration of the animation, select the animated illustration on the design canvas, navigate to Element settings > Lottie animation settings and enable the “Use built-in duration” option.