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="timing">
    <p class="first" data-scroll-item-id="first">I go first</p>
    <p class="second" data-scroll-item-id="second">I go second</p>
    <p class="always" data-scroll-item-id="always">I'm always changing</p>
  </div>
</div>

CSS

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

JavaScript

new perspective.Scroll('.wrap', {
  stages: [{
    id: 'timing',
    scrollNumber: 10,
    transition: 0,
    items: [{
      id: 'first',
      effects: [{
        property: 'color',
        start: '#000',
        end: '#fff',
        endAt: 50
      }]
    }, {
      id: 'second',
      effects: [{
        property: 'color',
        start: '#000',
        end: '#fff',
        startAt: 51
      }]
    }, {
      id: 'always',
      effects: [{
        property: 'color',
        start: '#000',
        end: '#f00',
      }]
    }]
  }]
})