How play next lottie animation after one is ended via scrolltrigger? (lottie helper function)

[iamruletik]

Hello everyone. Trying new things with the scrolltrigger. I get how to play lottie animation using scrolltrigger, mostly because of your great lottie helper. But I can't quite get how to play another lottie after one is done. So what basically I need is to when one lottie show last frame, i want to show the next animation so users would scroll it like one big animation. I made demo on codepen with first animation that works perfectly, but i don't know how to play second one https://uploads-ssl.webflow.com/65439ff2fe01591215aa20e4/6548fd41566d2b21f8075c8a_secondAnimation.json

I thought of using timeline, but how to playback animations backwards when user is scrolling up and hook up animations to the same wrapper? Also I think put all animations in one big lottie but it would be pretty big because we use images for the blur effect and we use lots of it. So I thought that splitting them up good idea and also I would need to animate text over this background animation and I thought that splitting animations would help.

P.S: So i've tried to add animations to the timeline but it doesn't worl for some reason

See the Pen qBgRaXZ by iamruletik (@iamruletik) on CodePen.

Edited November 6, 2023 by iamruletik

[Rodrigo]

Hi,

 

This is the simplest setup I can think of:

See the Pen jOdyYZQ by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps.

Happy Tweening!

[iamruletik]

@Rodrigo Wow thanks a lot for giving this light setup. It gave me the direction on how to achieve what I need. I changed a little bit your pen and this is what I come up with

See the Pen PoVWQvM by iamruletik (@iamruletik) on CodePen.

What do you think? It kind of stupid because after each animation I hide it and i think that out there exist a better solution. It would be great to destroy animation and delete it from DOM just to free up the memory. But how then load it again inside the timeline? But maybe I'm wrong. 

Also I disabled pining because for some reason it gave me artifacts on lottie.

[iamruletik]

@Rodrigo Also I have one more small question. Right now is kind of easy to add some text animation to the current timeline and run animation alongside the lottie. But I need to show on each lottie up to 4 blocks of text. One after another. Is there a way to add text animations in current timeline and run them alongside each lottie? I mean when one lottie is played, there is another timeline of 4 text blocks that are animated one after another, but the whole text timline runs alongside with first lottie animation. (kind of like what i did here https://coco-rad.webflow.io/)

And now I think that I kind of answered this one myself haha. Can I just nest timlines in each other and run them alongside each lottie?

[Rodrigo]

Hi,

 

Just use the position parameter to set the position of your text animations in your timeline. Remember that you can have many Lottie instances in one timeline and you can position your text animations either relative or absolutely in your timeline as well, lots of flexibility around here! ?

 

If you keep having issues with this particular setup, please create a minimal demo that clearly illustrates what you're trying to do and the issue you're having.

 

Finally, IDK about killing and then adding the lottie animation again and again, especially since you have everything controlled by the scroll position. Better leave them there, after all is just simple SVGs and nothing more. Most of the time performance issues are related to complex rendering like filters and such rather than JS or code execution, so keeping the lotties in the DOM, especially if they are not visible, shouldn't create any problem since they're not being rendered. I'd recommend you to test, test, test and if you find that you gain a lot in terms of performance (not just a few MB of memory and a few ms in terms of code execution) then do all the extra work of removing them, for now just show/hide them using autoAlpha (a GSAP mix of opacity and visibility).

 

Hopefully this helps.

Happy Tweening!

[iamruletik]

@Rodrigo Thanks so much )

[SharonMcNamara]

On 11/7/2023 at 9:30 PM, Rodrigo said:

Hi,

 

Just use the position parameter to set the position of your text animations in your timeline. Remember that you can have many Lottie instances in one timeline and you can position your text animations either relative or absolutely in your timeline as well, lots of flexibility around here! ?

 

If you keep having issues with this particular setup, please create a minimal demo that clearly illustrates what you're trying to do and the issue you're having.

 

Finally, IDK about killing and then adding the lottie animation again and again, especially since you have everything controlled by the scroll position. Better leave them there, after all is just simple SVGs and nothing more. Most of the time performance issues are related to complex rendering like filters and such rather than JS or code execution, so keeping the lotties in the DOM, especially if they are not visible, shouldn't create any problem since they're not being rendered. I'd recommend you to test, test, test and if you find that you gain a lot in terms of performance (not just a few MB of memory and a few ms in terms of code execution) then do all the extra work of removing them, for now just show/hide them using autoAlpha (a GSAP mix of opacity and visibility).

 

Hopefully this helps.

Happy Tweening!

Thank you sir for answering in brief. It helps me a lot. You made my day. I appreciate you for taking your time to write it.