Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Scrolltrigger pin horizontal breaks subsequent animations

Recommended Posts



i have an issue with multiple gsap ScrollTriggers on a single page, when one of them is a pin. All animations BEFORE the pin work perfectly, but all animations after the are broken, because the triggers are offset.


See the attached codepen, which is based on an example i have found on the forums. I have extended it by another simple scrolltrigger animation. But as you can see, the markers AFTER the horizontal pinned section are completely wrong and fire too early.


Is that a bug or am i doing something terribly wrong?

See the Pen JjLEpQB?editors=1010 by dennismeissner (@dennismeissner) on CodePen

Link to comment
Share on other sites


Welcome to the GSAP forum, Dennis.


Since all the elements are inside that .wrapper you are pinning and thus inside that one pin-spacer, you will need to use the pinnedContainer property or else their positions will not get set correctly as they can not take into account any pin-spacing that was created beforehand. This is from the docs:


pinnedContainer Element | String - If your ScrollTrigger's trigger/endTrigger element is INSIDE an element that gets pinned by another ScrollTrigger (pretty uncommon), that would cause the start/end positions to be thrown off by however long that pin lasts, so you can set the pinnedContainer to that parent/container element to have ScrollTrigger calculate those offsets accordingly. Again, this is very rarely needed. (added in 3.7.0)


  • Like 2
Link to comment
Share on other sites

Thanks akapowl for your quick feedback.


First of all i must say, that my example was wrong. In my real world example i have pinned the section itself.


But after searching on the forums for a bit longer i found this topic:


That solved it for me. As it was although you, answering this topic, thanks again for helping out ;)



  • Like 1
Link to comment
Share on other sites


Ha, yeah I noticed that you were creating your ScrollTriggers out of order in your example - but since I figured that in this specific scenario it wasn't neccessary to mention because of that .wrapper element being pinned, I decided not to include a sidenote about that.


Even better you found the solution yourself :) 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.