JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

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

JavaScript

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

// 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
    })
});
*/