How to
Step 01
Paste Lottie Interactivity and Lottie Web Player Library at the <head> of your page
Step 02
Set an ID for the trigger
Choose who will trigger the animation, and set an ID on Settings. You can name it how you want. In my case, I named the 'example-3-line' div as a 'container' ID.
![](https://uploads-ssl.webflow.com/6465fc843e20c176007a4610/646781fe4b320d0381420cb4_Screenshot%202023-05-19%20at%2015.04.14.png)
![](https://uploads-ssl.webflow.com/6465fc843e20c176007a4610/646780fa93b180e0cf2fcbe7_Screenshot%202023-05-19%20at%2014.57.58.png)
Step 03
Add Lottie Player into a embed element
Choose where do you want to place the animation, add a Embed Element and paste the following code.
*NOTE: You need change the 'src' attribute with the link of your Lottie. You can upload at Webflow in 'Assets' Panel and get the link there.
![](https://uploads-ssl.webflow.com/6465fc843e20c176007a4610/646781ff81b75a64e449af3d_Screenshot%202023-05-19%20at%2015.03.35.png)
![](https://uploads-ssl.webflow.com/6465fc843e20c176007a4610/64678403b307b301491c2bc0_Screenshot%202023-05-19%20at%2015.13.13.png)
Step 04
Add the Lottie Interactivity script
You can place the following code (1) in the same Embed Element right after the <lottie-player> tag or (2) before the </body> tag of your Page Settings.
For interactions like:
menu
with
hover + click
** NOTE 1: The 'player' and 'container' parameters need to match with the ID of the 'lottie player' and 'trigger', consecutively.
** NOTE 2: The 'frames' parameter needs to match with the 'segments' created at After Effects.
I created a website with 100+ free Lottie Animations, with Segments already enable. Check it out at webinmotion.co.
** NOTE 2: The 'frames' parameter needs to match with the 'segments' created at After Effects.
I created a website with 100+ free Lottie Animations, with Segments already enable. Check it out at webinmotion.co.
For interactions like:
expand or add
with
click
** NOTE 1: The 'player' and 'container' parameters need to match with the ID of the 'lottie player' and 'trigger', consecutively.
** NOTE 2: The 'frames' parameter needs to match with the 'segments' created at After Effects.
I created a website with 100+ free Lottie Animations, with Segments already enable. Check it out at webinmotion.co.
** NOTE 2: The 'frames' parameter needs to match with the 'segments' created at After Effects.
I created a website with 100+ free Lottie Animations, with Segments already enable. Check it out at webinmotion.co.
For interactions like:
favorite
with
click + reset
** NOTE: The 'player' and 'container' parameters need to match with the ID of the 'lottie player' and 'trigger', consecutively.
For interactions like:
twitter
with
hover
** NOTE: The 'player' and 'container' parameters need to match with the ID of the 'lottie player' and 'trigger', consecutively.
and it's done!
The animation starts to function only when you publish the website.
Did it work? Check out my website for more than 100+ free assets and questions. Thank you!
Did it work? Check out my website for more than 100+ free assets and questions. Thank you!
Go to Library
Check out some examples
menu
arrow
Company
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Department
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Industry
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
ADD
Cheese
Lettuce
Tomato
favorite
Happy Dog
Cute Dog