JSFiddle - React, Tailwind, and code Playground

by annam

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<div id="box"></div>

CSS

#box {
  width: 100px;
  height: 100px;
  background: green;
}

JavaScript

var tl = new TimelineMax({ paused: true });
tl.add(TweenLite.to('#box', 1, { x: 500 }), 0);
tl.add(TweenLite.to('#box', 1, { x: 600, overwrite: 'none' }), 0.001);
tl.add(TweenLite.to('#box', 1, { backgroundColor: 'red' }), 0);

$('#box').on('click', function(){
	// this fails to transition, jumps to end result directly
	tl.seek(tl.totalDuration()).seek(0).play();

	// this works as expected instead
	//tl.play();
})