ScrollSmoother scrolling to top with ScrollTrigger.refresh()

[RadleyYeldar]

Hi, I'm using gsap scrollsmoother with the speed effects on few images in a Vue 3 app. I need to run ScrollTrigger.refresh() when all the images are loaded to recalculate the position but this is causing a scroll to the top.
I created a codesandbox and I've added a 5s setTimout fn to show the issue with ScrollTrigger.refresh(). Is there anything we can do to prevent the scroll to top? Many thanks!

 

https://codesandbox.io/s/epic-cloud-fx7vro?file=/src/main.js:286-300

[GreenSock]

Hi @RadleyYeldar, thanks for being a Club GreenSock member!

 

It'd be super helpful if you could just provide the most minimal demo possible without any frameworks like Vue just to help isolate things (frameworks often make things much more difficult to troubleshoot and not everyone around here is familiar with Vue). 

 

I copied much of your code into a simple CodePen and loaded the latest beta files - are you seeing any issues?

See the Pen MWGpxPR?editors=1010 by GreenSock (@GreenSock) on CodePen

[Rodrigo]

@RadleyYeldar

 

The issue is related with the current version of Scroll Smoother. Basically what is happening is that your codesandbox is using the current version of GSAP (3.11.1) and the Codepen sample made by @GreenSock is using the latest beta version (3.11.2) which is not yet on npm.

 

If you remove gsap and gsap-trial from your dependencies and add the following URLS in the external resources section, on the left sidebar, it should work as expected:

https://assets.codepen.io/16327/gsap-latest-beta.min.js

https://assets.codepen.io/16327/ScrollTrigger.min.js?v=3.11.2g

https://assets.codepen.io/16327/ScrollSmoother.min.js?v=3.11.2g

 

Let us know how it goes.

 

Happy Tweening!!!!

[RadleyYeldar]

Hi! thanks for the prompt responses. I can confirm that with v 3.11.2 works perfectly keeping the same position when running ScrollTrigger.refresh()! Is it possible to get the non minified version of gsap 3.11.2 please? thanks!

[TrainaDesign]

Hey @Rodrigo, we are having a similar issue, would it be possible to get a version of this we can use on our site that is launching friday as a temporary work around?

[GreenSock]

I sent you info about how to get the files, @TrainaDesign. You too, @RadleyYeldar. Thanks for being Club GreenSock members! 💚

[STUDIO SPOON]

Hi @GreenSock ! I have the same issue, is it possible for me to get the beta version too? I would appreciate your help with this situation.

[column5media]

Hey @GreenSock I am having the same issue as well and would really appreciate the files.  We have a site going live in the next couple of weeks.

[GreenSock]

Go ahead and update to 3.11.2 which is officially live (the CDN may take a little more time to update though). 👍

[column5media]

Hey @GreenSock @Rodrigo, I updated to 3.11.2 and while it fixed some of the issues I am still having a problem where it instantly jumps to the top of the page on refresh and then as soon as I begin scrolling again it jumps to the correct spot on the page.  I am using Refresh for when a user switches tabs, opens accordions, or expanding div sections and all seem to be problematic. 

 

From what I can tell I was not having issues with 3.10.  Is there a way I can use 3.10.4 Business via NPM?  That way I can get this launched and continue to work on fixes or wait till the next update?  

[GreenSock]

@column5media would you please provide a minimal demo that clearly shows the problem? I'm a bit concerned that you may just have an old version of the file cached. Are you sure you updated all your GSAP files to 3.11.2?

 

Just a few colored <div> elements is fine - not need to include a whole project. 

 

As for getting 3.10.4 from the private repo, I assume you could just set your package.json to pull the version you need.

[column5media]

@GreenSock Here is a VERY quick and dirty demo I put together to demonstrate one of the issues.  These accordions work fine with 3.10.4 but on 3.11.2 they jump you around the page as they open and close.  The issue I am having with the scrolling to the top is in a much more involved section and will be harder to create a demo for (These are coming out of a Wordpress site).

Also...Here is a screen recording showing the accordions working as expected with 3.10.4 https://www.awesomescreenshot.com/video/11357903?key=2be76a7bedb23d6d2787f24344f9638d

See the Pen oNdpKgM by tbuzelli (@tbuzelli) on CodePen

[Rodrigo]

Hi,

 

A quick way to install 3.10.4 using your NPM token is to run this:

npm install --save gsap@npm:@gsap/<package>@3.10.4

Happy Tweening!

[GreenSock]

@column5media the items are jumping around after you open/close because you've applied a data-speed effect to an ancestor element which would logically change the intersection points with the scroll position when the height changes. So ScrollTrigger is doing its job properly - it's a logic issue from what I can tell. 

 

For example, let's say you've got a 100px tall element with a data-speed of 2, and that element would naturally come into view at a scroll position of 500. ScrollTrigger would have to offset that element (translateY) accordingly so that as it comes into view, it moves twice the normal speed and hits its "natural" position in the center. So let's just say it offsets it by 800px (based on the height of the viewport). It'll hit a translateY of 0 right in the center of the screen. Cool. But if you CHANGE the height of that element and then ScrollTrigger.refresh(), it'll be a completely different calculation now. It may hit the viewport at a different spot and it'll definitely LEAVE the viewport at a different spot (if it's taller, it'll take longer to exit). So ScrollTrigger has to adjust the offset. Instead of 800px, perhaps it's 950px. See the issue? 

 

Again, from what I can tell this isn't a bug in ScrollTrigger/ScrollSmoother - it's just the nature of the effects you're using. It logically can't be seamless after resizing. 

 

As for the jumping to the top, I have a few questions for you:

1. Does it ONLY happen when using ScrollSmoother? Can you just remove ScrollSmoother from the equation and see if that changes anything besides the smooth scrolling? 
2. Can you please clear your cache and reload? I want to make sure you're using the latest beta files and I wonder if you've got old versions cached. 

[column5media]

Thank you for the response @GreenSock Removing the data-speed helped and your release of 3.11.3 solved the scrolling back to the top issue