JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//unpkg.com/perspective.js/lib/perspective.js"></script>

<div class="wrap">
  <div class="stage" data-scroll-stage-id="basic">
    <p class="slow" data-scroll-item-id="slow">SLOW</p>
    <p class="fast" data-scroll-item-id="fast">FAST</p>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}
html, body, .wrap {
  height: 100%;
}
.stage {
  height: 100%;
  width: 100%;
  position: absolute;
}
p {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 50px;
}
.slow {
  top: 30%;
}
.fast {
  top: 60%;
}

JavaScript

new perspective.Scroll('.wrap', {
  stages: [{
    id: 'basic',
    scrollNumber: 9,
    transition: 0,
    items: [{
      id: 'slow',
      effects: [{
        property: 'transform',
        start: 'translateY(0px)',
        end: 'translateZ(-50px)'
      }]
    }, {
      id: 'fast',
      effects: [{
        property: 'transform',
        start: 'translateY(0px)',
        end: 'translateY(-180px)'
      }]
    }]
  }]
})