Jump to content
Search Community

Scrolltrigger inside other pinned Scrolltrigger

Stephane Demotte test
Moderator Tag

Recommended Posts



As you can see in the codepen.

I have a pinned gray section, inside a small timeline.


And i have an "orange" section. And i want to know when the "orange" section enter or leave the viewport.


With the "onEnter, onLeave etc..." everything works but when i put the orange section inside the pinned scrolltrigger, the "leave" event it's not "true"


It's hard to explain but if you check the codepen, you will understand (i hope) :)





See the Pen abNmBXo by stephanedemotte (@stephanedemotte) on CodePen

Link to comment
Share on other sites

Hey @Stephane Demotte


You want the 'leave' to fire on the orange box's leave-event?


In your example it probably doesn't work because you have set the height of the orange box to 100vh but the end of the ScrollTrigger is set to +=1000px


If you set that endpoint to


end: "+=" + (window.innerHeight)


in your code, it will resemble the 100vh of your orange box.


You should keep mobile devices in mind though with using heights as 100vh, since mobile browsers handle 100vh very different and your results may vary on each and every one of them.





  • Like 3
Link to comment
Share on other sites

Oh, okay.


You could apply start end end values for the ScrollTrigger of that orange box then, depending on the "duration" of the other trigger


  trigger: '.orange',
  start: "top top",
  end: "bottom -=1000px",
  onEnter: onEnterOrange,
  onEnterBack: onEnterOrange,
  onLeave: onLeaveOrange,
  onLeaveBack: onLeaveOrange



Seems to work in my fork of your pen:


See the Pen 86c7c56a3195df10fd88c0f1015e7ae8 by akapowl (@akapowl) on CodePen


Did I understand your question correctly this time around?


  • Like 4
Link to comment
Share on other sites

Yep !


The problem can be solve like that. 


In my real scenario, the "orange box" it's a component, it can be embed anywhere in my application, in a pinned element or anywhere else.

So the "end" cannot be set. The orange box must be autonomous.


But i just need to be sur.


It's a normal rule from the gsap scrollTrigger plugin ?

If a scrolltrigger is inside another pinned scrolltrigger, so the end still the same ? Its not like IntersectionObserver ?


Thanks again @akapowl




  • Like 1
Link to comment
Share on other sites

ScrollTrigger bases everything on the scroll positions. So the issue with nested pinned ScrollTriggers is that the positions reported are different than what they end up being (because of the pin). Thus you have to compensate for that. 


If all you're doing is wanting to know when something enters and leaves the viewport then you can use an intersection observer. It pairs great with ScrollTrigger :) 

  • Like 5
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...