# Calculate object’s speed according to distance

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

##### Share on other sites

Hello

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

Parameters:

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.

Returns:

*  - 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?

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

##### Share on other sites

does the distance keep changing because your have a responsive layout?

##### Share on other sites

Yes exactly.

(Sorry, explaining that in the first place would have made my question easier to undersand...)

##### Share on other sites

here are 2 ways to use a constant speed based on the following parameters

distance and speed,

or start value, end value, and speed

http://codepen.io/GreenSock/pen/83bb65091440e943464d59e2ace1bdde

• 1
##### Share on other sites

this might be a stupid question Carl.. but when you use 100 for pixelsPerSecond ..  how do you come up with the value 100 or are you just assigning 100 pixels per second?

##### 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});
• 1
##### Share on other sites

Thanks for the explanation Carl

##### Share on other sites

Great, thanks a lot!

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

Rodrigo.

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