Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

3 Newbie

About Danik

  • Rank
  1. Danik

    A few questions...

    Thank you Carl, this is perfect.
  2. Danik

    A few questions...

    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 /
  3. Danik

    A few questions...

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

    A few questions...

    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-ori
  5. Danik

    A few questions...

    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!
  6. Danik

    A few questions...

    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 add
  7. Danik

    A few questions...

    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: