Tween, pause and reverse with different speed

[anonty 0 Likes (Newbie)]

I want to tween opacity from 0 to 1 in 20 seconds, stop it at for example 11.5 seconds and then reverse it in 2 seconds. What would be the best way to do that? I tried to tween to opacity 1, pause() and tween to opacity 0 in 2 seconds, but opacity goes below 0. Would it be better to use reverse? And when I use reverse, how can I set a fixed duration, since timeScale() doesn't work because of pause().

[alwayzambitious 54 Likes (Contributor)]

Hey  anonty,

I couldnt follow the logic – see if you can code a quick codepen example to troubleshoot. codepen.io, 

[anonty 0 Likes (Newbie)]

Hi,

 

Sure: 

See the Pen vgXYoq by anon (@anon) on CodePen

 

I want to set a fixed number of seconds on the reverse() action. Any ideas to make the code better are also appreciated.

 

Thanks for your help!

[alwayzambitious 54 Likes (Contributor)]

Check this out, I'm not sure it's the best way but it's "a" way. let me know if it's what you want.

See the Pen oBzgjO by dwayneaneckles (@dwayneaneckles) on CodePen

var tl = TweenLite.to($('#box'), 30, {opacity: 1});

$('#button').click(function() {
 TweenLite.to($('#box'), 1, {opacity: 1,overwrite:true});  
 TweenLite.to($('#box'), 1, {delay:1 ,opacity: 0});
}); 

You have to use a property called overwrite:true. and i delayed the start of the fade to zero, the same time it took to fade it to 1 

The second call will overwrite the first one, if you didn't set that overwrite to be true, then neither tween would at work.

 

This doesnt mean it cant be done the way you had, with pause resume...but thats how i would do it.

I'd be curious to see a better way to do that though.

[Dipscom 2,815 Likes (Superhero)]

How about tweening the tween? I changed it to x rather than opacity only to make it easier to see the change.

 

See the Pen oBYwze by dipscom (@dipscom) on CodePen

 

This is one gem Carl explained in this article: https://medium.com/net-magazine/7-hidden-gems-of-the-greensock-animation-platform-4fb71389f6ca

 

Make sure you read that, there's loads of good tricks there.

[alwayzambitious 54 Likes (Contributor)]

This is exactly why I was waiting for the advanced devs,

I will be sure to read that article.

Thank you @dipscom.

 

How about tweening the tween? I changed it to x rather than opacity only to make it easier to see the change.

 

 

See the Pen oBYwze by dipscom (@dipscom) on CodePen

 

This is one gem Carl explained in this article: https://medium.com/net-magazine/7-hidden-gems-of-the-greensock-animation-platform-4fb71389f6ca

 

Make sure you read that, there's loads of good tricks there.

[OSUblake 9,990 Likes (Superhero)]

You can change the duration. Just adjust the progress.

See the Pen OWbdXp?editors=0010 by osublake (@osublake) on CodePen

[Dipscom 2,815 Likes (Superhero)]

With cryptic code like that, you confuse me...   

[OSUblake 9,990 Likes (Superhero)]

Is that better?

See the Pen OWbdXp?editors=0010 by osublake (@osublake) on CodePen

[Dipscom 2,815 Likes (Superhero)]

Until you remove that shorthand for the if statement, it will be greek to me.