JSFiddle - React, Tailwind, and code Playground

HTML

<div class="x">
  <div class="xx xx-1">
    <div class="content">
      <div class="title">
        <div class="title__text">Lorem ipsum dolor sit amet</div>
      </div>
      <div class="desc">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat velit, voluptas sequi vel eaque deleniti.
       </div>
    </div>
  </div>
  <div class="xx xx-2">
    <div class="content">
      <div class="title">
        <div class="title__text">Lorem ipsum dolor sit amet</div>
      </div>
      <div class="desc">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat velit, voluptas sequi vel eaque deleniti.
       </div>
    </div>
  </div>
  <div class="xx xx-3">
    <div class="content">
      <div class="title">
        <div class="title__text">Lorem ipsum dolor sit amet</div>
      </div>
      <div class="desc">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat velit, voluptas sequi vel eaque deleniti.
       </div>
    </div>
  </div>
  <div class="xx xx-4">
    <div class="content">
      <div class="title">
        <div class="title__text">Lorem ipsum dolor sit amet</div>
      </div>
      <div class="desc">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat velit, voluptas sequi vel eaque deleniti.
       </div>
    </div>
  </div>
  <div class="xx xx-5">
    <div class="content">
      <div class="title">
        <div class="title__text">Lorem ipsum dolor sit amet</div>
      </div>
      <div class="desc">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat velit, voluptas sequi vel eaque deleniti.
       </div>
    </div>
  </div>
  <div class="xx xx-6">
    <div class="content">
      <div class="title">
        <div class="title__text">Lorem ipsum dolor sit amet</div>
      </div>
      <div class="desc">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat velit, voluptas sequi vel eaque deleniti.
       </div>
    </div>
  </div>
</div>

CSS

html,
body {
  height: 200%;
}

html {
  font-family: helveticaneue;
  -webkit-font-smoothing: antialiased;
}

.x {
  position: fixed;
  top: 50%;
  left: 50%;
}

.xx {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: #000;
  transition: .2s;
  display: none;
}

.content {
  position: absolute;
  z-index: 1;
  width: 300px;
  XXXborder: 1px solid;
  visibility: hidden;
  opacity: 0;
  transition: .05s;
}


/*.x*/.is-open .content {
  visibility: visible;
  opacity: 1;
  transition: .4s;
}

.content:after {
  content: "";
  position: absolute;
  display: none;
  z-index: -1;
  top: -50px;
  bottom: -50px;
  left: -50px;
  right: -50px;
}

/*.x*/.content:hover:after {
  display: block;
}


.title {
  position: relative;
  z-index: 1;
  font-weight: 900;
}

.title__text {
  display: inline-block;
  position: relative;
}

.title__text:after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: .3em;
  height: .55em;
  width: 0%;
  border-radius: 50px;
  transition: .2s;
  background-color: lightblue;
}

.content:hover .title__text:after {
  width: 102%;;
}

.desc {
  display: none;
}

.content:hover .desc {
  display: block;
  animation: descEnterAnim .2s;
}

@keyframes descEnterAnim {
  0% {
    visibility: hidden;
    opacity: 0;
    transform: translateX(-20px);
  }
}


.xx-1 {
  display: block;
  transform: rotateZ(60deg) translateX(-80px);
}

/*.x*/.is-open .xx-1 {
    transform: rotateZ(60deg) translateX(-160px);
}

.xx-1 .content {
    top: 0;
    transform: rotateZ(-60deg) translateX(-90px) translateY(-36px);
    right: 100%;
    transform-origin: top right;
}

.xx-2 {
  display: block;
  transform: rotateZ(-60deg) translateX(80px);
}

/*.x*/.is-open .xx-2 {
    transform: rotateZ(-60deg) translateX(160px);
}

.xx-2 .content {
    top: 0;
    transform: rotateZ(60deg) translateX(90px) translateY(-36px);
    left: 100%;
    transform-origin: top left;
}


.xx-3 {
  display: block;
    transform:...

JavaScript

var $body = $('body'),
		$el = $('.x');

$body.on('click', function () {
	$el.addClass('is-open');
});


var logo_elements = [
    {
      el: $('.xx-1'),
      translate_limits: [-80, -160]
    },
    {
      el: $('.xx-2'),
      translate_limits: [80, 160]
    },
    {
      el: $('.xx-3'),
      translate_limits: [-80, -160]
    },
    {
      el: $('.xx-4'),
      translate_limits: [80, 160]
    },
    {
      el: $('.xx-5'),
      translate_limits: [80, 160]
    },
    {
      el: $('.xx-6'),
      translate_limits: [-80, -160]
    }
  ],
  
  start_expand_at_y_coord = 200,
  end_expand_at_y_coord = 600,
  reveal_text_at_y_coord = 620;


$('html').on('scroll', function ( e ) {
 raf();
});