How to handle multiple Lotties animations on the same page

[AlejandroAlonzo]

Hi there! I would appreciate a little help because I am new.

For a few weeks I have been working with Lottes and GSAP animations. This is a minimized version of the project, in total there will be 9 animations that will be loaded on a single page one after another in full screen, and they will be controlled with the scroll forward or backward, there are also buttons that should lead to the beginning of each section.

The issues that I would like to fix are the fallowing:

-The buttons don't work correctly, they don't go to the beginning of sections, and the styles for the buttons are not applied correctly either.

-I would like to use a loop for the animations to optimize the code.

-The scrub does not work to smooth the scrolling.

Thank you very much for your help, I really appreciate it.

 

See the Pen OJwvdJq by alejandro-alonzo (@alejandro-alonzo) on CodePen

[mvaneijgen]

Hi @AlejandroAlonzo welcome to the forum!

 

3 hours ago, AlejandroAlonzo said:

-The buttons don't work correctly, they don't go to the beginning of sections, and the styles for the buttons are not applied correctly either.

 

You had it set up that the previous trigger created the next trigger, so only when the previous trigger was completed the would the next animation be crated, if you thus want to jump to animation 03, it doesn't work, because it hasn't been created yet.

 

I would how ever also suggest looking in to https://greensock.com/docs/v3/Plugins/ScrollToPlugin you have it already loaded, and as the name implies it will scroll to the specific part on the page, instead of the browser just jumping to that part of the page.

 

3 hours ago, AlejandroAlonzo said:

-I would like to use a loop for the animations to optimize the code.

 

It is always great to first create working code before optimising, I personally would have like that you tried your hand your self at a looping version and posted both versions, that way we could see what your thought process was and how we could better help you.

 

I would encourage you to read through my version and see if you understand what is going on, I've just copied one version of your setup and placed it in a .forEach loop and just filled in the blanks and scoped everything to that particular trigger in the loop.

 

3 hours ago, AlejandroAlonzo said:

-The scrub does not work to smooth the scrolling.

 

I don't see what you mean?

 

You are using the GSAP 2 syntax in your code I would recommend using the v3 syntax, much more readable. And you are using some really fast animations 0.01 translates to 10ms which is really fast! If you don't want animations and just have it change instantly just use a .set() instead of a .to() tween. I Hope it helps and happy tweening! 

 

See the Pen eYjMqBq?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

[AlejandroAlonzo]

 

Thank you so much! I'm really impressed with how fast your response.

[AlejandroAlonzo]

Hello again, I have noticed that the animations, when they are in full screen overlap one another, is it possible that it is something from the browser or do you recommend taking a look at the html sections?

[GSAP Helper]

If you're still having trouble, please just provide a very clear minimal demo and we'd be happy to take a peek at any GSAP-specific questions.