Jump to content
Search Community

ScrollTo always starts from the top of the page

anton123 test
Moderator Tag

Recommended Posts

  • 3 weeks later...

Hey @MeloWise and welcome to the GSAP forums.

 

The core of the issue in the first pen in this thread is that the tweens are created at the start when the scroll position is 0. Both tweens thus start from a scroll position of 0 and go to the target location. This is one of the most common mistakes people make with GSAP (I highly recommend reading that post).

 

The demo I posted works because it creates a new tween when it is needed, thus it uses the scroll position at that time as the starting position (not 0). Does that make sense?

  • Like 1
Link to comment
Share on other sites

@ZachSaucier Thanks for the quick reply.  I will have a read on that article you posted.

It does make sense, you're creating the tween

onEnter: () => goToSection(section, intoAnim)
onEnterBack: () => goToSection(section),

Now the scrollTo y position is created and set when you enter the triggered section. But the real trick is when you create this Tween for the "window" it grabs the scroll position AT THE TIME OF THE TWEEN CREATION. Allowing the "window" scroll position to change and be correct every time. 

gsap.to(window, {
    scrollTo: {y: section, autoKill: false},
    duration: 1
  });

Thank you for the help. I will add this logic to my page.
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...