JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div>&nbsp;</div>

JavaScript

// SteppedEase
///*
var t = TweenMax.fromTo('div', 4, {
    position: 'absolute',
    top: '10%',
    left: '50%',
    yPercent: -100,
    xPercent: -50,
    width: 100,
    height: 100,
    backgroundColor: '#cc0',
    pause:true
}, {
    top: '100%',
    ease: SteppedEase.config(20)
});


TweenMax.to(t, 4, {
    progress:1,
    ease: RoughEase.ease.config({
        template: Expo.easeOut,
        strength: 0.2,
        points: 20,
        taper: 'none',
        randomize: false,
        clamp: true
    })
});

/*var smiley = TweenMax.to("#smile", 1, {
  backgroundPosition:"0px -574px",
  ease:SteppedEase.config(41),
  paused:true
});
TweenMax.to(smiley, 3, { progress:1, repeat:-1, ease:Power4.easeInOut });*/



//*/

// RoughEase
/*
TweenMax.fromTo('div', 4, {
    position: 'absolute',
    top: '10%',
    left: '50%',
    yPercent: -100,
    xPercent: -50,
    width: 100,
    height: 100,
    backgroundColor: '#cc0'
}, {
    top: '100%',
    ease: RoughEase.ease.config({
        template: Expo.easeOut,
        strength: 0.2,
        points: 20,
        taper: 'none',
        randomize: false,
        clamp: true
    })
});
*/