JSFiddle - React, Tailwind, and code Playground

by hirako2000

HTML

<script src="https://rawgit.com/sasha240100/between.js/master/build/between.js"></script>
<h5 data-value=""></h5>

<div id="move" style="background: red; width: 20px; height: 20px; transform: translateX(1px);"></div>

<h5 data-state="">state: waiting</h5>

JavaScript

/** const value = document.querySelector('[data-value]');
const state = document.querySelector('[data-state]');

new Between(1, 10).time(5000).easing(Between.Easing.Cubic.InOut)
  .on('update', v => {
    value.innerText = `value: ${v.toFixed(2)}`;
  }).on('start', () => {
    state.innerText = 'state: running';
  }).on('complete', () => {
    state.innerText = 'state: complete';
  }); **/
  
const element = document.querySelector('#move');
const state = document.querySelector('[data-state]');

window.onload = () => setTimeout(() => { // Wait for page loading
  new Between(1, 400).time(5000).easing(Between.Easing.Cubic.InOut)
  	.on('update', v => {
    	element.style.transform = `translateX(${v}px)`;
  }).on('start', () => {
    	state.innerText = 'state: running';
  }).on('complete', () => {
   	 state.innerText = 'state: complete';
  });
}, 1000);