JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<script src="http://www.greensock.com/js/src/TweenMax.min.js"></script>
<div class="box red"></div>

CSS

.box{
    position:absolute;
    width:50px;
    height:50px;
    
}

.red{
    background-color:red;
}

JavaScript

//create a stepped timeline which can be reversed, paused, time-shifted etc

var box = $(".box");

var myTween = moveABunchOfTimes(box, 20, 200, .3);


function moveABunchOfTimes(element, distance, amount, speed) {
  //generate a timeline that every .3 seconds moves the box 20px for 200 iterations
  var tempTimeline = new TimelineLite();
  for(i = 0; i < amount; i++){
    tempTimeline.set(element, {css:{left:distance*i}}, i * speed, 0);
  }
}