Lottie animation on scroll inside a custom liquid. Publisher theme

Store Design
1

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

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

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], }, ] });

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! :folded_hands:

2

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 :

<lottie-player id=“comeBack”

src=“URL OF YOUR JSON FILE” background=“transparent” speed=“0,5” style="width: 100%; height: " direction=“1”>

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! :slightly_smiling_face:

3

Bonjour,

Je ne connais rien au code liquid.

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

<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”>

Merci!

4

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

<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”>

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

{
visibility: [0.4,1],
type: ‘seek’,
frames: [0, 30],
},
]
});

5

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