JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<svg viewBox="0,0 400,400">
    <ellipse cx="200" cy="200" rx="100" ry="50" fill="lime"/>
    <text x="200" y="210">Bravo !</text>
</svg>

CSS

html, body { 
    margin: 0; 
    padding: 0; 
    overflow: hidden
}
svg { 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100% 
}
text {
    font-family: cursive; 
    font-size: 200%; 
    text-anchor: middle;
    fill: blue;
}

JavaScript

const tl = new TimelineMax()
tl.set('text', { autoAlpha: 0 })
.set('ellipse', { scale: .5, transformOrigin: 'center' })
.to('ellipse', 2, { scale: 1, rotation: 360, ease: Elastic.easeOut })
.to('text', 2, { autoAlpha: 1 }, "-=1.5")