Cannot make Lottie Interactivity work with Canvas element

1

Hi Folks!

I’m using this LottieFiles Interactivity guide to make my Lotties interactive on click, hover, scroll etc.

https://lottiefiles.com/interactivity

However, this approach uses the Lottie Web Player and I would like to use the Canvas element.

I’m using the following code to load the Lottie:

import { DotLottie } from "https://esm.sh/@lottiefiles/dotlottie-web";
const canvas = document.getElementById("lottie");
let dotLottie = new DotLottie({
  autoplay: false,
  loop: true,
  mode: "forward",
  speed: 1,
  canvas,
  src:
    "https://assets.codepen.io/9400490/cycling.lottie"
});

That displays the Lottie fine but when I try to add interactivity with the code below it is not working:

const player_2 = document.getElementById("lottie");
player_2.addEventListener("ready", () => {
  LottieInteractivity.create({
    player: player_2.getLottie(),
    mode: "cursor",
    actions: [
      {
        type: "hover",
        forceFlag: false
      }
    ]
  });
});

Any help to get this work will be much appreciated!

Thanks!

2

Hello,

Hey! Great that you’re exploring Lottie interactivity with Canvas rendering — it’s a bit trickier than with the usual Lottie Web Player (SVG/HTML), because the Canvas API is lower-level and the interactivity library (LottieInteractivity) is designed mostly around the Web Player.

What’s going on?
Your code creates the DotLottie player with a canvas element — that works fine.

But your player_2 is just the canvas DOM element, not the Lottie player instance.

The “ready” event is an event from the Lottie player instance, not the canvas element.

Also, player_2.getLottie() doesn’t exist because player_2 is just the canvas element, not a player object.

Best Regards
hery

3

Thanks for your explanation Hery. I somehow knew this code doesn’t make much sense but thought I would try. I think I will stick with the Lottie player for now.

Just one last question. Is it possible to move the src attribute and the Url from the html and include it programatically. For example:

Html looks like that:
<dotlottie-player src="https://assets.codepen.io/9400490/cycling.lottie" background="transparent" speed="1" direction="1" autoplay="" loop="" playMode="normal" style="width:220px; height:220px;"></dotlottie-player>

and JS:

const player_1 = document.getElementById("Lottie-1");
  player_1.addEventListener("ready", () => {
    LottieInteractivity.create({
      player: player_1.getLottie(),
      mode: "scroll",
      actions: [{
        visibility: [0, 1],
        type: 'seek',
        frames: [0, 240],
      }]
    });
  });

I would like the src attribute and the URL be part of js instead of html and I’m struggling. I tried path and src but both don’e work.

Thanks for your help.