Gears - further experiments in HTML 5

Wed 15th 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!

---edit---
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!

Add new comment

Keep up to date: Receive the latest blog post by email

gears
html5

Rate this post:

Comments

Wednesday 15th Jun 2011 13:17

AEleen Frisch

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

Wednesday 15th Jun 2011 21:40

clintfern

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.

Thursday 16th Jun 2011 06:49

robives

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!

Thursday 16th Jun 2011 21:07

clintfern

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.