Jump to content
Search Community

ScrollTrigger progress when the DOM updates

tomw_uk test
Moderator Tag

Recommended Posts

Hi there,

 

I'm using ScrollTrigger to show and hide a navbar based on the position of the page scroll, but I've noticed that if I change the length of the DOM, ScrollTrigger's progress does not update.

 

Hopefully it's clear in this example. If you scroll up and down, you'll see the progress is reported accurately at the top of the page. If you then click "Show Box 2" and continue to scroll up and down, you'll get to 100% before reaching the end of the page.

 

Is the solution here to call .refresh() when doing anything like this, or is there a better solution?

 

Thanks in advance,

Tom.

See the Pen NWbdZYz by tomwelch (@tomwelch) on CodePen

Link to comment
Share on other sites

 

Hey @tomw_uk

 

Yes, calling a .refresh() is what you'd want to do, so ScrollTrigger can adjust to the new content height.

 

I found that calling it in an click event via JS would not work as expected though, without calling it with a slight delay.

 

I'm using a gsap.delayedCall for that here.

 

See the Pen 2ce7fbcfe05fe8ec225e1f43c6c95519 by akapowl (@akapowl) on CodePen

 

 

Edit:

Another option could be to do a safe refresh

 

See the Pen 01444890c9d9bb2234bfa2d56aab27ea by akapowl (@akapowl) on CodePen

 

 

ScrollTrigger.refresh( safe:Boolean ) ;

 

safe: Boolean

If true, it will wait for at least one requestAnimationFrame tick, and up to roughly 200ms before initiating the refresh. This is useful because sometimes the browser doesn't actually render the DOM-related changes immediately, causing measurements to be inaccurate. For example, if you add a "click" event listener to an element that expands other content on the page and you call ScrollTrigger.refresh() in that callback, the changes may not have been fully rendered by that point, so it's the perfect place to enable safe.

 

From the docs.

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

 

 

 

Hope this is helpful.

 

Cheers.

  • Like 3
  • Thanks 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...