JSFiddle - React, Tailwind, and code Playground
HTML
<script src='https://rawgit.com/Rich-Harris/eases/es6/dist/eases.umd.js'></script>
<select></select>
<svg>
<line class='axis' x1='50' x2='450' y1='250' y2='250'></line>
<line class='axis' x1='50' x2='50' y1='50' y2='250'></line>
<polyline></polyline>
</svg>
<div class='animation'>
<div class='track'></div>
<span class='dot'></span>
</div>
CSS
body {
font-family: 'Helvetica Neue', arial, sans-serif;
font-weight: 200;
color: #353535;
}
select {
display: block;
}
svg {
width: 500px;
height: 300px;
}
.axis {
stroke: #999;
}
polyline {
stroke: #d00;
stroke-width: 2;
fill: none;
}
.animation {
position: relative;
width: 60%;
left: 50px;
padding: 1em 0;
border-left: 1px solid black;
border-right: 1px solid black;
}
.track {
position: relative;
width: 100%;
height: 0;
border-bottom: 1px solid black;
}
.dot {
position: absolute;
width: 1em;
height: 1em;
border-radius: 50%;
background: red;
transform: translate(-0.5em,-0.5em);
}
JavaScript
var interval = 0.01;
function xScale ( t ) {
return 50 + t * 400;
}
function yScale ( t ) {
return 250 - t * 200;
}
var select = document.querySelector( 'select' );
Object.keys( eases ).forEach( function ( key ) {
var option = document.createElement( 'option' );
option.textContent = key;
select.appendChild( option );
});
var polyline = document.querySelector( 'polyline' );
var ease;
function change () {
ease = eases[ select.value ];
var points = [];
for ( var t = 0; t < 1.01; t += interval ) {
points.push( xScale( t ) + ',' + yScale( ease( t ) ) );
}
polyline.setAttribute( 'points', points.join( ' ' ) );
}
select.addEventListener( 'change', change );
change();
var dot = document.querySelector( '.dot' );
function loop () {
requestAnimationFrame( loop );
var t = ( Date.now() % 2000 ) / 2000;
var eased = ease( t );
dot.style.left = ( eased * 100 ) + '%';
}
loop();