0down votefavorite 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: http://codepen.io/amoeboar/pen/oxpXWm Thanks in advance for any help!