JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<script src="http://www.greensock.com/js/src/TweenMax.min.js"></script>
<p>Lorem Ipsum</p>
<span></span>
<div id="console"></div>

CSS

p {
  position:relative;

}

span{
  color:red;
  font-weight:bold;
}

.box{
  width:10px;
  height:10px;
  margin-top:1px;
  background-color:limegreen;
}

JavaScript

var tl,
    direction,
    prevProgress = 0,
    output = $("span");



tl = new TimelineMax({paused:true});

tl.to($("p"), 2, {css:{left:400}});


//insert callback functions into timeline every .2 seconds
for(i = 0; i< 2; i+=.2){
  tl.addCallback(specialFunction, i);
}

//if forward add dom element else remove last
function specialFunction(){
  if(direction === "forward"){
    $("#console").append('<div class="box"></div>'); 
  }else{
   $("#console div:last").remove();
  }
}


//simulate scroll
TweenMax.to(tl, 2, {progress:1, repeat:6, yoyo:true, onUpdate:getDirection});


function getDirection() {
  if(prevProgress < tl.progress()){
    direction = "forward";
  } else {
    direction = "reverse";
  }
    output.text(direction);
    prevProgress = tl.progress();
}