[Two scrolltiggers applied to an array of items]

Thanks Craig!  Learning a lot here and look for to exploring what else I can create with GSAP!

[Two scrolltiggers applied to an array of items]

Thanks Craig,

I spent some time to rework the original codepen based of your guidance.   I now have something much closer to what I want.   Figured out I actually don't want the scrub part and just want to tweens to play to completion once they start.

I think the final piece I want here is figuring the slideUp and Out off top of the viewport and setting start/end trigger points.  Start/End is still messing me up a bit but what I want to achieve is a trigger point that is with the box and is max 140px from the bottom of the box.

Cheers,

Kevin

 

[Two scrolltiggers applied to an array of items]

Hi,  I am new to using GSAP and for my first project, I am attempting to create a list of stacked boxes and I want the boxes to move up/fade in from the bottom and move out/fade out from the top.  Also want this to work in reverse if you scroll back up.  Each move/fade animation works on it's own but I can't get both to work together.  

 

This seems like a pretty easy project however I think I got my learning crossed and now struggling to get this to work.  Unsure if I should be using a timeline or if you can have more than one scrolltrigger attached to box.   I have read the documentation and searched the forums / code pens to see if I can find something similar however have not been successful and think I am getting more confused.  
 

Reaching out with the hope someone can point me in the right direction.
Thanks in advance!

See the Pen GRYGyqR by kslagboom (@kslagboom) on CodePen