Jump to content
Search Community

How do I make my scroll animation smooth?

qqignatqq 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

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

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

Link to comment
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
Link to comment
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
Link to comment
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!

Link to comment
Share on other sites

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