Jump to content
Search Community

ScrollTrigger: issue with scroll position when I navigate to a page

ThinkingAbout_dev test
Moderator Tag

Recommended Posts

Hi everyone,
I have a weird issue with ScrollTrigger.
In my project, built with Nuxt.js, when I land on a new page, if there is a tween on that page that includes ScrollTrigger (or even if I invoke ScrollTrigger.refresh ()), the scroll position of that destination page "jumps" to the scroll y position of the page I came from.
Ever heard something like this?
Thanks a lot 🙏,
Matteo

  • Like 1
Link to comment
Share on other sites

Hello :) Thanks for the reply,
I have read the doc of this property but it does not solve the problem.
The problem occurs when I use a gsap tween that includes ScrollTrigger (if I remove the tween the page scrolls to top normally).

This is one of the tween i use, i call it on the "onMounted" page lifecycle hook:

gsap.to($element, {
  scrollTrigger: {
    trigger: $element,
    scrub: 1,
    start: "top bottom",
    end: "bottom top",
  },
  xPercent: -7,
  ease: "sine.none",
  force3D: "auto",
});

Regards

  • Like 1
Link to comment
Share on other sites

Hi @ThinkingAbout_dev

 

On codesandbox, you can add GSAP right here.

image.png

 

If you need to use a paid plugin, you can add codepen demo scripts to External Resources.

 

To fixed your problem, remove true from .refresh(), although I'm not sure why that is causing an issue.

 

And you really don't need to call refresh immediately after creating your scroll trigger.

 

https://codesandbox.io/s/rough-snow-vyb2i?file=/pages/index.vue

 

 

Link to comment
Share on other sites

Hi @OSUblake, thanks again for your help it is really appreciated. 
In the code you forked, the scroll problem, invoking animation.scrollTrigger.kill(), seems to be resolved correctly.
The tween on the second page, however, does not work (if you notice the green banner is not animated) but everything on our code seems fine.
I also noticed a similar recent issue with Next.js

Thanks again.
Matteo
 

Link to comment
Share on other sites

21 minutes ago, GreenSock said:

You mean 3.7.1, right? I wonder if maybe your system has an old version cached. 

 

I just tried it, and the scroll position issue is fixed, but the animations aren't working correctly.

 

I can try to make a reduced example, but you can see the issue here.

https://codesandbox.io/s/rough-snow-vyb2i?file=/pages/index.vue

 

To reproduce, scroll to the bottom of the page, and then click the Go to Home/Example Page button. The test banner animation will be completed.

 

  • Like 1
Link to comment
Share on other sites

On 7/2/2021 at 11:01 PM, OSUblake said:

Hi @ThinkingAbout_dev 

 

I'm guessing you're talking about the animation not playing again?

 

Hi, i mean the y position of the scroll does not update correctly when I change the page or the animation stop working if I kill ScrollTrigger. I tried both the latest version and the 3.6.1.
When do you think an updated version will be released with both the scroll postion and the animation issue solved?
Thanks, Matteo

Link to comment
Share on other sites

This looks like a Nuxt issue. When you're creating your animation/ScrollTrigger on the next page (after scrolling all the way down and clicking the button), the scroll position is STILL at the very bottom, so Nuxt hasn't refreshed it yet (to the top). 

  • Like 1
Link to comment
Share on other sites

  • 4 months later...

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...