JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

<span id="t"></span>
<div class="dot a"></div>

CSS

html, body {
    overflow: hidden;
    margin: 0;
}

.dot {
    border-radius: 50px;
    position: absolute;
    margin-left: -50px;
    margin-top: -50px;
    height: 100px;
    width: 100px;
    top: 50%;
}

.a {
    background: #DD4B39;
}

JavaScript

var a = document.getElementsByClassName('a')[0];
var start = window.innerWidth * 0.1;
var end = window.innerWidth * 0.9;
var t = 0;

function cubic(t, w, x, y, z) {
    var ti = 1 - t;
    var ts = ti * ti;
    // linear combination of two quadratic curves
    return ti * (ts * w + 2 * ti * t * x + t * t * z) + t * (ts * w + 2 * ti * t * y + t * t * z);
}

function update() {
    
    if( (t += 0.01) > 1 ) t = 0;
    
    var n = cubic( t, 0, 1, 1, 0 );
    
    var x = start + (end - start) * n;
    
    a.style.webkitTransform = 'translateX(' + x + 'px)';
    document.getElementById('t').innerHTML = t.toFixed(2);
    
    setTimeout( update, 1000/60 );
}

update();