Rack and Pinion in HTML5

Sun, 5 Jun 2011

Here’s a quick experimental animation I created using program called hype that helps create animations in HTML 5 and CSS3. All things being equal I’d carry on creating animations using Flash but Steve Jobs, in all his infinite wisdom, has taken against Flash for some reason. The end result is that users of iphones and ipads can’t see the animations on my site.

The question is, then, can you see this animation okay? If you can (or can’t) please let me know by comment below or by email letting me know which computer and which browser you are using. Thanks!

  To receive new blog posts by email

Comments (14)

  • Carol June 5, 2011 at 9:58 pm

    I can see it!
     
    PC with I.E.

    I can see it!

     

    PC with I.E. 8

  • JayHavvic June 5, 2011 at 10:48 pm

    Yahoo, I can see the

    Yahoo, I can see the animation on my iPhone 3Gs 16gig. It uses Safari. I can also see it on my Windows Vista pc using Firefox 4.0.1,

     

    Thanks!

    J

  • aeleen June 6, 2011 at 12:15 am

    Works in latest Safari and

    Works in latest Safari and Firefox on my Mac.

  • gwladys June 6, 2011 at 12:57 am

    Works on an old XP using
    Works on an old XP using Google’s Chrome

    However, the Rich-text made a mess of the comment – had to edit

  • Bo König June 6, 2011 at 5:04 am

    It works just fine on my iPad

    It works just fine on my iPad (first generation). 

    I guess that's what Steve Jobs betted on, in all his infinite wisdom: that smart producers would start using the standards-based tools. 🙂

      Bo

  • Smelter June 6, 2011 at 9:21 am

    Yes on a PC XP Pro with

    Yes on a PC XP Pro with IE8

    But… the last tooth to mesh on the wheel on the RHS has its end chopped off, and the axis of the wheel dips up and down three times in the distance it travels from one end to the other.

  • Andy from Workshopshed June 6, 2011 at 11:40 am

    It’s visible in Firefox 4.0.1

    It's visible in Firefox 4.0.1 but the meshing of the gear and rack goes a bit astray when the rack moves to the far right.

     

  • daveyboy June 6, 2011 at 1:15 pm

    Same problem as Smelter and

    Same problem as Smelter and Andy

  • RobS June 6, 2011 at 1:18 pm

    I’m on PC XP Pro IE8 and I

    I'm on PC XP Pro IE8 and I get the same issues as Smelter. Also note the cog renders with a scratchy black circular outline.

    PC XP Pro Firefox 3.6.16 has issues too – Andy from WorkshopShed describes those accurately. Also note the cog renders with a visible white circular outline — maybe its an anti-aliasing or masking artifact.
     
    Some comments above say that they can see it, but at what quality? and what about the accuracy of the animation?

    • robives June 6, 2011 at 4:11 pm

      Thanks for the feedback

      Thanks for the feedback everyone, it was very useful! I'll sort out the alignment problems and re-upload the animation. I think Bo is right, for standards sake HTML 5 is the way to go. I'm glad I came across it before I had re-done all the animations in the mechanism section!

      • frankenpaper June 8, 2011 at 12:07 am

        If you have already created

        If you have already created the cells of the animations for Flash, then why not use those cells to create GIF animations. If I am not mistaken, GIFs run on MAC as well as PC. Of course it is easy for me to say when you have to do all the work. 🙂

        • robives June 8, 2011 at 9:41 am

          Animated gifs are fine but

          Animated gifs are fine but the file size is large. I tried exporting the dwell animation from an earlier post and it was over 500k for poor quality output.

  • Morgantao July 3, 2011 at 7:38 am

    I was wondering, what program

    I was wondering, what program do you use to create the gears in your animations…

    I've been trying to find a way to animate gear systems accuratly, but was unable to find a way to draw the gears with the right number size teeth to interlock correctly.

    • robives July 3, 2011 at 4:47 pm

      I use Adobe Illustrator to

      I use Adobe Illustrator to create the graphics for animations.

Comments are closed.