Reset ScrollTrigger on refresh

[mrgreen]

Hi, is there a way of resetting all scroll triggers when the page is refreshed? I have multiple triggers and animations happening and I don't want users to arrive to the same state/progress they left in when refreshing, is there any way of having them load the page from the beginning like what happens when a hard refresh is done?

[GreenSock]

Sure:

ScrollTrigger.clearScrollMemory();
window.history.scrollRestoration = "manual";

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

https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration

[mrgreen]

That solved it, thanks a lot!

[Tony P]

Hi, Jack!

I've encountered the same issue mentioned by the O.P. and stumbled across this post.

The vanilla JS version works fine for me, but was just curious ... I had originally tried ScrollTrigger.clearScrollMemory() but was getting a console error that ScrollTrigger.clearScrollMemory() is not a function.  I do have the plugin included/registered correctly as it is already working just fine otherwise.

We are currently using version 3.9.1 (noticed that the clearScrollMemory() method was added as of 3.8)

 

Is that method doing the exact same thing as window.history.scrollRestoration = "manual", or does run anything else as well to manage other ScrollTrigger processes?

 

Not a major concern at all, was mainly just curious if I was using clearScrollMemory() incorrectly and if there was any difference to the native JS version.

 

Thank you!

 

Best,

Tony

 

 

[GreenSock]

58 minutes ago, Tony P said:

We are currently using version 3.9.1 (noticed that the clearScrollMemory() method was added as of 3.8)

 

Yep, make sure you're using a recent version. 

 

58 minutes ago, Tony P said:

Is that method doing the exact same thing as window.history.scrollRestoration = "manual", or does run anything else as well to manage other ScrollTrigger processes?

 

No, ScrollTrigger.clearScrollMemory() wipes out any recorded values inside ScrollTrigger. Part of the complexity of what ScrollTrigger does (especially with pinning) is it must essentially return the page to its original state (remove any pin-spacers, rewind associated animations, etc.) and go from the top down, calculating start/end scroll values and applying pinning but that can alter the page height (and consequently scroll position) which is why it must record the scroll position and return it there after a refresh().

 

For example, imagine a page that's naturally 1000px tall but you've got an element that's pinned for 2000px. Well that'd make the page 3000px tall, so if you scroll to 2200px and then .refresh() is called, that'd temporarily return the page to the native 1000px height and the browser will collapse the scroll position because it's impossible to have a 1000px-tall page scrolled to 2200px. So after the .refresh(), ScrollTrigger jumps back to where it was before the .refresh(). 

 

That's what .clearScrollMemory() does - it forces ScrollTrigger to flush any recorded values on scrollers. 

 

Does that clarify things? 

[Tony P]

Hey, Jack - That does clarify things, yes.   I appreciate it!

[durratino]

Hello there and thank you for this wonderful plugin!

 

I'm using the recent 3.11 version, but still getting the "ScrollTrigger.clearScrollMemory is not a function" error. As I understand, this function is exactly what I need: I'm filtering elements on the page with display: none, and when they are shown with display: block, their triggers are still at the start of the page, as if they are still not displayed. I'm calling ScrollTrigger.refresh(true), but it doesn't seem to update the trigger positions. 

Edited May 16, 2023 by durratino
upd: trigger positions do NOT update on window resize if the elements were initially hidden with display: none

[Rodrigo]

Hi @durratino and welcome to the GreenSock forums!

 

Is really hard for us to debug without a minimal demo.

 

If you're getting an error that clearScrollMemory is not a function, be sure to have latest version of ScrollTrigger and that you don't have a typo in your code:

ScrollTrigger.clearScrollMemory( scrollRestoration:String ) ;

As far as I know display none elements are taken out of the document, hence that will throw off ScrollTrigger calculations. Maybe you could use a combination of Flip and ScrollTrigger for this:

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

 

But again, without a minimal demo, there is not a lot we can do.

 

Happy Tweening!