JSFiddle - React, Tailwind, and code Playground

HTML

<div id="projectContainer" style="display:none;">
  <div id="scrollButtonUp" class="scrollIndicator">
    <span style="font-size:5vh; color:#333; line-height:5vh;">&#x21d1;</span>
    <br> Scroll Up
  </div>
  <div id="projectContainer">
    <div id="messageOne" class="message" style="display:block;">
      <div id="messageOneTextContainer">
        <div id="messageOneText">
          Dear Philip
        </div>
        <div id="messageOneBow">
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
    <div id="messageTwo" class="message">
      <div id="messageTwoTextContainer">
        <div id="messageTwoText" style="font-size:7vh;">
          Thank you for two years and two months of your friendship!
        </div>
      </div>
    </div>
    <div id="messageThree" class="message">
      <div id="messageThreeTextContainer">
        <div id="messageThreeText" style="font-size:7vh;">
          Life wouldn't be the same without you.
        </div>
      </div>
    </div>
  </div>
  <div id="scrollButtonDown" class="scrollIndicator">
    Scroll Down
    <br><span style="font-size:5vh; color:#333; line-height:5vh;">&#x21d3;</span>
  </div>
  <div id="pauseButton">
  Pause Audio
  </div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Raleway:100,400);
@import url(https://fonts.googleapis.com/css?family=Lato:100,400);
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
  overflow: hidden;
}

#projectContainer {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
}

#projectContainer * {
  -o-transition: all .7s ease;
  -moz-transition: all .7s ease;
  -webkit-transition: all .7s ease;
  -ms-transition: all .7s ease;
  transition: all .7s ease;
}

.message {
  -o-transition: transform .7s, left 2s ease, block 0s;
  -moz-transition: transform .7s, left 2s ease, block 0s;
  -webkit-transition: transform .7s, left 2s, block 0s;
  -ms-transition: transform .7s, left 2s, block 0s;
  transition: transform .7s, left 2s, block 0s;
  color: #333;
  padding-top: 8vh;
  padding-bottom: 8vh;
  padding-left:1vw;
  padding-right:1vw;
  -o-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
}

* {
  font-family: 'Raleway', sans-serif;
  /*font-family: 'Lato', sans-serif;*/
  font-weight: 100;
  color: #fff;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-font-smoothing: subpixel-antialiased;
}


/*specific message styles*/

#messageOne,
#messageTwo,
#messageThree {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
}

#messageOneTextContainer,
#messageTwoTextContainer,
#messageThreeTextContainer {
  position: absolute;
  top: 50%;
  -o-transform: translate(0%, -50%);
  -moz-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  width: 100%;
  padding-right:2vw;
  -o-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -ms-box-sizing:border-box;
 ...

JavaScript

window.addEventListener('load', function() {
  var scrollIndicatorTransitionTime = 1000; //based on transition time of the scroll indicator labels

	//load background audio
  var backgroundAudio = new Audio("https://drive.google.com/uc?export=download&id=0");
  var audioLoaded = false;
	backgroundAudio.oncanplaythrough = function() {
    audioLoaded = true;
    backgroundAudio.play();
	};
  window.setTimeout(function(){
  	if(!audioLoaded){
    	backgroundAudio = null;
      console.error("Loading of audio is taking longer than 10 seconds; cancel loading");
    }
  },10000);

	//add pause audio handler
  document.getElementById('pauseButton').onmousedown = function(){
  	if(backgroundAudio){
    	if(backgroundAudio.paused){
      	console.log('play audio');
    		backgroundAudio.play();
      }else{
      	console.log('pause audio')
      	backgroundAudio.pause();
      }
    }
  };


  //show the content after it is loaded
  document.getElementById('projectContainer').style.display = 'block';

  //hide all messages except messageOne
  var messages = document.getElementsByClassName('message');
  messages[0].setAttribute('data-x-pos', '0vw');
  for (var i = 1; i < messages.length; i++) {
    messages[i].style.display = 'none';
    messages[i].setAttribute('data-x-pos', i * 100 + 'vw');
    messages[i].style.left = i * 100 + 'vw';
  }

  //animate the opening bow
  window.setTimeout(function(){
  	document.getElementById('messageOneBow').style.width = '90%';
  	var bowDivs = document.getElementById('messageOneBow').getElementsByTagName('div');
  	bowDivs[0].style.width = '10vh';
  	bowDivs[1].style.width = '8vh';
  },0);

  var scrollStatus = {
    wheeling: false,
    functionCall: false,
    swappingMessages: false
  };

  var steps = {
    nextStep: function(elem) {
      //move to the next message if there is another step
      if (messages[this.currentStep.index + 1]) {
        scrollStatus.swappingMessages = true;
        elem.setAttribute('data-zoom', '');
 ...