Creating value through Programming

Aug 25, 2010

Jquery Animate in Circular Path

Animations on web pages are no more with flash, We are now doing all that things with JavaScript(Jquery animate). As you know we can animate an element in custom paths with the path plugin. Today we will learn How to animate an element in circular path or over a circle using Jquery.


The jquery path plugin for animation supports custom paths like Arcs, Curves etc. Here in this post i am trying to code a curve like circle.



             path : new $.path.arc({
                   center : [200,200],
                   radius : 150,
                   start : 0,
                   end     : -360 * 40,
                   dir : -1

Here in this code element is your target element to animate, you can customize the center, radius, start, end and direction.
Do not forget to include path plug-in.


You can see the working demo here.

Labels: , ,

By :