JSFiddle - React, Tailwind, and code Playground

HTML

Click the text below to animate:

<div id="msg">Well Done!</div>

CSS

#msg { font-size: 40pt; font-weight:bold; text-align:center; line-height: 120pt; }

JavaScript

function smoothAnimation($selector, startPoints, points){
    var increments = 0.2;
    var currentPoints = startPoints;
    var endPoints = currentPoints + points;
    
    while(currentPoints < endPoints){
        currentPoints += increments;
        $selector.animate({"font-size": currentPoints.toString() + "pt"}, 1, "swing");
    }
}

$('#msg').click(function() {
    $msg = $('#msg');
    $msg.animate({"font-size": "80pt"}, 400, "swing");
    
    smoothAnimation($msg, 80, 10);
    
    $msg.animate({"font-size": "40pt"}, 400, "swing");
});