JSFiddle - React, Tailwind, and code Playground
by Tahir Ahmed
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div> </div>
JavaScript
var div = document.querySelector('div');
TweenMax.set(div, {
position: 'absolute',
top: '50%',
left: '50%',
yPercent: -50,
xPercent: -50,
width: 100,
height: 100,
backgroundColor: '#000'
});
var timeline = new TimelineMax({ paused: true });
timeline.to(div, 3, { scale: 2 });
$('body').data('someTimeline', timeline);
timeline.seek(1);
console.log("$('body').data('someTimeline').time() =", $('body').data('someTimeline').time());
$('body').data('someTimeline').play();
setTimeout(function() {
console.log('timeline.time() =', timeline.time());
timeline.reverse();
setTimeout(function() {
console.log("$('body').data('someTimeline').time() =", $('body').data('someTimeline').time());
}, 3000);
}, 2000);