ScrollTo always starts from the top of the page

[anton123 2 Likes (Newbie)]

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

[ZachSaucier 7,127 Likes (Superhero)]

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

[MeloWise 0 Likes (Newbie)]

@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?
 

[ZachSaucier 7,127 Likes (Superhero)]

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?

[MeloWise 0 Likes (Newbie)]

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

[MeloWise 0 Likes (Newbie)]

This is the project I am working on. 

www.melowise.com/viper