Apr 9, 2010

Jquery animate - with custom paths

Today morning when i was struggling with a Jquery animation (for bubble effect), i wanted to move some elements( bubbles ) in a custom zig-zag path. With help of google i got idea that the sin wave can help me, i was trying to animate bubbles in a sin wave path. And finally i got it. I want to share it with you. Hope it will help you.

Animatation for arcs and bezier curves with jQuery

I got the jquery.path plugin. With help of that you can create a custom path animation.

jQuery.path

This simple plugin provides a method of multidimensional animation, and in particular provides a method for animating along bezier curves and arcs. It is trivial to create other paths, or even animate other parameters.

Code

Code is hosted on github.

Demo

Let us see some custom path animations here.

Show your twitter status on your page
Create your own gtalk robot with php
Freehand draw with Jquery
Show your twitter avatar on your page
Create a pointer trails with Jquery
CMD and Typewriter effect with jquery
Draw Rectangle with Jquery

Labels: Animation, Javascript, jquery

By : Motyar+ @motyar

Motyar