Change Scrolling Behavior From Incremental to Smooth with Mouse Scrolling

[birdie1]

Hello there! I have a website I’m building that has animations controlled by the user’s scrolling behavior.

i.e. As a user scrolls down animation moves left. As the user scrolls up the animation moves back to it’s original position.

All of this is working great! The issue I am hoping you can help me solve is how the mouse scrolls on my website in general.

When I scroll down the scrolling is incremental, so my animations appear jumpy vs smooth.

Is there a way to make the scrolling behavior smoothly scroll up and then back down without this incremental jumping for anyone who visits my website?

Demo Site
https://miles.birdhouse-demos.com/

[PaulOB]

@birdie1

When I scroll down the scrolling is incremental, so my animations appear jumpy vs smooth.

This will vary between browser/platform and between your connection speed. On my imac in Chrome with a fast connection the page scrolls ok.

However there is an inherent issue in all these scroll effect pages as they hijack the scroll event and rely on blisteringly fast machines to achieve their effects.

You probably need to spend some times looking in the performance tab of the devtools but they aren’t for the faint hearted.

What I usually do is go back to basics and start at the beginning with a reduced test case and then gradually add features to see when the bottleneck occurs. If possible you should check other sites built on the code you are using to see if they have the same issues as yours and if not then that may alert you to look elsewhere for the problem.

Some browsers are better than others and IE/Edge always had mouse scrolling problems so if Edge is your problem then do a google search for Edge scrolling problems.