Jump to content
Search Community

Two scrolltiggers applied to an array of items

KevinS test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

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

Link to comment
Share on other sites

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.



  • Like 2
Link to comment
Share on other sites

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.




Link to comment
Share on other sites

  • Solution

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.


  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...