Can you scroll to a label without scrolling animation?

[mjray]

Hey All - 

 

I'm using GSAP timeline to animate between some fixed sections on a site and i'm trying to do anchor linking to sections but I don't want to see every other section go by when clicking on a link - is there any way to do this?

 

Thanks!

 

MJ

See the Pen zYpvmqq by mjray (@mjray) on CodePen.

[Carl]

Thanks for the clean demo. Very helpful!

 

Great job converting the label to a scroll position too!

 

Since you already did the hard work I was able to tap into the ScrollTo Plugin using a set() to automatically jump to the position

 

gsap.set(window, {scrollTo:position})

 

See the Pen PoEPxwM?editors=1011 by snorkltv (@snorkltv) on CodePen.

 

It's important to note that in order for this to work well I had to change your scrub value from 1.2 to true. When scrub was set to 1.2 it means the scroll position would need to "catch up" to where it was set, thus resulting in a little animation. Change it around to see what I mean.

 

Also I loaded ScrollTo and the other plugins using the JS settings tab (click the gear across from the JS tab)

 

You might appreciate the Free lesson I just released on using ScrollTo with ScrollTrigger. It seems you know quite a bit but it may show you another cool trick using the start and end values of a ScrollTrigger

 

https://www.creativecodingclub.com/pages/free-lesson-scrollto-scrolltrigger

 

 

[mjray]

Hey thanks so much @Carl! Really appreciate the help. I'm guessing it's not possible to do this with scrub enabled?

 

I was able to get this working, but it created a new weird issue where the scroll position unexpectedly scrolls to the wrong position for longer pages with lots of sections. It happens intermittently, so you may need to reload a few times to see it, but basically if you click the link to Section 5 from the top of the page in codepen below you'll see that it goes to section 5 and then scrolls to the bottom of the page. It seems to work when the section is close by, but if it needs to skip a few sections it gets wonky.  Any ideas what could be going on?

 

See the Pen wvpzBav by mjray (@mjray) on CodePen.

[mikel]

Hey @mjray,

 

Take a good look at the code. Little but effective.

 

See the Pen WNdGbgR by mikeK (@mikeK) on CodePen.

 

Happy tweening ...

Mikel

 

[Carl]

@mikel  your solution is very nice for having little code, however it seems the scroll bar doesn't move with the jump links.

If you click button 6 the animation updates but the scrollbar is still at the top of the window.

 

1 hour ago, mjray said:

Hey thanks so much @Carl! Really appreciate the help. I'm guessing it's not possible to do this with scrub enabled?

 

Not sure what you mean. You can have scrub set to true as it appears in my demo above. If you want to animate the scroll position you would use a to() tween. Your initial post said "I don't want to see other sections go by" which is why I used a set().

 

It seems your demo is acting weird because you are using a set() with a duration. When I made it a to() tween it seemed to work fine all the time.

 

bad:

 gsap.set(window, {scrollTo: position, duration: 1, ease: "power0.linear"});

good

 gsap.to(window, {scrollTo: position, duration: 1, ease: "power0.linear"});

hope this works the way you like:

 

See the Pen KKZgdQP?editors=1010 by snorkltv (@snorkltv) on CodePen.

 

[mikel]

 

Hey CARL,

 

I was fascinated by the short code and didn't check it!

 

Thank you.

Mikel

 

[mjray]

Thanks @Carl - sorry for the confusion. I would like to use the set() function and not have any scrolling when clicking a link, but when simply scrolling down the page (especially fast scrolling) I want animations to catch up so they don't animate and go by too fast, which I was doing by setting the scrub to 1.5. 

 

I updated the demo and removed the duration and ease properties of the set() function but it's not working consistently, sometimes it immediately scrolls to the bottom of the page. If you scroll to the top of the page a few times and click the link you should see it happen.

 

Thanks again! Really appreciate it!

 

See the Pen wvpzBav by mjray (@mjray) on CodePen.

[Carl]

hmm, in your latest demo it appears the issue is that you are jumping to the section 5 it works fine but then snapping kicks in and moves the page down. to test this i removed the snapping and things appeared to work fine.

 

@GreenSock may have a better idea why that is.

 

it also seems that you want to dynamically change the scrub value. you want it false when jumping to a section but 1.5 when someone is scrubbing. I don't think  the api allows that. 

[mjray]

Thanks for all the help @Carl that makes sense! I think i'll just disable snapping and should be okay with scrub at true for now.