4
\$\begingroup\$

I have words inside a tween and I need to slow down a tween that is already running and I am using updateTweenData to do so. All running tweens are in an array.

updateTweenData works, but the problem is, when I set the slower speed, words become closer together and when I set the normal speed, words space out.

Here's a jsfiddle that demonstrates the problem.
Just click slower/faster buttons and notice how words behave.

I want just the speed to change and everything else to remain the same.
How can I achieve this?

Best regards.

\$\endgroup\$
2
\$\begingroup\$

If the objects cover the same distance (400px) in 40 or in 80 seconds, it's going to have an impact on the spacing if the objects start with a fixed delay of 2 seconds (values taken from your jsfiddle).

First of all, you should incorporate the delay into the tween itself (use the delay property). Then, instead of using different durations for the tweens, use the timeScale property to speed-up or slow-down your tweens.

As an additional measure you'll probably also want to ensure that your tweens use linear easing.

Update: Here's an updated jsfiddle that incorporates what I outlined in my answer.

\$\endgroup\$
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.