Animation effects with Canvas and the YUI

Take a look at this demo I’ve knocked up.

Wiggle the slider and see what happens. It’s a terrible learning object, but it’s just an exploration of how easy it is to set up using HTML, CSS and JavaScript. No, really! Look at the source code and there’s no flash or other plugins involved. It’ll work more slowly in IE than Firefox, but works in both, at least on Windows.

I’m using the Canvas tag, which is natively supported by Firefox and Safari. Thanks to the excanvas library provided by Google, adding canvas functionality to IE is really easy.

I know that SVG (scalable vector graphics) has many advantages over canvas, and may be the way things go in the future but canvas has the key advantage that you can use it right now in modern browsers without needing plugins.
Also, the way of working with canvas is reminiscent of the graphics commands of computers back in the early 1980s, which is a good thing to anyone who grew up with those computers.

The slider is part of the Yahoo User Interface (YUI) library and the animated text is a YUI animation motion.

Plugging the things together, and to other things on the page (e.g. the web form) just requires a bit of JavaScript. I’ve long wanted to be able to make interactive web pages this easily.


5 Responses to “Animation effects with Canvas and the YUI”

  1. tomgidden Says:

    I’ve also been playing around with canvas:

  2. Martin Poulter Says:

    That’s amazing! Thanks for that Tom. Sophisticated stuff: is the idea that it builds towards some sort of physics engine? For the best game of “breakout” ever, perhaps? I’ve also been experimenting with Fractals in canvas: haven’t linked the results because they do tend to freeze up the browser.

    For my fellow Ancient Geeks, I should say that Tom has a long history of doing impressive stuff with the web in the commercial sector, including a WYSIWYG PDF authoring tool using dynamic HTML (not available on the public Web, alas). I expect I’ll be referring to his work a lot on this blog in future.

  3. tomgidden Says:

    Thanks for the props, Martin 🙂

  4. Tom Gidden : Mechanics Experiments with <canvas> Says:

    […] seeing some experiments done by my friend Martin, I’ve thrown caution to the wind and decided to publicise my egregious lack of mathematical […]

  5. The Ancient Geeks What you can do with JavaScript « Says:

    […] already discussed using JavaScript to draw and animate lines, shapes, gradients and images on the screen. As well as basing this on Canvas (and the Excanvas library, again thanks Google), you can do this […]

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: