Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Visual-Q

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

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
6 hours ago, Visual-Q said:

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

 

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. :--)

  • Haha 3

Share this post


Link to post
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. 

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
On 7/14/2019 at 7:07 AM, OSUblake said:

 

 

I wonder if that is where he learned about lerp .

 

cxDVPrq.jpg

 

 

 

 

 


Haha, it might have been:) Crazy that such an easy calculation can be such a game changer:P

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×