inicio mail me! sindicaci;ón

CSS Transform Exporter for Blender

Following on from Creating CSS Animations, i have decided to release the exporter script used to create the animated orange test guy.

As the title implies, the exporter script runs in Blender. Simply construct a 2D scene using planes, add in an animation track, run the script and click Export. It’s as simple as that!

Each plane is exported as a HTML DIV. If present, any Ipos will be exported as CSS keyframes.

The exporter even supports parenting, so you can build up complex hierarchies of elements which can easily be transformed in an animation, or even javascript.

Note that currently the exporter only supports Webkit-based browsers (i.e. Chrome, Safari, MobileSafari). It also has limited support for Firefox (sans animations).

For the curious, there are 3 examples:

As for the actual exporter script, it’s available on github.

Happy animating!

EDIT: For those of you who for whatever reason want a video demonstration, there’s a video of it in action on youtube.

  • KaOS
    Nice work, I played around with it and i see many applications. I especially like the fact textures are taken along with it. SVG would be another possibility...

    I found a bug though. I extended your testImage demo with some squeezing on the image, and this would just freeze in the browser (like remain static) until I copied the last line from your original testimage.html < style > tag into my exported image.html. I think it has got something to do with the loop button, as the exported file did not end with "100%, but 98.83%"
  • rizkyramadhanih
    Amazing James http://j.mp/8koXnM
  • Great work, James! This ist _so_ awesome in a geeky creative way — _and_ it will likely be useful as well!
  • memals
    could do with a video or a new firefox release so we can all see it in action
  • James Urquhart
    Done. See post.
  • ronbravo
    lol. That is pretty awesome! I love all the extra things and side projects people are doing for Blender. Thanks for posting this and all works well in the Epiphany browser for Linux.
  • rikrd
    Wow! this is really neat. I really wasn't expecting this. This opens the door to so many directions... for when a JavaScript implementation of BGEs?

    Anyway, great job!
blog comments powered by Disqus