Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
anton123

ScrollTo always starts from the top of the page

Recommended Posts

Hello,

 

The first 2 panels should be reached via ScrollTo, but the second ScrollTo always starts from the top of the page. How can I fix this?

See the Pen jOqOazp by anton234 (@anton234) on CodePen

Link to comment
Share on other sites

Hey anton123. Your tweens are initialized at the start which means that their start position is going to be 0 (in most cases).

 

Are you trying to do something like this? 

See the Pen abdNRxX by GreenSock (@GreenSock) on CodePen

  • Thanks 1
Link to comment
Share on other sites

  • 3 weeks later...

@ZachSaucier can you explain that a little further.

I am having the same issue. After reading this and looking at my code. I can't fully wrap my head around the issue. 

 

What in the code above does @anton123 need to do to get his example to work correctly?
 

Link to comment
Share on other sites

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.

×