Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Andres Moraga

Control scrolling speed

Recommended Posts

Hi! I'm using the ScrollTo plugin to create an autoscroll for a text which I need to show on different scenarios. In this case depending on the scenario the width of the container will be different making the height of the whole text to vary between each scenario. I tried using scrollTo: { y: 'max' } to always go to the very bottom, and set the animation duration to 165. While checking I noticed that the speed of the scroll is different on each scenario and I need them to scroll at the same speed. So, I was wondering if there is a way in which I could control the scroll speed to show them all scrolling consistently at the same speed.

Link to comment
Share on other sites

Hi @Andres Moraga,


The formula is: duration = distance / speed


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


If you have any further questions, please show a CodePen with your case.


Happy tweening ...



  • Like 3
Link to comment
Share on other sites

Hey Andres and welcome!


As mikel said, using an equation to set the speed based on the distance is a good idea. On the GreenSock website we use this same approach but also set a maximum duration to make sure that long animations aren't too long:


var dur = Math.max(0.25, distance / speed);


  • Like 3
Link to comment
Share on other sites

Hi Mikel and Zach,

Thanks for the help! I really appreciate you guys taking time to look into this and it absolutely makes sense to use the equation as described.

Thanks Again!

  • Like 2
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.