JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenMax.min.js"></script>
<div id="fullPage">
    <svg class="gridPage" preserveAspectRatio="none">
        <line x1="0" y1="50%" x2="100%" y2="50%" class="strokeGrid"/>
        <line x1="50%" y1="100%" x2="50%" y2="0" class="strokeGrid"/>
    </svg>
</div>

<div class="wrapper ecampus">
    <div class="top-left">

        <div class="corner-title">E-CAMPUS<span>.01</span></div>
        <div class="text-project">
            Sed mollis vestibulum aliquam. Morbi a sapien blandit, ornare ante in, hendrerit augue. Fusce euismod lacus
            a tempor mollis. Vestibulum posuere quam tellus, eleifend auctor mauris viverra at. Sed sapien justo,
            tincidunt in ullamcorper at, suscipit sed nunc. Vivamus nibh lectus, molestie sed lacus ut, tempus ultricies
            magna <br/><br/>
            Nam cursus tortor ut accumsan interdum. Integer sed lacinia tellus. Mauris dolor libero, aliquam vulputate
            tortor ac, finibus ultricies enim. <br/><br/>

        </div>
    </div>
    <div class="top-right">
        <nav>
            <ul class="cf">
                <li>
                    <a class="open-ecampus"><span class="active">01</span></a>
                    <ul class="dropdown">
                        <li><a class="open-ecampus">E-CAMPUS</a></li>
                    </ul>
                </li>
                <li>
                    <a class="open-pegasebuzz">02</a>
                    <ul class="dropdown">
                        <li><a class="open-pegasebuzz">PEGASEZBUZZ</a></li>
                    </ul>
                </li>
                <li>
                    <a class="open-notrecoin">03</a>
                    <ul class="dropdown">
                        <li><a class="open-notrecoin">NOTRE COIN</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
    <div class="bottom-left">
    </div>
    <div...

CSS

body {
    background: #141415;
    margin:0;
    padding:0;
    overflow:auto;
    font-family: 'Montserrat';
}
#fullPage {
    /*    box-shadow: inset 0px 0px 200px 100px rgba(0, 0, 0, 0.1);*/
    width: 100vw;
    height: 100vh;
    outline: 17px solid ;
    outline-offset: -40px; 
    position: fixed;
}
.gridPage{
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    padding: 40px;
    position: relative;
}
.strokeGrid {
    stroke-width: 17;
    stroke: #0c0c0d; 
}
.wrapper {
    width: calc(100vw - 80px);
    height: calc(100vh - 80px);
    padding: 40px;
}


.top-left {
    width: calc(50% - 9px);
    height: calc(50% - 9px);
    display: inline-block;
    vertical-align: top;
    /*    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 255, 0.2);*/
}
.top-right {
    width: calc(50% - 9px);
    height: calc(50% - 9px);
    margin-left:13px;
    display: inline-block;
    vertical-align: top;
    /*    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 255, 0.2);*/
}
.bottom-left {
    width: calc(50% - 9px);
    height: calc(50% - 9px);
    display: inline-block;
    margin-top:18px;
    vertical-align: top;
    /*    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 255, 0.2);*/
}
.bottom-right {
    width: calc(50% - 9px);
    height: calc(50% - 9px);
    display: inline-block;
    margin-top:18px;
    margin-left:13px;
    vertical-align: top;
    /*    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 255, 0.2);*/
}

/* NAVIGATION */

nav {
    top: 85px;
    right: 0;
    position: absolute;
}





/* PEGASEBUZZ */
.pegasebuzz {
    position: fixed;
    display:none;
}
.pegasebuzz .corner-title {
    font-weight:200;
    font-size: 12pt;
    color: #2548f9;
    margin: 50px 50px 0 50px;
    position: absolute;
}
.pegasebuzz .corner-title span {
    color: #595959;
}

.pegasebuzz .text-project {
    width: 65%;
    min-width: 370px;
    font-weight:200;
    font-size: 10pt;
    color:#b1b1b1;
    line-height: 15pt;
    padding: 120px 50px 50px 50px;
   ...

JavaScript

var tweenVars = [];
$(window).on('wheel', function (e) {
  var tween;
  var tweenActiveAnimatoins = tweenVars.filter(function(ele, idx) {
    return ele.isActive();
  });
  if (tweenActiveAnimatoins.length > 0 || $(':animated').length > 0) {
    console.log('animation stopped because already in progress....');
    return;
  }
  //
  // empty the array
  //
  tweenVars = [];
  if ($('.ecampus').css('display') == 'block') {
    if (e.originalEvent.wheelDelta < 0) {
      $('.ecampus').fadeOut();
      $('.pegasebuzz').fadeIn();
      tween = TweenLite.from($('.pegasebuzz .corner-title'), 0.5, {
        opacity: 0,
        delay: 0.2
      });
      tweenVars.push(tween);
      tween = TweenLite.from($('.pegasebuzz .text-project'), 1, {
        opacity: 0,
        marginTop: '15px',
        delay: 0.7
      });
      tweenVars.push(tween);
      tween = TweenLite.from($('.pegasebuzz .bottom-left img'), 1.5, {
        opacity: 0,
        marginTop: "-95px",
        marginLeft: "40px",
        delay: 1
      });
      tweenVars.push(tween);
      tween = TweenLite.from($('.pegasebuzz .top-right img'), 1, {
        opacity: 0,
        marginTop: "60px",
        delay: 1.3
      });
      tweenVars.push(tween);
    } else {
      // TOP PAGE
    }
    return;
  }
  if ($('.pegasebuzz').css('display') == 'block') {
    if (e.originalEvent.wheelDelta < 0) {
      $('.pegasebuzz').fadeOut();
      $('.notrecoin').fadeIn();
      tween = TweenLite.from($('.notrecoin .corner-title'), 0.5, {
        opacity: 0,
        delay: 0.5
      });
      tweenVars.push(tween);
      tween = TweenLite.from($('.notrecoin .text-project'), 1, {
        opacity: 0,
        marginTop: '15px',
        delay: 1
      });
      tweenVars.push(tween);
      tween = TweenLite.from($('.notrecoin .top-right img'), 1, {
        opacity: 0,
        marginTop: "60px",
        delay: 2
      });
      tweenVars.push(tween);
      tween = TweenLite.from($('.notrecoin .bottom-left img'), 1.5, {
       ...