Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
rgfx

Animating Timescale

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
TweenMax.fromTo(anim,2,{timeScale:0},{timeScale:1})

there's many type of easing :

https://greensock.com/docs/#/HTML5/Easing/

 

easing examples live view :

http://greensock.com/get-started-js#easing

 

for example in your case , you can use this  :

ease:Circ.easeIn
  • 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()

interval.kill();

 

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

.fromTo(anim,2,{timeScale:0},{timeScale:1})

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

@frux,

 

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