JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var element = $('#notification');
var animDuration = 1.2;
var animDelay = 2;
var animInterval = 2;
var animEaseOut = Expo.easeOut;
var animEaseIn = Expo.easeIn;
var data = [
    { id: 1, content: 'First Notification' },
    { id: 2, content: 'Second Notification' },
    { id: 3, content: 'Third Notification' }
];
var iter = 0;
TweenMax.set(element, {
    position: 'fixed',
    width: 400,
    height: 100,
    left: 20,
    bottom: 0,
    yPercent: 100,
    color: '#fff',
    backgroundColor: '#000',
    padding: 20
});
var tl = new TimelineMax({ paused: true, onComplete: onComplete, callbackScope: this });
tl.to(element, animDuration, { yPercent: 0, ease: animEaseOut });
tl.addLabel('fullyVisible');
tl.to(element, animDuration, { delay: animDelay, yPercent: 100, ease: animEaseIn });
$(element).on('mouseover', onOver);
$(element).on('mouseout', onOut);
//
setContent();
tl.play();

function onOver() {
    tl.pause();
    tl.tweenTo('fullyVisible');
}
function onOut() { tl.resume(); }
function onComplete() {
    if (iter > -1) {
    	setContent();
    }
    TweenMax.delayedCall(animInterval, function() { 
        if (iter > -1) {
        	tl.play(0);
        }
    }, [], this);
}
function setContent() {
    console.log(iter);
    element.html(data[iter].content);     
    iter = iter >= data.length-1 ? -1 : iter; 
    iter = iter + 1;  
}