amoeboar

Hi everyone, I'm really enjoying this tool and the support form the community so far. I'm trying to wrap my head around how the timelines can be staggered, and specifically I'm trying to have simultaneous rotations happening at once. I'm trying to recreate this pen (which uses CSS animations) http://codepen.io/mikehobizal/pen/LimxH using GSAP instead. My work in progress is here: http://codepen.io/amoeboar/pen/MyrMqZ It's almost there, but it's not quite right. The main issue is that each rotation completes before the next one begins, whereas in the CSS animation it transitions between the different angle rotations at 0%, 25%, 50%, etc. So my question is: how can I create a more seamless animation between each rotation transition? Instead of: Rotate 180 degrees. Stop. Rotate 540 degrees. Stop. Rotate 900 degrees. Stop. I want instead something like: Rotate 180 degrees into 540 degrees into 900 degrees. Stop. Or perhaps I'm approaching this wrong? I'm open to any suggestions that might achieve the effect of replicating the CSS animation using GSAP. I would love some help while I try to wrap my brain around this. Thank you very much!

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!