OEO Posted October 6, 2022 Share Posted October 6, 2022 Hello, I'm working on a rather large one page website with loads of different tweens, scrolltriggers, pins, timelines, etc. The site uses the ScrollSmoother plugin for smooth scrolling but i noticed weird behaviour when using the smooth scroll. I've included a pen to mimic the part that's causing problems When using ScrollTrigger.refresh() the order of the triggers being refreshed is different when using the ScrollSmoother. In the included pen i have 3 sections with 3 different types of animation. the order of the tweens in js is not the same as the order of the sections: 1 - normal tween with scrolltrigger - section #2 2 - timeline tween with scrolltrigger - section #3 3 - Scrolltrigger.create() - section #1 When not using the ScrollSmoother, the refresh order is: 1 - 2 -3 (as it should be) But when i enable SmoothScroller the refresh order is: 3 - 1 - 2. This messes up my triggers because 1 and 2 both have pinspacing. I've tried refreshing the timelines' scrolltrigger as mentioned here, but no success. I did manage to get it to work using refreshPriority:-1, but i don't think that's a fitting solution for me (because of the large amount of tweens/triggers/etc). So i was wondering if this is expected behavior or if i missed something or did something wrong or anything. Just trying to wrap my head around it. Any help would be highly appreciated! Cheers, Oscar See the Pen RwyYwPz by oscarorton (@oscarorton) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted October 6, 2022 Share Posted October 6, 2022 Hi @OEO and welcome to the GreenSock forums! If creating the ScrollTrigger instances in the order they appear in the screen is not an option, you have to use the refreshPriority configuration option AND ScrollTrigger.sort() in order to tell ScrollTrigger to re-order the instances in the way you need. This seems to work in the way you expect: /* third: create */ ScrollTrigger.create({ trigger: "#sect-1", start: (self) => {console.log('third');return "top top";}, end: "bottom top", scrub:true, refreshPriority:-1, onEnter() {console.log("first section!!!!")}, markers: true, }); ScrollTrigger.sort(); Let us know how it works. Finally thanks for being a Club member and supporting GreenSock 🥳 Happy Tweening! Link to comment Share on other sites More sharing options...
OEO Posted October 6, 2022 Author Share Posted October 6, 2022 Hi Rodrigo, Thanks for the fast response! The refreshPriority and .sort() did the trick. Still a little confused about the refresh order being different when using ScrollSmoother but it works now so I'm not complaining 😀 Last question: do i have to call ScrollTrigger.sort() after every scrollTrigger that uses refreshPriority or can i just call it once after all the scrollTriggers are added? Thanks a bunch man, really appreciate it! Link to comment Share on other sites More sharing options...
Rodrigo Posted October 6, 2022 Share Posted October 6, 2022 Hi, The order ScrollTrigger uses is the order they are created in the code, which ideally should match the order they appear in the screen. When the instances don't match is when you need to use the refreshPriority value and the sort method to tell ScrollTrigger the refresh order of the instances. Of course the sort method should be called after all the ScrollTrigger instances are created. Let us know if you have any other questions. Happy Tweening! Link to comment Share on other sites More sharing options...
Solution GreenSock Posted October 6, 2022 Solution Share Posted October 6, 2022 You shouldn't need to call sort() at all if you define a refreshPriority on any ScrollTrigger - that basically tells ScrollTrigger "hey, I'm creating stuff out of order, so when you do a ScrollTrigger.refresh(), make sure you sort stuff first." You definitely don't need to call sort() after each ScrollTrigger that you create. If you have a reduced test case that shows ScrollTrigger.sort() needing to be called even though you set a refreshPriority on at least one, please post it here and we'd be happy to take a peek. Link to comment Share on other sites More sharing options...
OEO Posted October 9, 2022 Author Share Posted October 9, 2022 Thanks guys, Managed to get it to work using refreshPriority:-1 only, without using the .sort() function. I had some labels at the top of their sections that i wanted to pin but because the sections itself consisted out of a lot of pinned animations i wanted to create the scrolltrigger for the label as last so that the trigger's height already took the pinspacing in account. The refreshPriority is what i needed. Thanks for making me understand the flow a little better! Cheers, Oscar 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now