Gears – further experiments in HTML 5

Wed, 15 Jun 2011

Further experiments with HTML 5 and CSS 3 to create animations. HTML 5 and CSS 3 are – I’m hoping – the new, upcoming standards for web based animation. The authoring tools aren’t anywhere near as slick as Flash yet so it’s taking me a while to get this right. as From what I can see this gear seems to mesh a bit better than the Rack and Pinion animation. I can see it okay on the browsers on my Mac and iPhone. Please let me know if it works for you, or if it doesn’t!

Hmm, in Firefox the two gears drift towards each other as they rotate as if they are not rotating about their centres.

It was easier with Flash!

  To receive new blog posts by email

Comments (4)

  • AEleen Frisch June 15, 2011 at 1:17 pm

    Works fine in Safari and

    Works fine in Safari and Chrome on my Snow Leopard Intel-based Mac and on my Android phone. Definitely messed up in Firefox. 

  • clintfern June 15, 2011 at 9:40 pm

    Chrome & Safari work for me

    Chrome & Safari work for me well.

    Firefox 5 just a bit out.

    Opera – it made my eyes hurt!


    Looking at the source there is a hype_rotate="-38.609999656677246deg" and then  3; -moz-transform: rotate(-38.61deg)

    so I'm guessing that the lesser precision in the -moz-transform is causing the problem.

    Lack of -o-transfrom and -ms-transform will stop it working – to get to work accurately you'd probably need –

    -webkit-transform: rotate(-38.609999656677246deg);
               -moz-transform: rotate(-38.609999656677246deg);
               -o-transform: rotate(-38.609999656677246deg);
               -ms-transform: rotate(-38.609999656677246deg);
               /* css3 */
               transform: rotate(-38.609999656677246deg);
    although I'm guessing you using a bit of software that 
    generates the code for you.
    • robives June 16, 2011 at 6:49 am

      Clint: I’ve being using Hype

      Clint: I've being using Hype to create animations. I understand that Adobe is producing a tool soon called Adobe Edge. I'm still not convinced by the HTML 5 route, I know it should be the way forward but the technology just doesn't seem to be there yet. Having to write separate code for each browser is just silly.

      I like Flash, it is a mature and stable creation tool but I understand the arguments against it. I'll keep struggling forward with web standards and hope that they mature quickly!

      • clintfern June 16, 2011 at 9:07 pm

        There should be a tool that

        There should be a tool that creates code for all the browsers – I think the logic behind the -webkit, -moz etc prefixes are these are used by the vendors for experimental techniques. I'm guessing with the fast turnaround on Chrome & Firefox builds these will disappear over a relatively short period of time, but Internet Explorer? Not likely, you can't even get past IE8 unless you have Win 7. Long time until its standard.

        Flashs main problem seems to be Apples attempts to kill it off.

        I think the best current route would be through jquery.

Comments are closed.