.animate the curve

Question

First take a look:

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

When the cat falls into x, it should remain for 10 seconds, and after that the cat should return to o, again on the curve and repeat.

I tried this 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 moves like this:

Is there any way to make the cat move in this curve?

Answer 1

You can use easing to achieve this by performing a complex move:

 function curve () { $('#cat').delay(10000).animate({top: "+=20px", left: "+=20px"}, { duration: 500, specialEasing: {top: 'easeOutQuad', left: 'easeInQuad'}, complete: function () { $('#cat').animate({top: "-=20px", left: "+=20px"}, { duration: 500, specialEasing: {top: 'easeInQuad', left: 'easeOutQuad'}, complete: function() { // repeat the other way around. }}); } }); } 

It works with jQuery 1.4, in accordance with jQuery docs , and the mentioned softenings require jQuery UI (but only the Effect Core Module ). Each .animate() call takes into account a quarter of the full circle path, and the reverse easeInQuad vs. easeOutQuad makes the path look like a circular path, not directly to a new position.

Answer 2

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

This was discovered by googling "jquery radial motion"

Answer 3

There's a tiny script just for animation not in straight lines called pathAnimator