Jump to content
GreenSock

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

Tween, pause and reverse with different speed

Recommended Posts

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

Link to comment
Share on other sites

Hey  anonty,

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

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