JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hide-load"></div>

<div class="welcome-overlay">
    <div class="welcome-text">
        <div class="welcome-text-animator">
            <div class="welcome-text-line">Hello!</div>
            <div class="welcome-text-line">I'm <h1 class="welcome-heading">Zach Saucier</h1>.</div>
            <div class="welcome-text-line">Here is what I love to make:</div>
        </div>
    </div>
</div>

<div class="content">
    <div class="main-header-container">
        <h1 class="main-heading transparent">Zach Saucier</h1>
    </div>
    
    <div>Some other content.</div>
</div>

<h1 class="moving-heading">Zach Saucier</h1>

CSS

*  {
    box-sizing: border-box;
}
.transparent {
    opacity: 0;
    user-selection: none;
}
.hide-load,
.welcome-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(20, 20, 20);
    color: white;
    transition: opacity 0.5s ease-in;
    z-index: 1;
    display: none;
}
.hide-load {
    display: block;
    animation: hide 0.5s forwards;
}

.welcome-text {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    padding-right: 30px;
    overflow: hidden;e
}

.welcome-text-line,
.main-header-container {
    text-align: right;
    font-size: 32px;
    line-height: 1.3em;
}
.welcome-heading,
.main-heading {
    font-size: 1em;
    display: inline;
    margin: 0;
}
.moving-heading {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    z-index: 2;
    display: none;
}

.welcome-heading {
    transition: transform 0.5s ease-in-out;
}

body {
    font-family: sans-serif;
    overflow: hidden; 
    background-color: black;
    color: white;
}

@keyframes hide {
    0%,99.999% { opacity: 1; }
    to { opacity: 0; }
}

JavaScript

var animator = document.querySelector(".welcome-text-animator"),
	hideLoad = document.querySelector(".hide-load"),
	welcomeOverlay = document.querySelector(".welcome-overlay"),
    welcomeTextLines = document.querySelectorAll(".welcome-text-line"),
    welcomeHeading = document.querySelector(".welcome-heading"),
    mainHeading = document.querySelector(".main-heading"),
    movingHeading = document.querySelector(".moving-heading"),
    origPosition = mainHeading.getBoundingClientRect(),
    startPos,
    startAnimationTime;

var EaseIn    = function(power){return function(t){return Math.pow(t, power)}},
	EaseOut   = function(power){return function(t){return 1 - Math.abs(Math.pow(t-1, power))}},
    EaseInOut = function(power){return function(t){return t<.5 ? EaseIn(power)(t*2)/2 : EaseOut(power)(t*2 - 1)/2+0.5}}

welcomeOverlay.style.display = "block";
animator.style.transform = "translateY(100%)";
window.onbeforeunload = function () {
	document.body.scrollTop = 0;
}
document.body.style.overflow = "hidden";

var doCommands = [],
	timeLineTime = 0,
    translateYSoFar = 0;
for(var i = 0; i < welcomeTextLines.length + 2; i++) {
	if(i === 0) { // Init setup
    	timeLineTime += 0;
    	doCommands.push([
			false, 
            JSON.parse(JSON.stringify(timeLineTime)), 
            function() {
        		animator.style.transition = "transform 0.3s ease-in-out";
				animator.style.transform = "translateY(" + animator.scrollHeight + "px)";
            }
        ]);
    } else if(i === welcomeTextLines.length + 1) { // Clear after all lines
    	timeLineTime += 2500;
    	doCommands.push([
			false, 
            JSON.parse(JSON.stringify(timeLineTime)), 
            function() {
        		// Calculate where the welcome heading is on the page
                var pos = welcomeHeading.getBoundingClientRect();
    
                // Set the moving heading to the exact same spot
                movingHeading.style.left = pos.left + "px";
               ...