Danik

Thank you Carl, this is perfect.

Hey guys, I ran into another small problem. I am now trying to add a restart button which works.. but there are a couple of weird glitches. Since there are multiple timelines nested it seems to record the state of one of them and reverts to in some parts instead of to the beginning. I thought that honoring the delay on the restart would be a fix. Is there a way to restart a whole function instead of each timeline separately? I tried a few other ways as a workaround the infinite repeat + starting the next timeline (as stated by Jack above) but none of them worked properly / would it even matter in this scenario?. Suggestions? I updated the CodePen to this: http://codepen.io/anon/pen/LkrpYL Cheers.

Hey Robert, That did it! Thanks a bunch - truly appreciate it. Cheers!

So the only way to make an object rotate around its own center is to match the object's center (fill-box) to that of the SVG's center (viewBox)? Meaning that you can not have an object not in the center of the SVG and be able to achieve a rotation around the object's center until the transform-box property becomes readily available? My object's fill-box center does not match the SVG's viewBox center... yet it is rotating around its own center in both Chrome and Firefox, while the other two objects are identical and behave differently. I can't even use exact values for the transform-origin since if I match it to Firefox then both chrome and IE will not work properly. If I change the viewBox and move the center then I can only ever achieve the rotation on one object according to this, while I have three. Am I understanding this correctly? Is there a workaround? Please take a look at the Codepen if you have a minute and see that the object is not centered as you assumed (unless I am wrong here too) http://codepen.io/anon/pen/WxJQQr Thank you.

Hey Robert, Thanks for the info, I managed to fix the stop-color fill thanks to you. As for the rotation I am still quite confused.. maybe I am missing something important. Do I apply transform-box:fill-box; in my CSS to the path I am trying to get the trasform-origin of? to the whole SVG? Something else? Also - what doesn't make sense to me the most is that one of the gears is properly rotating around its center, all gears have the same animation, and practically the same code. Why would you reckon that one works perfectly yet the others do not? Cheers!

Hey, Thanks for the reply. I am definitely getting the hang of it as I go here. I took a look at the videos, but there was no mention on how to sequence a tween during a previous tween that is on infinite loop, was I right to create new timelines? I ended up solving my IE issue after hours of trying.. for some reason if the two stop colors are the same then it doesn't work but as soon as I switched the second stop color to anything else it seemed to do the trick (along with some minor tweaking of y %). Firefox is still being a pain though... I did what you suggested and added values to the y tweens, but it still seems to do the same thing. Also I was using Firefox 35 on Windows 10 - ended up upgrading to the newest 47 version which didn't change a thing. I see the big gear rotating properly around its center but the two smaller ones do a 360 around what seems to be 0,0. Does it work properly on yours? Maybe something on my end is just messed up.

Hello everyone, I would like to start by apologising for the oh so abstract title, my questions vary quite a bit. I recently began working with SVG animations, started with SMIL, continued to Velocity.js, and then found out about GSAP and its great browser support - so here I am. Bearing this in mind, while looking at my Codepen if you guys find anything I did wrong or simply something you would have done differently be it in the SVG, or the GSAP implementation please do not hesitate to mention it. So in the following Codepen that I am currently working on I ran into a few issues: http://codepen.io/anon/pen/WxJQQr?editors=1010 1. On Firefox the cup sections fill up and then return to their original state, for those familiar with SMIL it had the option of fill="freeze" in its animate which would stop the animation at its end state. I am looking for something similar in GSAP - or perhaps something else. 2. On Firefox one of the gear does a proper rotation around the center transform-origin while two of the gears decided to do their own thing. 3. In Internet Explorer, the cup does not even fill up. It doesn't seem to be anything wrong with my linear gradient as the inside of the gears does fill up but has a lower opacity than it should. 4. I ended up solving this with adding a negative delay, but what would be the proper way of starting an animation while another one is still in progress in GSAP? Would it be making a new timeline? (I also solved the issue of infinite repeat by creating a new timeline - is this the right approach?) 5. And a quickie - which combination of TweenLite + extras would I need to maintain this at minimal file size? Any help would be greatly appreciated. Thanks in advance!