ZachSaucier

Wonderful, that is exactly what I'm looking for (: Is there no way to have the initial starting positions mid animation? And do you have any idea why the `rotationY` doesn't have an effect? Thanks guys for all your help

Awesome, thanks for the great responses! I didn't expect such extensive answers. I come from the CSS animation side of things with no Flash experience actually, haha. I got into GSAP a little after you, Jack, commented on one of my CSS-Tricks articles. The (evidently now deprecated) methods I used were in some examples I looked at. The business I'm looking to work for this summer also would like someone skilled at GSAP, so I figured I'd pick it up some more. As for the methods you proposed, they're great and likely better than what I had, but ultimately not quite attaining the full functionality that I'm looking for. Admittedly you solved my original question posted here about the timings, thanks again, but I had a version with just two repeating Tweens that functioned as yours do. My need for a timeline as well is to serve my final objective: to slow down (but not stop) the animation on hover in a smooth way. That's what the atom.onmouseover = function() { timeline.timeScale(.2); } was trying to accomplish. However, the `onmouseover` fires but the animations still go at the same speed. Any idea why that is the case? Also, is there a way to gradually change the time scale as opposed to changing it instantly? Thanks again for the great aid you've provided, I'll be going through all of the links reading what they have to offer

Greetings, I have been at this for a couple of hours now to no avail. I am trying to append some tweens to a timeline and use negative delays to offset them (they are the same animation otherwise). My problem is that the timeline is waiting each to finish before restarting, which is what I do not want Here's a link to what I have so far http://codepen.io/Zeaklous/pen/sGbku and my code: var timeline = new TimelineMax({repeat:-1}), electrons = document.querySelectorAll('.electron'), paths = document.querySelectorAll('.path'), atom = document.querySelectorAll('#atom'), startDuration = 2; for(var i = 0; i < electrons.length; i++) { var myDelay = -(i * 0.5); orbit(electrons[i], paths[i], myDelay); } function orbit(electron, path, delay) { var e = TweenLite.to(electron, startDuration, {rotationY:'-360', ease:Linear.easeNone, onComplete: function(){ //e.restart(); }, delay:delay }); //timeline.append(e); var p = TweenLite.to(path, startDuration, {rotationZ:'360', ease:Linear.easeNone, onComplete: function(){ //p.restart(); }, delay:delay }); //timeline.append(p); // The following line doesn't seem to add a negative offset... timeline.insertMultiple([e, p], 0, TweenAlign.START, -0.5); } atom.onmouseover = function() { timeline.timeScale(.2); } function TweenAlign() { } If you look at the demo it runs correctly the first iteration (before it's added to the timeline) but fails the next times Can you guys help me get this looking the way I'd like it to? Thanks