JSFiddle - React, Tailwind, and code Playground

by Vladimir Sobolev

HTML

<div id="b">

<div id="a"></div>

<div id="c"></div>
    
</div>

CSS

#b {

    width:500px;
    height:500px;
    overflow:hidden;
        
    background:#eee;
    position:relative;
}

#a, #c {
 height: 1px;
 width: 1px;
   overflow:hidden;
 background-color: green;
 position: absolute;
 left: 0;
  top:0;
    
    -webkit-transform: translate3d(0,0,0);
}

#c {

    width:10px;
    height:10px;
    background:red;
    
}

JavaScript

/**
 * t - The time between 0 and 1
 * millisecondsSince - The milliseconds since the start of the animation
 * startValue - hardcoded to 0
 * endValue - hardcoded to 1
 * totalDuration - The millisconds that the animation will run
 *
 * Return a value between 0 and 1, with 0 being the start and 1 being the end
 *
 * This example shows the object over-shooting by double and then coming back
 */
$.easing.line = function(t, millisecondsSince, startValue, endValue, totalDuration) {    
    return t;
};
    
            var s = 10,
                k = .9,
                d = 500,
                pi = Math.PI;
            
            $.easing.tan = function (x, t, b, c, d) {
                    pi = Math.PI;
                    y = Math.tan((x-.5)*k*pi)/s+.5;
                    
                    return (t==d)?d:y;
                }

            function ani() {
                
                    $('#c').animate({left: 490}, 3000, 'tan').animate({left: 0}, 3000, 'tan',function() {
                        ani();
                    });
                
            };

            
            for (i=0;i<=d;i+=.5) {
                x = i/d; 
                y = Math.tan((x-.5)*k*pi)/s+.5;
                $('#b').append($('<div>',{id:'a'}).css({top:d*(1-y),left:i}))            
            }
            
            ani();