Cubic / Quadratic Bézier tween

by navinleon

HTML

<div class="moverA"></div>
<div class="moverB"></div>

CSS

.moverA {
    background-color: rgba(255,0,255,0.5);
    border-radius: 40px;
    position: absolute;
    display: block;
    height: 40px;
    width: 40px;
}
.moverB {
    background-color: rgba(0,255,255,0.5);
    border-radius: 40px;
    position: absolute;
    display: block;
    height: 40px;
    width: 40px;
}

JavaScript

function quadratic(t, x, y, z) {
    var ti = 1 - t;
    var ts = ti * ti;
    return ts * x + 2 * ti * t * y + t * t * z;
}

// Updated from http://www.antigrain.com/research/adaptive_bezier/index.html
function cubic(t, w, x, y, z) {

    var t1 = 1 - t; 
    var t2 = t1 * t1 * t1;
    var t3 = t * t * t;
    return t2 * w + 3 * t * t1 * t1 * x + 3 * t * t * t1 * y + t3 * z;
}

var start = {x:10, y:200};
var end = {x:500, y:200};
var controlA = {x:100, y:200};
var controlB = {x:500, y:200};

var $moverA = $('.moverA');
var $moverB = $('.moverB');
var tween = $({t:0});

// Animate a dummy object.
tween.animate({
    t: 1.0
},{
    duration: 3000,
    step: function(progress) {
        
        // Move along a quadratic Bézier.
        $moverA.css({
            left: quadratic(progress, start.x, controlA.x, end.x),
            top: quadratic(progress, start.y, controlA.y, end.y)
        });

        // Move along a cubic Bézier.
        $moverB.css({
            left: cubic(progress, start.x, controlA.x, controlB.x, end.x),
            top: cubic(progress, start.y, controlA.y, controlB.y, end.y)
        });
    }
});