CODEWITHSUNDEEP
javascriptjqueryhtmljquery-animatecurve
bernte
bernte

Reputation: 1184

.animate with a curve

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?

Upvotes: 7

Views: 7572

Answers (3)

danday74
danday74

Reputation: 56956

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. It's got a whole world more power in terms of easing, allowing curves. Bad news is it's 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 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.

Upvotes: 0

matehat
matehat

Reputation: 5374

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.

Upvotes: 1

Evan Davis
Evan Davis

Reputation: 36592

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

Found this by googling "jquery radial motion"

Upvotes: 1

Related Questions