Jump to content
Search Community

Smooth Scroll again- Don't worry Blake it's not about yours.

Visual-Q test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Had this kicking around in my head for awhile so I thought I'd give it a try. Uses a tl with ScrollTo and a tween mapped to deltaY to scrub through it's progress. 

 

Has some promise maybe - some jankiness presumably due to constant firing of deltaY and the tween getting overwitten so many times but maybe there's way to throttle or normalize this to improve it?

 

I also noticed using the scrollbar seems to make it inoperable, not sure what the relationship there is?

 

 

 

 

See the Pen MMdyje?editors=1010 by Visual-Q (@Visual-Q) on CodePen

  • Like 1
Link to comment
Share on other sites

I don't have time to analyze things in-depth, but I did notice that you just nested the "autoKill" incorrectly:

//BAD:
.to(window, 1, {scrollTo:".footer", autoKill:false, ease: Power0.easeNone})

//GOOD:
.to(window, 1, {scrollTo:{y:".footer", autoKill:false}, ease: Power0.easeNone})

 

It's fine to pass a string like that directly to scrollTo, but if you're defining more values that are scrollTo-specific (in this case "autoKill"), you need to use the object syntax. I suspect this is what was causing the dragging of the scrollbar to kill functionality (doing so killed the tween). 

  • Like 3
Link to comment
Share on other sites

Thanks Jack, fixing my syntax error seems to smooth it out.

 

I figured out the scroll bar now has an entirely different issue. Since the window wheel scroll is based on the timeline's progress if you move the scroll bar the two become out of sync and the timeline forces it to jump back to where it was the last time it's progress was set. I guess I need some more logic to calculate the window scroll position if it's moved with the scroll bar and pass that as a starting point for the timeline's progress in the event listener. 

 

57 minutes ago, Shrug ¯\_(ツ)_/¯ said:

We all know @OSUblake wants to optimize and blake-ify that snippet, but fears doing so will cause this thread to also get added to the list of threads causing him perpetual anguish. :--)

 

Yeah if any of our resident geniuses want to weigh in you're more than welcome. 

 

Link to comment
Share on other sites

30 minutes ago, Visual-Q said:

Yeah if any of our resident geniuses want to weigh in you're more than welcome.

 

I think this might be similar to your demo.

 

 

And @ZachSaucier did something similar here.

 

 

 

I don't think using a tween/timeline is the best approach for doing this. You need something a little more dynamic, like this:

 

https://tympanus.net/codrops/2019/07/10/how-to-add-smooth-scrolling-with-inner-image-animations-to-a-web-page/

 

 

They are using linear interpolation (lerp) to do the smooth scrolling. It's just a really simple calculation.

 

I just noticed that article mentions Jesper Landberg.

https://codepen.io/ReGGae/

 

 

He is no stranger to these forums.

 

 

 

I wonder if that is where he learned about lerp .

 

cxDVPrq.jpg

 

 

 

 

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

  • 4 weeks 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...