Jump to content
Search Community

Calculate object’s speed according to distance

Cyboide 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

Hi there,


I have a math yet animation-related question here...


Lets say a graphic is to be tweened from one end of the screen to the other at a specific speed, no matter how long or short the distance is.

So when declaring the tween, how to calculate the time value?

TweenLite.fromTo(element, ??, {left:positionX}, {left:0});

My problem is, if I set a fixed time value, the object will move at a different speed. If the distance is wider, the object will probably move faster, probably too fast. If the distance is short, the object will move slower, probably too slow.

Link to comment
Share on other sites

Hello Cyboide,


What about looking into timeScale(). And then adjust the timeScale() based on the width (distance) of the container.




Below is from from timeScale() Doc's under TweenMax:


Factor that's used to scale time in the animation where 1 = normal speed (the default), 0.5 = half speed, 2 = double speed, etc. For example, if an animation's duration is 2 but its timeScale is 0.5, it will take 4 seconds to finish. If you nest that animation in a timeline whose timeScale is 0.5 as well, it would take 8 seconds to finish. You can even tween the timeScale to gradually slow it down or speed it up.

var currentTimeScale = myAnimation.timeScale(); //gets current timeScale
myAnimation.timeScale( 0.5 ); //sets timeScale to half-speed


  value:Number (default = NaN) - Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.


  *  - Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.


Does that help? :)

Link to comment
Share on other sites

Hi Jonathan,


Thanks. However this is not what I’m looking for. I don’t know the default values, that’s the thing.

In a TweenLite object, etc., a total time value is declared, but not the speed itself.


So, to use another example, if I would want a graphic to move forever in the x direction (just an example), all I could give is the speed I want that graphic to move, not the default time or time-scale.


I tried the velocity-distance formulas, but it gives me weird numbers.

Link to comment
Share on other sites

yeah, 100 was just a nice easy number to use. Based on how fast / slow you want to go, you would change that value.


Probably in real world you would use a variable so that multiple tweens could use the same speed



speed = 200;

//distance, speed
TweenLite.to("#red", getDuration(400, speed), {left:400, ease:Linear.easeNone});
//distance, speed
TweenLite.to("#green", getDuration(800, speed), {left:800, ease:Linear.easeNone});
  • Like 1
Link to comment
Share on other sites

Just to add a little physics to the great support given.


Keep in mind that speed is the distance variation in a given amount of time, because of that speed units are miles per hour, meters by second or in this case pixels by seconds (milliseconds if you prefer that), which is what Carl assigned as a general base speed, then used it to say:"at this speed every element has to go from it's original position to this final position".


Actually is quite fun if you make all three squares go to left:800 and with no delays.



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