Creating a timeline and then scrolltrigger

[gem]

Hello! On page load I am trying to create am animation where certain elements fade in. On these same elements I have a scrolltrigger that moves the elements around and animates the opacity to 0. Each animation works without each other, but when trying to run both it does not work.

 

After the initial fade in, once the user scrolls the elements disappear.

 

Any help is greatly appreciated. Thank you!

See the Pen ZEmaqJV by bonfiremitch (@bonfiremitch) on CodePen

[Rodrigo]

Hi,

 

A few things. First and foremost is the fact that ScrollTrigger has a configuration option called immediateRender. This basically tells ScrollTrigger to not render the GSAP instance immediately which is causing the problem. To make it short when your code runs the boxes have an opacity of zero, so when it first renders that instance (the one controlled by ScrollTrigger) takes that as the starting point of the animation, so basically GSAP is taking the elements from opacity 0 to opacity 0, so as soon as you scroll a bit, they disappear. Is not a bug just the way things work and why the immediateRender option is handy in these cases.

 

Another thing is that you can create a single GSAP instance for both cases and no need to create a separate ScrollTrigger instance for each element. In the case of the first animation you can use stagger to separate each instance:

https://greensock.com/docs/v3/Staggers

 

In the case of the ScrollTrigger instance you can use function based values which in the case of an array will loop through the elements passing the index to a function.

 

Here is a fork of your codepen:

See the Pen WNYXYVb by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[gem]

@Rodrigo This is exactly what I am looking - thank you so much!!