Help with Uncaught TypeError in Console please

Lottie in Web
1

Hi guys

I have implemented a lottie animation within an HTML widget, on a WordPress site.

The animations play as intended, no issues there. However, in Console I receive the error:

Uncaught TypeError: this.player.addEventListener is not a function
 https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js:1

What am I doing wrong please? :slight_smile:

My code for the animation

<lottie-player id="commerce"
  src="https://mydomain.com/wp-content/uploads/2023/08/e-ecommerce.json" mode="bounce" 
  style="width:300px;">
</lottie-player>
<script>
LottieInteractivity.create({
player:'#commerce',
 mode:"scroll",
    actions: [
        {
        visibility:[0.2, 1.0],
        type: "play"
        }
    ]
});
</script>
2

Hey @Steve

Please try out these code snippets:

This snippet waits for the player to be ready before creating the interactivity object:

<lottie-player id="commerce"
  src="https://mydomain.com/wp-content/uploads/2023/08/e-ecommerce.json" mode="bounce" 
  style="width:300px;">
</lottie-player>

<script>
const player = document.getElementById("commerce");

player.addEventListener("ready", () => {
LottieInteractivity.create({
player:'#commerce',
 mode:"scroll",
    actions: [
        {
        visibility:[0.2, 1.0],
        type: "play"
        }
    ]
});
});
</script>

You can also try passing the player element straight to Interactivity:

<lottie-player id="commerce"
  src="https://mydomain.com/wp-content/uploads/2023/08/e-ecommerce.json" mode="bounce" 
  style="width:300px;">
</lottie-player>

<script>
const lottiePlayer = document.getElementById("commerce");

LottieInteractivity.create({
player: lottiePlayer,
 mode:"scroll",
    actions: [
        {
        visibility:[0.2, 1.0],
        type: "play"
        }
    ]
});
</script>

Let me know how you get on with those :beers:

3

Hi Sam,

Apologies for the late reply.

Thanks so much for the advice and assistance. I will try these code implementations this week!

4

@sam1

Samuel, the code works like a charm! Thank you.

Just a side note, if anyone needs help with this - if you have more than one animation on a page, then variables defined with const cannot be Redeclared.

So the code on a single page will look like this:

<lottie-player id="mydesign1"
  src=https://domain.com/lottie/mydesign1.json mode="bounce" style="width:300px;">
</lottie-player>

<script>
const player = document.getElementById("mydesign1");
 
player.addEventListener("ready", () => {
LottieInteractivity.create({
player:'#mydesign1',
mode:"scroll",
    actions: [
        {
        visibility:[0.2, 1.0],
        type: "play"
        }
    ]
});
});
</script>



<lottie-player id="mydesign2"
  src=https://mydomain.com/lottie/mydesign2.json mode="bounce" style="width:300px;">
</lottie-player>

<script>
var play2 = document.getElementById("mydesign2");

play2.addEventListener("ready", () => {
LottieInteractivity.create({
player:'#mydesign2',
 mode:"scroll",
    actions: [
        {
        visibility:[0.2, 1.0],
        type: "play"
        }
    ]
});
});
</script>
5

@Steve Love to hear it :tada: