Jump to content
Search Community

ScrollTrigger and Next.js - scroll position after route change

Łukasz test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi everyone,

 

my project is built with Next.js. After updating gsap from 3.6.1 to 3.7.0 I encountered a problem with scroll position. Next.js scrolls to top by default after navigation to another page, but that no longer works when I have gsap 3.7.0. New page maintains the scroll position of the previous one.

 

Here are two demos:

one that demonstrates the correct behaviour with gsap 3.6.1 https://codesandbox.io/s/gsap-361-38gq7

and another one with the unwanted behaviour with gsap 3.7.0 https://codesandbox.io/s/gsap-370-vzw7s

 

Adding ScrollTrigger.refresh(); which helped in the case linked below, hasn't solved my problem. 

 

Any ideas how to bring back the good old behaviour?

 

Thanks a lot!

Lukasz

  • Thanks 1
Link to comment
Share on other sites

  • Solution

I believe this is fixed in the next release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js

 

If you need a .tgz file (like to npm install), you can get it at https://assets.codepen.io/16327/gsap-beta.tgz

 

Does that work better for you? Please let us know if you notice any other issues. 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

7 hours ago, GreenSock said:

I believe this is fixed in the next release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js

 

If you need a .tgz file (like to npm install), you can get it at https://assets.codepen.io/16327/gsap-beta.tgz

 

Does that work better for you? Please let us know if you notice any other issues. 

After installing the .tgz file the problem is gone. I'll let you know if any other issues come up. Thanks

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

  • 4 months later...

 

On 6/30/2021 at 1:07 AM, GreenSock said:

I believe this is fixed in the next release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js

 

If you need a .tgz file (like to npm install), you can get it at https://assets.codepen.io/16327/gsap-beta.tgz

 

Does that work better for you? Please let us know if you notice any other issues. 

 

Hello, i have the same issue with my vuejs app.

 

How can we choose the version with `"gsap": "npm:@gsap/shockingly"` ? 

I cannot roll back to `3.6.1` with the bonus files 😕

Do we access to the beta files ?

 

Thank you !

Link to comment
Share on other sites

Hi @Stephane Demotte,

 

We're a few months (and releases) on now. This issue should be fixed now.

On 6/30/2021 at 6:07 AM, GreenSock said:

I believe this is fixed in the next release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js


If you want to choose a specific version and you're using npm - you'll need to change the version in your package.json.

"gsap": "~3.6.1"


Make sure you delete your package-lock.json and run npm install again.

I wouldn't recommend this though - if possible make a minimal demo showing the issue and open a new forum thread so we can take a look. You shouldn't be running into issues!

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