JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div id="ball"></div>

CSS

html{
  height: 100%;
}
body{
  height: 100%;
  margin: auto;
}
#ball {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ff0000;
  position: fixed;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
}

JavaScript

var time = 0;

var ease = 1;

var ball = document.getElementById('ball');


function step() {

		ease = Math.sin(time/25);
  	
    let y = Math.sin(time/20); // 10 is to slow it down
    
    y = (y*20)+(ease*22);
    
    ball.style.transform = 'translateY(' + y + 'px)';
    
    time++;
    
    requestAnimationFrame(step);
    
    
  
}

requestAnimationFrame(step);