easing

by Trevor Power

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://pomax.github.io/bezierjs/lib/bezier.js"></script>
<div id="none"></div>
<div id="swing"></div>
<div id="custom"></div>
<div id="linear"></div>

SCSS

div {
    width: 230px;
    height: 350px;
    background-color: #ddd;
    overflow: hidden;
    clear: none;
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 0px;

    h2{
        position: absolute;
        top: -20px;
        background-color: #aaa;
        display: inline-block;
        width: 230px;
        font-family: arial;
        text-align: center;
    }
    canvas {
        position: absolute;
        top: 378px;
        background-color: #aaa;
    }
    
    ul {
        padding: 0;
        margin: 0px;
        li {
            width: 200px;
            height: 100px;
            background-color: #F66;
            margin: 2px auto;
            list-style: none;
        }
    }
}

JavaScript

var animationDuration = 2200;

var colors = [
    "#F57A00", "#F5F500", "#7AF500", "#00F495",
    "#F50000", "#FF9933", "#7AF500", "#FFB870",
    "#F5007A", "#70B8FF", "#3399FF", "#00F5F5",
    "#F500F5", "#7A00F5", "#0000F5", "#007AF5", ];

function randomColor() {
    return colors[Math.floor(Math.random() * colors.length)];
}

var p1 = {
    x: 0,
    y: 0
};
var p2 = {
    x: 0.5,
    y: 0
};
var p3 = {
    x: 0.5,
    y: 1
};
var p4 = {
    x: 1,
    y: 1
};
var slope = 0;
var bezier = null;

$.easing['custom'] = function (percent) {
    var p = bezier.compute(percent);
    var d = bezier.derivative(percent);
    slope = d.y / d.x;
    return p.y;
}

var $container = $('div')
    .append('<h2 /><ul /><canvas />')
    .each(function () {
    $this = $(this);
    $this.find('h2').text(this.id);
    $this.find('canvas').prop({
        width: $this.width(),
        height: $this.width()
    });
});

var $list = $('ul');

function addItem() {

    var newItem = $('<li />')
        .css('background-color', randomColor())
        .appendTo($list);

    $container.stop();

    var newTop = $list.height() - $container.height();

    $('#none').scrollTop(newTop);

    $('#swing').animate({
        scrollTop: newTop
    }, {
        duration: animationDuration,
        easing: "swing"
    });

    $('#linear').animate({
        scrollTop: newTop
    }, {
        duration: animationDuration,
        easing: "linear"
    });

    var d = 0.5;
    var slope2 = slope * slope;
    var p2y = Math.sqrt((slope2 * d * d) / (1 + slope2));
    var p2x = slope === 0 ? d : p2y / slope;

    p2 = {
        x: p2x,
        y: p2y
    };

    bezier = new Bezier([p1, p2, p3, p4]);

    $('#custom').animate({
        scrollTop: newTop
    }, {
        duration: animationDuration,
        easing: "custom"
    });

}

function loop() {
    addItem();
    setTimeout(loop, Math.floor(Math.random() * 3500));
}

loop();

$container.each(function () {
    var c = $(this).data({
       ...