Try hover and click

Lottie Interactivity
and Segments in Webflow

How to

Step 01

Paste Lottie Interactivity and Lottie Web Player Library at the <head> of your page
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>

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.

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.
<!-- Replace 'src' with the actual path to your LottieFile JSON file. -->
<lottie-player id='lottie' src='lottie.json'></lottie-player>
*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.

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.
<script>
LottieInteractivity.create({
    player:'#lottie',
    container: '#container', //Replace with the trigger ID
    mode:"chain",
    actions: [
        {
            state: 'hover',
            transition: 'click',
            frames: 'hover' //Replace with the corresponding segment
        },
        {
            state: 'autoplay',
            transition: 'click',
            frames: 'clickToClose' //Replace with the corresponding segment
        },
        {
            state: 'autoplay',
            transition: 'onComplete',
            frames: 'closeToMenu', //Replace with the corresponding segment
            reset: true
        }
    ]
});
</script>
** 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.
<script>
LottieInteractivity.create({
    player:'#lottie',
    container:'#container', //Replace with trigger ID
    mode:"chain",
    actions: [
        {
            state: 'none',
            frames: [0],
            transition: 'click',
        },
        {
            state: 'autoplay',
            frames: 'expand',  //Replace with the corresponding segment
            transition: 'click',
        },
        {
            state: 'autoplay',
            frames: 'shrink',  //Replace with the corresponding segment
            transition: 'click',
            jumpTo: 1,
        },
        
    ]
});
</script>
** 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.
<script>
LottieInteractivity.create({
    player:'#lottie',
    container:'#container', //Replace with trigger ID
    mode:"chain",
    actions: [
        {
            state: 'click',
            transition: 'onComplete',
        },
        {
            state: 'none',
            transition: 'click',
            reset: true,
        },
        
    ]
});
</script>
** NOTE: The 'player' and 'container' parameters need to match with the ID of the 'lottie player' and 'trigger', consecutively.
<script>
  LottieInteractivity.create({
          player:'#lottie',
          container: '#container', //Replace with trigger ID
          mode:"cursor",
          actions: [
            {
              type: "hover",
              forceFlag: true
            }
          ]
        });
</script>
** 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!
Go to Library

Check out some examples

menu

About
Portfolio
News
Login

arrow

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

ADD

favorite

twitter

Explore Our Collection with 100+ Free Lottie Animations
Go to Library