Jump to content
GreenSock

OEO

ScrollSmoother + ScrollTrigger: wrong order on ScrollTrigger.refresh()

Go to solution Solved by GreenSock,

Recommended Posts

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

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

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

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

  • Solution

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

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

  • 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.
×