Jump to content
Search Community

Tween, pause and reverse with different speed

anonty 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

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

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

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