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>

CSS

p {
  position:relative;

}

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

JavaScript

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



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

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

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


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