Jump to content
GreenSock

Av9ry

calling ScrollTrigger.refresh on each frame?

Go to solution Solved by akapowl,

Recommended Posts

Hi. I have my own solution for smooth scrolling. It changes the translateY of the container element on scroll using request animation frame. I was looking for a way to make ScrollTrigger work, and what I did is put this line into my update() function that's being called each frame:

 

ScrollTrigger.refresh();

 

It works fine, and triggers all ScrollTrigger instances across my entire application correctly. No issues.

 

The question is, what exactly the refresh method does, and is it okay to use it performance wise? I imagine if it calls getBoundingClientRect() it should be pretty bad to use it on each frame. The documentation says that it calculates startandendvalues, but what exactly are these values, and where do they come from — I have no idea. Would appreciate any help

 

Thanks,

 

Link to comment
Share on other sites

I would look at the existing ways of integrating scrollTrigger with other smooth scrolling libraries like locomotive scroll or AsScroll

  • Like 1
Link to comment
Share on other sites

7 minutes ago, SteveS said:

I would look at the existing ways of integrating scrollTrigger with other smooth scrolling libraries like locomotive scroll or AsScroll

Thank you for advice. The question remains the same, what exactly ScrollTrigger.refresh() does behind the scenes, and is it ok to call it on each frame?

Link to comment
Share on other sites

Hi @Av9ry and welcome to the GreenSock forums!

 

Here is the docs link to the refresh method:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/refresh()

 

Notice that there is a refresh method for each ScrollTrigger instance and a static global refresh method:

const st = ScrollTrigger.create({});

// This is called only on this particular instance
st.refresh();

// This is called on EVERY ScrollTrigger instance
ScrollTrigger.refresh();

As for calling the refresh method on each frame, you'll have to test that. It could create a performance issue depending on the amount of ScrollTrigger instances and other aspects of your setup, so my recommendation would be to test it. If you see a performance issue then maybe you should debounce the execution of the refresh method.

 

Hopefully this clear things up.

 

Happy Tweening!

  • Like 2
Link to comment
Share on other sites

  • Solution
33 minutes ago, Av9ry said:

The question remains the same, what exactly ScrollTrigger.refresh() does behind the scenes, and is it ok to call it on each frame?

 

The answer very likely is:

 

That's a bad idea, since all the heavy work ScrollTrigger does will be done on refresh, which is why it's mostly only called 'automatically' by ScrollTrigger on load and on/after resizes.

 

This is thread has a more profound answer, that I got when I tried to do something similar to that with smooth-scrollbar.js...

 

 

... that was before ScrollTrigger.scrollerProxy() was added to ScrollTrigger (you can see mention of it further down in that thread) - which is what you are likely looking for if you want to hook up ScrollTrigger to your own smooth-scrolling script.

 

  • Like 3
Link to comment
Share on other sites

@akapowl is right - you definitely should NOT be calling ScrollTrigger.refresh() on every tick. It's expensive. Basically in order for ScrollTrigger to do all of its calculations correctly, it must revert everything to its natural state (undo all pinning, all the pin-spacers, etc.) so that the layout and CSS styles affect things properly and then go top-to-bottom establishing and measuring the ScrollTriggers. Things further up on the page can affect things further down, like if you pin something for 500px, it would of course push the start/end of things lower on the page further down. 

 

Think of ScrollTrigger.refresh() almost like a complete tear-down and building up again of stuff. ScrollTrigger.update() is much, much cheaper and the purpose of that is to merely have the ScrollTriggers update their progress according to the current scroll position (no tearing down or building up). 

 

But yeah, if you're just trying to wire up ScrollTrigger to work with your own custom smooth scrolling solution, ScrollTrigger.scrollerProxy() is exactly what you need. That's the entire purpose of that method. 

 

And of course I'd be remiss if I didn't mention that ScrollSmoother is the best, most integrated solution for smooth scrolling. Lots of features, and it's built on top of ScrollTrigger. Very easy to implement. I'm surprised nobody mentioned that yet :)

 

Good luck, @Av9ry!

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