dotLottie Interactivity doesn't work

LottieFiles Website
1

Hey guys,

I’m trying to add dotLottie with hover on my WP site but it doesn’t work. While standard Lottie does work, dotLottie is still. Any ideas what I’m doing wrong?

Working Lottie:

<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>

<lottie-player id="lottieHover" src="/file.json" style="width:400px; height: 400px;">"></lottie-player>

<script>
  LottieInteractivity.create({
    player: '#lottieHover',
    mode: 'cursor',
    actions: [
      {
          type: "hover",
          forceFlag: true
      }
    ]
  });
</script>

Not working dotLottie:

<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>

<dotlottie-player id="dotlottieHover" src="/file.lottie" style="width:400px; height: 400px;">"></dotlottie-player>

<script>
  LottieInteractivity.create({
    player: '#dotlottieHover',
    mode: 'cursor',
    actions: [
      {
          type: "hover",
          forceFlag: true
      }
    ]
  });
</script>
2

Hello @Zocial_AS
It looks like you’re on the right track, but there might be a few things to check for dotLottie files:

Ensure Compatibility: Make sure that the version of the dotLottie player you’re using supports the interactivity features. The latest versions often have better support for these features.
Check File Path: Verify that the path to your .lottie file is correct and accessible. Sometimes, issues arise from incorrect file paths.
Player Initialization: Ensure that the dotLottie player is properly initialized and that the file is fully loaded before applying interactivity. You might need to add an event listener to ensure the player is ready.
State Machine Support: The dotLottie player supports state machines, which can be used to define interactive behaviors directly within the .lottie file. Make sure your .lottie file is configured correctly if you’re using state machines.
Here’s an updated example with an event listener to ensure the player is ready:

<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>

<dotlottie-player id="dotlottieHover" src="/file.lottie" style="width:400px; height: 400px;"></dotlottie-player>

<script>
  document.getElementById('dotlottieHover').addEventListener('load', function() {
    LottieInteractivity.create({
      player: '#dotlottieHover',
      mode: 'cursor',
      actions: [
        {
          type: "hover",
          forceFlag: true
        }
      ]
    });
  });
</script>

Hope this will help you.
Best regards,
samuel898