.animate with a curve

bernte picture bernte · Nov 22, 2011 · Viewed 7.2k times · Source

First take a look:

enter image description here

The cat needs to move to the x in a curve. (see the arrow)

When the cat hits the x, it should stay 10 seconds, and after that the cat should go back to o, again in a curve, and repeat.

I tried it with this code:

function curve() {
    $('#cat').delay(10000).animate({top: '-=20',left: '-=20'}, 500, function() {
        $('#cat').delay(10000).animate({top: '+=20', left: '+=20'}, 500, function() {
            curve();
        });
    });
}

curve();

But the cat is moving like this:

enter image description here

Is there a way to get the cat to move in this kind of curve?

Answer

Mathletics picture Mathletics · Nov 22, 2011

http://tympanus.net/codrops/2010/05/07/stunning-circular-motion-effect/

Found this by googling "jquery radial motion"