<h1 
    class="font-black text-6xl block duration-500 relative transform transition-all translate-y-12 ease-out" 
    data-replace='{ "translate-y-12": "translate-y-0" }'
    >
    Hells to the Yeah
</h1>

document.addEventListener("DOMContentLoaded", function(){
    setTimeout(function(){
        var replacers = document.querySelectorAll('[data-replace]');
        for(var i=0; i<replacers.length; i++){
            let replaceClasses = JSON.parse(replacers[i].dataset.replace.replace(/'/g, '"'));
            Object.keys(replaceClasses).forEach(function(key) {
                replacers[i].classList.remove(key);
                replacers[i].classList.add(replaceClasses[key]);
            });
        }
    }, 1);
});