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({ 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 });
setContent();

function onComplete() {
    setContent();
    TweenMax.delayedCall(animInterval, function() { tl.play(0); }, [], this);
}

function setContent() {
    element.html(data[iter].content);
    iter = iter + 1;
    iter = iter > data.length - 1 ? 0 : iter;
}