Gsap - pinspacing on reaction after refresh

[Lichay]

Gsap - pinspacing on reaction after refresh

after I refresh page and on viewport show pinspacing the page go down to lower container 

How can I block this jumping after page refresh? I want it stay in same place like everything after refresh

[ZachSaucier]

Hey Lichay. Please create a minimal demo of the issue if you'd like our help.

[Lichay]

2 minutes ago, ZachSaucier said:

Hey Lichay. Please create a minimal demo of the issue if you'd like our help.

See the Pen rNMoxvM by lichaytiram (@lichaytiram) on CodePen

but you can't refresh it with codepen you need to run it with f5 for refresh

[ZachSaucier]

You can use the debug view of the pen to view the issue with refresh.

 

What you're asking for is not a simple task. If you assume that the window size doesn't change and that all content height is the same during the refresh it's simpler because you just:

1. Record the scroll position of the page. Save that to a cookie or localstorage.
2. When the page refreshes and finishes loading you go to that scroll position.

If the page could be resized or your content changes heights in between, that makes things a lot more complicated.

[Lichay]

1 hour ago, ZachSaucier said:

You can use the debug view of the pen to view the issue with refresh.

 

What you're asking for is not a simple task. If you assume that the window size doesn't change and that all content height is the same during the refresh it's simpler because you just:

1. Record the scroll position of the page. Save that to a cookie or localstorage.
2. When the page refreshes and finishes loading you go to that scroll position.

If the page could be resized or your content changes heights in between, that makes things a lot more complicated.

and why I need to do it?

 

without gsap or even with gsap but without pin it back to same viewport, but only with pin and show pinspacing area it go after by refreshing

[ZachSaucier]

16 minutes ago, Lichay said:

why I need to do it?

By this I assume you mean "Why do I need to do the work to keep the same scroll position after refresh in this circumstance?" 

 

The answer to this is because it's your responsibility. It's not within the scope of ScrollTrigger because:

1. This situation is exceptionally rare. If you need to support this case you should add the support yourself.
2. It would add a significant amount of kb to everyone loading ScrollTrigger even though most people would never need this functionality.
3. There are a lot of edge cases that need to be handled on a case-by-case basis. 

If you find that to be not acceptable, you're welcome to try and recreate the functionality of GSAP and ScrollTrigger yourself  

[Lichay]

2 hours ago, ZachSaucier said:

By this I assume you mean "Why do I need to do the work to keep the same scroll position after refresh in this circumstance?" 

 

The answer to this is because it's your responsibility. It's not within the scope of ScrollTrigger because:

1. This situation is exceptionally rare. If you need to support this case you should add the support yourself.
2. It would add a significant amount of kb to everyone loading ScrollTrigger even though most people would never need this functionality.
3. There are a lot of edge cases that need to be handled on a case-by-case basis. 

If you find that to be not acceptable, you're welcome to try and recreate the functionality of GSAP and ScrollTrigger yourself  

it really so hard to implement? because it think it supposed to be inside GSAP scope/ it happend only with this pin and spacing and it very weird 

[GreenSock]

Are you saying you think ScrollTrigger should be setting cookies or using LocalStorage, recording URLs and trying to find all that data for every page that has ScrollTrigger loaded? I definitely think that's outside the scope. 

 

Please keep in mind that on a full reload of a page, the scroll position can't be past where there's actual content. If, for example, your page is only 500px tall natively, but then you create a ScrollTrigger (after the page loads of course) that adds a bunch of pinSpacing so now it's 8000px tall, it can't magically know that the user had it scrolled to 6000px on a previous load. When the browser reloads the page, it might say "oh, this is a reload so go to 6000px" but then it'd see that it only has 500px worth of content and of course it wouldn't be able to go to 6000px.

 

And would you expect ScrollTrigger to constantly write the new scroll position to localStorage every time even the smallest scroll happens? If not, how would it accurately restore the position as you're requesting? 

 

Like Zach said, this would require not only a lot of kb but it'd also hurt performance for ALL users (even though probably less than 0.1% would even care about this feature). See what I mean? It's really not something that I think belongs in ScrollTrigger.