Jump to content


Animating Timescale

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 rgfx  :)


timeScale method :

var anim = new TimelineMax() 
tl.to(element, 2, {.....})
// if you dont need to use timeline ; you can use this : 
// var anim = TweenMax.to(element,2,{.....})

// tween timescale

there's many type of easing :



easing examples live view :



for example in your case , you can use this  :

  • Like 4
Link to comment
Share on other sites

Do I have to create a new timeline for this effect? I would like to slow things down within the time.

Link to comment
Share on other sites

Check Diaco's commented code. It doesn't have to be a Timeline.


As a follow-up question: how do you Tween the globalTimeScale? I figured I could just make a function to slowly increment the .globalTimeScale, but it would be nice if I could do this using a single tween such as in Diaco's example.


See the Pen uehGg#0 by maelfyn (@maelfyn) on CodePen

  • Like 2
Link to comment
Share on other sites

Duh, didn't see that in the comments. Thanks. 

Link to comment
Share on other sites

Tweening globalTimeScale is quite easy, since it's just a getter/setter property of TweenMax which GSAP handles quite well

TweenMax.fromTo(TweenMax, 2, {
  globalTimeScale: 0
}, {
  globalTimeScale: 1,
  ease: Linear.easeNone

Be aware however that even this tween will be subject to globalTimeScale, so its duration/ease are going to be affected by this. 

See the Pen qcgBh?editors=001 by jamiejefferson (@jamiejefferson) on CodePen

Also, if you want to make a GSAP timer, there is a dedicated delayedCall() function just for that:

TweenLite.delayedCall(1, myFunction, ["param1", 2]);
  • Like 3
Link to comment
Share on other sites

Is there a simple way to repeat delayedCall? I have avoided using it in many cases because I couldn't use it to replace setInterval. Otherwise I've been using TweenMax with onRepeat.


jamiejefferson: didn't know about that... awesome!

Link to comment
Share on other sites

// setTimeout()

var timeout = TweenLite.delayedCall(2, function() {

// do something once after 2 seconds



// setInterval()

var interval = new TimelineMax({ repeat: -1 }).call(function(param1, param2) {

// do something every 2 seconds

}, ["p1", "p2"], null, 2);


// clearInterval()



  • Like 2
Link to comment
Share on other sites

This is awesome... thanks for spelling this out. When I get enough time, I am going to replace all of my setTimeout and setIntervals with Tweens to implement a pause feature in my web game. I think this is so cool because my game is purely event-driven and it has no game loop.

Link to comment
Share on other sites

I  added the wrong codepen example, on my initial post, embarrassing.


Animating timescale seem to be working, I just wanted to slow down the initial approach. can I apply easing to it? As I would like to keep it slow for a little longer. 


Anyway, it seems like this is preventing the timeline from looping, did I do something wrong? 


See the Pen BdpFt by rgfx (@rgfx) on CodePen


Can't wait for custom easing!

Link to comment
Share on other sites

  • 7 months later...



Thanks for this, so little code too! No time to test today, but I'll let know on repo if I find something. 


Great work. 

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.