Lottie json editor how to#
Lottie json editor pro#
Lottie json editor download#
Lottie json editor free#

You can also choose to delay the playback, reverse the animation, or set the animation to loop.Įxample 3: Play a part of the animation on page load

Choose “Lottie playback” under Integrations.

Click “Select an action” next to Action in the On 1st click section.

Click the “ plus” icon next to Element trigger.

Select your Lottie animation element on the canvas.

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

That means that page visitors won’t see an animation playing below the fold (i.e., the part of the page visitors must scroll to see) unless you set the animation to loop or control the animation’s playback with interactions.

Lottie json editor pro#

Pro tip: By default, all animations play as the page loads. Note that settings in the Lottie animation settings section will be overwritten by Lottie playback settings in the Interactions panel. Note: If you need to adjust the duration/speed of the animation, you can do so through the Lottie animation settings section in the Elements settings panel. Note that these interactions are only available for Lottie animations. There are 2 available interactions for Lottie animations: Interactions let you set triggers to initiate the animation, choose what portion of the animation to play, and choose where to stop the animation playback. You can control your Lottie animations with interactions to adjust how and and when the animations play.

Lottie json editor how to#

How to control the animation with interactions

Play in reverse - whether the animation plays in reverse.

Loop - whether the animation plays on an infinite loop.

Built-in duration - how long the animation plays.

Then, you can adjust the animation’s settings for: To adjust the settings, select the Lottie animation element and go to Element settings panel > Lottie animation settings. The Lottie animation element settings control how the animation plays on the site page.

Select your Lottie JSON or dotLottie file from the Assets panel.

Click Replace Lottie sequence in the Lottie animation element settings.

Drag the Lottie animation element onto the Webflow canvas.

You can either drag and drop them directly from the Assets panel onto the canvas, or you can use the Lottie animation element.

Then, you can add the animations to your site.

Select 1 or multiple files from your computer.

Click the “ Assets” icon in the left toolbar.

To add Lottie JSON and dotLottie files to the Assets panel: You can use Lottie JSON or dotLottie animations as icons, thumbnails, page backgrounds, page loaders, custom animated cursors, and much more.

Learn more about After Effects and Lottie in Webflow.

Learn about After Effects features supported by Lottie.

Learn how to create animations for Lottie in After Effects.

Lottie json editor download#

Download a prebuilt dotLottie file from.Export a dotLottie file directly from After Effects using the LottieFiles plugin.Convert your existing Lottie JSON file to dotLottie using the JSON to dotLottie conversion tool.There are 3 ways to get a dotLottie file: Download JSON animation files from (or another online animation library).

Lottie json editor free#

Export an After Effect animation as a JSON file with the free After Effects bodymovin plugin.There are 2 ways to get a Lottie JSON file: You can upload Lottie animations to your site in the form of Lottie JSON or dotLottie files. How to get Lottie JSON and dotLottie animation files How to control the animation with interactions.How to get Lottie JSON and dotLottie animation files.Then, control the animation’s playback with Lottie element settings and interactions. You can use Lottie animations in your site designs to make them interactive and engaging.