Problem with an animation that change on every section

[amirTrujillo]

Hi,
I'm new to GSAP and having trouble with a specific animation, I made a quick simplified (and ugly) pen to demonstrate the problem.
I have two DIV's with separate animation that change on every section, I'm sure there is a cleaner way to do it.
Thank in advance. 

See the Pen GRdxqbX by amir-trujillo (@amir-trujillo) on CodePen

[Rodrigo]

Hi @amirTrujillo and welcome to the GreenSock forums!

 

Well, this all depends on how you want to display this. If you want your animated elements to be visible and on top of the other three sections as they animate, then yeah what you have in place seems like a good way to do it, unless other user can think of a better way to achieve this. Just be careful with your real setup in terms of your CSS, since I'm assuming that your demo is quite simpler than the real life situation. Thanks by the way for the simple demo 👏

 

On the other hand if you want to not show the other three sections as your scroll animation is being played, then maybe a better setup with a position relative, or no position set, and a ScrollTtrigger pin could be the best way. Like I said, this depends on what you're trying to do.

 

Finally thanks for being a Club member and supporting GreenSock! 🥳

 

Happy Tweening!