Lottie animation on scroll inside a custom liquid. Publisher theme

[muzzamazza]

Hi everyone, 

This should be a pretty straightforward thing for someone who works with lottie files in general. Also, I'm no coder so the following stuff might make you laugh. 

I have a json file animation that I want to animate on scroll and sits above my footer. 

I created a custom liquid and added the embed code straight off the Lottie platform 

<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>

<dotlottie-player id="comeBack" src="https://lottie.host/3a00aa6b-5ca4-4b29-9baa-9c1407a10ead/67AWJhJ7v5.json" background="transparent" speed="1" style="width: 100%;" loop autoplay></dotlottie-player>

So far so good, the animation works, it's on loop which i don't want. I need it to animate as i scroll. Removing the loop autoplay leaves it static on the first frame but adding any of the following code doesn't seem to trigger animation. 

I added the lottie interactivity library  to the top of the code 

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

And then added the event script at the bottom

<script
LottieInteractivity.create({
player:'#comeBack',
mode:"scroll",
actions: [
{
visibility:[0, 1.0],
type: "seek",
frames: [0, 48],
},
]
});
</script>

Nothing. Animation stays static. Also, for some reason it breaks the footer and doesn't scroll past the animation.

If anyone wants to have a play, or give me any kind of advice.

my site: www.muzzamazza.com

pass: tiampa

JSON file: https://lottie.host/?file=3a00aa6b-5ca4-4b29-9baa-9c1407a10ead/67AWJhJ7v5.json

Thanks! 🙏

[muzzamazza · Accepted solution]

I resolved the issue this morning. The problem was the original embed code as it was using 'dotLottie' instead of normal JSON. 

So if anyone wants to know what the correct code is I'm adding it below :

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

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

<lottie-player id="comeBack"

src="URL OF YOUR JSON FILE" background="transparent" speed="0,5" style="width: 100%; height: " direction="1"></lottie-player>

<script>

LottieInteractivity.create({
player: '#comeBack',
mode: 'scroll',
actions: [
{
visibility: [0,0.38],
type: 'stop',
frames: [0],
},

{
visibility: [0.38,1],
type: 'seek',
frames: [0, 122],
},
]
});
</script>

The "comeBack" was just my id, use whatever you want to name yours. The last couple of columns of code are to do with when the animation starts. 

It's pretty well explained here : https://youtu.be/LVyiXWmu-zY?si=BL0g3zGW5ArAbL5C&t=275

Hope this helps someone else as the lottie interactivity is pretty fun to play with! 🙂 

[Exerceo]

Bonjour, 

Je ne connais rien au code liquid. 

J'ai intégré ce code mais l'animation n'apparait pas. Pouvez-vous m'aider? 

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

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

<identifiant du joueur lottie="Exerceo"

src="https://lottie.host/2a2eaafb-5588-4e3f-be9b-f253e47e64e9/vGQga1Su8L.json" background="transparent" speed="0,5" style="width: 100%; height: " direction="1"></lottie-player>

<script>

LottieInteractivity.create({
joueur : '#Exerceo',
mode : 'scroll',
actions : [
{
visibilité : [0,0.38],
type : 'stop',
frames : [0],
},

{
visibilité : [0.38, 1],
tapez : 'rechercher',
images : [0, 122],
},
]
});
</script>

Merci! 

[SeanFondrk1]

Would you be able to take a look at what im doing im having issues still

<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"></script>

    <dotlottie-player id=“test1”

src="https://lottie.host/fcf602c4-973c-467d-aefd-0946e4b28759/2UqiQ86cvT.json" background="transparent" speed="1" style="width: 100%” height: ;" speed=“0.5”></dotlottie-player>

LottieInteractivity.create({
player: ‘#test1’,
mode: 'scroll',
actions: [
{
visibility: [0,0.4],
type: 'stop',
frames: [0],
},

{
visibility: [0.4,1],
type: 'seek',
frames: [0, 30],
},
]
});
</script>

[smallson]

You are a life saver! I spent days looking for something like this since I'm also a non-coder. Thanks so much!