Easing test

by Soviut

HTML

<div id="obj"></div>

CSS

#obj {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    
    background: red;
}

JavaScript

var obj = $('#obj');

function easeOutSine(t, b, c, d) {
    return c * Math.sin(t/d * (Math.PI/2)) + b;
}

var duration = 5000;
var from = 0;
var to = 300;

var startTime = new Date().getTime();
var currentTime = startTime;
var diff = 0;

var timer = setInterval(function() {
    currentTime = new Date().getTime();
    diff = currentTime - startTime;
    if (diff > duration) {
        clearInterval(timer);
    }
    pos = easeOutSine(diff, from, to, duration);
    
    obj.css('left', pos + 'px');
}, 16);