JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
<button>Start</button>
<div style="background:#98bf21; height:100px; width:100px; position:absolute;">
  <span id="hidden_txt">Hey, just checking !</span>
</div>

JavaScript

var div = document.querySelector('div');
var span = document.querySelector('#hidden_txt');
var timeline = new TimelineMax({
  paused: true,
  reversed: true
});

timeline.to(div, 0.4, {
  height: 250,
  ease: Power4.easeInOut
});
timeline.fromTo(span, 0.4, {
  autoAlpha: 0
}, {
  autoAlpha: 1,
  ease: Power4.easeInOut
});

$('button').click(function() {
  timeline.reversed() ? timeline.play() : timeline.reverse();
});