Jump to content
Search Community

How to reverse a Tween when it's finished

amoeboar 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'm drawing a bunch of concentric circles with JavaScript. Then I've got a GSAP tween set up that ripples / animates each circle outward from the center. The basic effect is that the circles go from having a border width of 1px to a border width of 4px. The tween is meant to gradually grow to 4px and then gradually fade back to 1px.

The tween looks good, except when it reaches its end, its jumps back to 1px. The "fade-out" i'm looking for is missing.

I've tried using yoyo, but I don't think that's what I need. I basically want to fade all the way up, and then reverse it all the way back down to it's original state. Can anyone tell me what I need to to and what I'm doing wrong?

My timeline looks like this:

var elements = ['#ring-a', '#ring-b', '#ring-c', '#ring-d', '#ring-e', '#ring-f', 
'#ring-g', '#ring-h', '#ring-i', '#ring-j', '#ring-k', '#ring-l'];

function rippleOutward(elements) {
var rippleOutward = new TimelineLite();
rippleOutward.staggerTo(elements, 1.8, 
{repeat: -1, css:{borderColor: 'rgba(255, 255, 255, 0.8)', borderWidth:'4px'},
ease: Power3.easeInOut, y: 0 }, 0.1);
}

I created a pen to illustrate what I'm talking about: 

Thanks in advance for any help!

See the Pen oxpXWm by amoeboar (@amoeboar) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Thanks for providing the demo. In order to have the border tween back to 1px thickness you need another animation to handle that. 

 

The approach I took involved creating a timeline for each ripple with 2 tweens:

 

  • 1 that tweens the thickness to 6px
  • 1 that tweens the thickness back to 1px

I then nest each of these ripple timelines into a parent timeline using add()

 

http://codepen.io/GreenSock/pen/vGpNJy?editors=0010

 

Is that closer to what you want? I made the second tween a bit long so you can see it. 

 

Note: tweening border width usually doesn't look very smooth as I'm pretty sure there are no sub-pixel values.

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