.animate with a curve

Question

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?

http://stackoverflow.com/questions/2240052/how-would-you-animate-something-so-that-it-follows-a-curve — RightSaidFred, Nov 22 '11 at 20:50
YUI also provides support for curved animations. http://developer.yahoo.com/yui/examples/animation/control.html — Mike Christensen, Nov 22 '11 at 20:54

score 1 · Answer 1 · answered Nov 22 '11 at 20:51

1

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

Found this by googling "jquery radial motion"

answered Nov 22 '11 at 20:51

Evan Davis

35,493
6
50
57

matehat · Accepted Answer · 2011-11-22T21:29:14.140

1

You can use easing to achieve that, by doing a compound movement :

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 since jQuery 1.4, according to jQuery docs and the easings mentionned require jQuery UI (but only the Effect Core module). Each .animate() call accounts for a quarter of a full circle path, and the reverse easeInQuad vs. easeOutQuad makes the path looks like a circular path instead of straight to the new position.

edited Nov 22 '11 at 21:29

answered Nov 22 '11 at 21:11

matehat

5,214
2
29
40

hi matehat! i got this error in my error console: Error: f.easing[e.animatedProperties[this.prop]] is not a function Source File: file:///C:/Dokumente%20und%20Einstellungen/Administrator/Desktop/tyler/js/js/jquery-1.6.4.min.js Line: 4 – bernte Nov 22 '11 at 21:20
You probably need to include jQuery UI (only the Effects Core part), this [file](https://github.com/jquery/jquery-ui/blob/master/ui/jquery.effects.core.js) in particular. – matehat Nov 22 '11 at 21:24

danday74 · Answer 3 · 2021-05-18T21:37:50.697

A modern answer for 2021. You don't have to use jQuery for this. But I'm assuming you want to. You can use a trendy npm library like popmotion (600k downloads per week) in conjunction with jQuery like so:

// poo.el.animate({top: footerTop - horsePooHeight})

// your imports may vary - I'm using Angular, popmotion focuses more on Vue and React
import { cubicBezier } from 'popmotion'
declare const popmotion: any
const {tween, easing} = popmotion

const fling = cubicBezier(0, .42, 0, 1)
tween({from: 100, to: 200, duration: 400, ease: fling}).start((v) => $(el).css('top', v))
tween({from: 100, to: 300, duration: 400, ease: easing.linear}).start((v) => $(el).css('left', v))

Where el is a jQuery element.

Good news. Its got a whole world more power in terms of easing, allowing curves. Bad news is its a little more complicated but if you can understand the above code you will be fine.

PS I'm not saying popmotion should be used with jQuery. I'm just saying it can be.

PPS Never forget that J-E-S-U-S loves you :D

PPPS jQuery is fine for simpler animations, but the lack of interest in questions like this and the lack of updated on jQuery animation libs prove that jQuery on its own is dead for more complex animations.

.animate with a curve

3 Answers3

Linked