Motyar

Creating value through Programming

FREE VPS for 2 months
DigitalOcean
Cloud hosting for developers
20GB SSD, 512MB RAM - only $5 per month

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.

Idea

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.

Code

JavaScript(Jquery)

$("#element").click(
 function(){
           $("#element").animate({
             path : new $.path.arc({
                   center : [200,200],
                   radius : 150,
                   start : 0,
                   end     : -360 * 40,
                   dir : -1
               })
        },40000);
});


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.

DEMO

You can see the working demo here.

Labels: , ,


By :