Jump to content
Search Community

Animating Timescale

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

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.

 

  • Like 2
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

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

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