Search

How can I make a dotLottie animation interactive?

To create interactive dotLottie animation, you can use the getLottie() method of your dotLottie player and pass it as the player property to the Lottie-Interactivity library, which allows you to control the animation based on user interactions such as hover, click, or scrolling using JavaScript.

 

Here's the full dotLottie documentation for your reference: https://docs.lottiefiles.com/dotlottie-player/usage#usage-with-lottie-interactivity

Here's an example of code that you can use to make the animation play on click:

HTML:

<dotlottie-player id="player" src="..."> </dotlottie-player>


Javascript:

const player = document.getElementById('player');

player.addEventListener('ready', () => {
  LottieInteractivity.create({
  player: player.getLottie(),
  mode:"cursor",
    actions: [
        {
            type: "click",
            forceFlag: true
        }
    ]
    });
});

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request

Comments

0 comments

Article is closed for comments.