Two scrolltiggers applied to an array of items

[KevinS]

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

[PointC]

Hi @KevinS 

 

Welcome to the forum. 

 

With two ScrollTriggers targeting the same element, you want to set immediateRender:false on the 2nd one. You'd also want to skip toggleActions when you're using scrub. Finally, I'd recommend a linear ease with scrub. Here's a fork of your demo with those changes. I think this works as you intended. 

 

See the Pen 05a976e3c356393c5f4058c1b9e5fdfb by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening and welcome aboard.

 

[KevinS]

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

 

[PointC]

y transforms with the element you're using as the trigger can be a little confusing. Especially with two ScrollTriggers on the same element. IMHO it would probably be easiest to use a parent element around your .events and use that as the trigger. That way you're not animating the actual trigger element. Something like this should work.

 

See the Pen VwEGVLK by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening.

 

[KevinS]

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