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!