Control scrolling speed

[Andres Moraga]

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.

[mikel]

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

Mikel

 

[ZachSaucier]

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);

 

[Andres Moraga]

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!