Jump to content
qqignatqq

How do I make my scroll animation smooth?

Recommended Posts

Hello. I'm trying to do my scroll animation. I've had such a problem that when I scroll more than once, the animation is jerky. How do I make sure that when I scroll more than once, the animation is simply extended to a distance equal to the number of times I scroll?

I have this now: https://jsfiddle.net/drkrol/mtvhrdgb/8/
I aspire to this: http://maxlepinskih.com/prices

Share this post


Link to post
Share on other sites

Hello and welcome to the GSAP forums,

 

I am not noticing anything jerky about your demo. Can you provide more detail as to what you mean by that? 

 

I do notice that your page lets you scroll past the top :smile:

 

There's a simpler way to do smooth scrolling exemplified by Blake in this post:

 

 

  • Like 3

Share this post


Link to post
Share on other sites

Thank you for the link. I saw it before I even created this post. I can't adjust the height of the step in that version. Firefox will have one height, Chrome will have another height, and Edge will have a third height. This is due to the fact that it does not work with wheel(), but with scroll(). 

It's okay for me to have a screen that goes beyond that. It's just a beta version))))) 

I shot a video showing animation on my website and animation on maxlepinskih. I put my code on his site.

The essence of the video is that in its version, if you scroll quickly, but the screen scrolls the distance you need, that is, the sum of all the steps will be summed up. And in my case, if you scroll quickly, the previous animation ends and a new one starts. That is, it is not summed up, and there are jumps.  In my video it is visible. When I open my website and try to spin quickly, it seems that I spin the wheel very slowly, like jumps, although I spin the mouse wheel very quickly.

How do I make a second mouse wheel just prolong the distance?

 

https://yadi.sk/i/2uJ8dPQ_4CvoZw

Share this post


Link to post
Share on other sites

Ah, I was using my touchpad to scroll which works fine. After plugging in my mouse and scrolling with the wheel I understand what you're getting at. 

 

The trick then is to keep track of how much distance was not reached by the time the subsequent scroll events happen. I added a couple variables to keep track of it. I also fixed the issue where people scroll above the default position (but not past the last one). Let me know if you have any questions!

 

https://jsfiddle.net/Zeaklous/5v8eywmb/5/

 

P.S. I just noticed that this breaks when I use my touchpad and doesn't work at all with my touchscreen (neither does your original demo). You might want to handle them independently.

 

  • Like 3

Share this post


Link to post
Share on other sites
1 hour ago, qqignatqq said:

This is due to the fact that it does not work with wheel(), but with scroll(). 

 

That's for a VERY important reason. Ignoring mobile devices, which is another can of worms, most Windows laptops and Chromebooks have touch screens. How do you scroll using a touch screen? You can't.

 

 

  • Like 2
  • Haha 1

Share this post


Link to post
Share on other sites

Whoa! Whoa! Thank you so much for your decision!

 

18 hours ago, ZachSaucier said:

P.S. I just noticed that this breaks when I use my touchpad an doesn't work at all with my touchscreen (neither does your original demo). You might want to handle them independently.

 

 

18 hours ago, OSUblake said:

That's for a VERY important reason. Ignoring mobile devices, most Windows laptops and Chromebooks have touch screens. How do you scroll on a touch screen if the user is using a mouse or trackpad? You can't.

I know about the lack of a scroll on the touch devices. I will process them through .swipe().

 

Thank you again!

Share this post


Link to post
Share on other sites

Hi,

 

In some cases, I recommend the ScrolloMeter if user scrolls too fast. 😊

 

See the Pen maWvve by mikeK (@mikeK) on CodePen

 

Be cool. Go-slow.

Mikel

  • Like 1

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.