Steve
August 11, 2023, 6:58am
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?
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>
sam1
August 18, 2023, 9:25am
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
Steve
August 28, 2023, 10:10am
3
Hi Sam,
Apologies for the late reply.
Thanks so much for the advice and assistance. I will try these code implementations this week!
Steve
August 31, 2023, 8:01am
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>
1 Like
Hello,
I had the same problem.
The new code fixed it but my animation wonβt play. Do you know why ?
<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
<dotlottie-player id="eyez" src="https://lousitasgallery.com/wp-content/uploads/2024/07/two-eyes-comp.json" style="width: 100%;" speed="1"></dotlottie-player>
<script>
const lottiePlayer = document.getElementById("eyez");
LottieInteractivity.create({
player: lottiePlayer,
mode:"scroll",
actions: [
{
visibility: [0,1],
type: 'seek',
frames: [0, 181],
},
]
});
</script>
Website : https://lousitasgallery.com/
Iβm working on Wordpress with Divi.
Thank you,