Jump to content
Search Community

ScrollTrigger with ScrollSmoother issue on triggers

Archimede Soc.Coop. test
Moderator Tag

Recommended Posts


in the example i have cards with two trigger each card.

First trigger scale the card and the second trigger pin the card.


When I've added ScrollSmoother the start and the end of the scale trigger generates the issue and only the first scrolltrigger correctly works.


Any help would be greatly appreciated.




See the Pen ExeEdVO by archimedewebagency (@archimedewebagency) on CodePen

Link to comment
Share on other sites



Sorry for the late response 🙏


Unfortunately I can't tell you exactly where things went wrong in your setup or as Bugs says:



Instead I forked your codepen and run a completely different approach that seems to work as expected:

See the Pen GRXdGGq by GreenSock (@GreenSock) on CodePen


Hopefully this helps.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Just to shed some light on what was happening in your original...


You set up a bunch of overlapping ScrollTriggers, some that were using the very same trigger element (and some of those were even animating the trigger element itself...which is almost always a bad idea because you're moving the reference point) and you were creating them out of order. In other words, the starting point of one ScrollTrigger was below the starting point of the ScrollTrigger created after it. When calculating the start/end scroll positions, ScrollTrigger needs to go top-to-bottom (because pinning an element may add pinSpacing that would push elements below that further down on the page, thus affecting their start/end positions). 


ScrollSmoother has to define a refreshPriority in order to ensure it does its work in the proper order. When any ScrollTrigger has a refreshPriority defined, it will turn on sorting, so by default it'll put all the ScrollTriggers in order of their "start" position so that the refreshes occur top-to-bottom. The way you set everything up in such an out-of-order way was causing problems because your logic seemed to depend on things being out of order.


@Rodrigo seems to have provided a good solution there. I'd just be careful about animating the trigger element.


Anyway, I simply wanted to explain more about what was going on. 

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