At FFW (formerly Propeople), we are always looking for ways to make the Drupal websites that we develop stand out and pop. So, let’s say you want to dynamically animate a simple vector shape, logo or even an whole image. What are the techniques you can choose?

There are GIFs - but that’s kind of boring.

Then there’s Video - but that’s huge and requires a lot of production time.

Today, I’d like to present you a beautiful alternative: Raphaël.  As it says on the official site, “Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web”.

This library is, simply put, amazing. If you need to be convinced, you can see a few great demos on the library homepage.

Ok, I know what you’re thinking...with any js library, the drawing is still a ton of work. So let me present to you the Jquery plugin for path animation using the Raphaël Library Lazy Line Painter. This plugin allow you to animate any SVG image and have a final product in just a few minutes. As you already noticed, we will use the SVG Path as the base (and don’t forget about client support).

Now, let’s see this in practice:

1. Export your line art from Illustrator as an .SVG

2. Go to http://lazylinepainter.info/ and convert your .SVG file into JS code.

3. Connect the jQuery, Raphaël & Lazy Line Painter libraries (download).

4. Paste Lazy Line code within a DOM ready function and enjoy the result.

Here’s a demo:

Additional parameters and action can be seen here.

Do you know other methods for achieving similar results? Make sure to leave a comment below. And feel free to contact us if you are intererested in exploring how FFW can make your website stand out using this and many other techniques.