JSFiddle - React, Tailwind, and code Playground

HTML

<div class="notice">
    <div class="start">Start scrolling down!</div>
    <div class="etc1">etc1</div>
    <div class="etc2">etc2</div>
    <div class="etc3">etc3</div>
    <div class="etc4">etc4</div>
</div>
<div class="box"></div>

CSS

.box {
    width: 100%;
    height: 7500px;
    background: linear-gradient(to bottom, #ffcb77 0%, #deaaff 100%);
}
.etc1, .etc2, .etc3, .etc4 {
    display: none;
    font-size: 48px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
div.notice {
    position: fixed;
    top: 50%;
    margin-top: -50px;
    height: 100px;
    width: 100%;
    text-align: center;
}

JavaScript

function firstAnimation() {
    $('.start').hide();
    $('.etc1').fadeIn();
    $('.etc2').fadeOut();
}

function secondAnimation() {
    $('.etc1').fadeOut();
    $('.etc2').fadeIn();
    $('.etc3').fadeOut();
}

function thirdAnimation() {
    $('.etc2').fadeOut();
    $('.etc3').fadeIn();
    $('.etc4').fadeOut();
}

function fourthAnimation() {
    $('.etc3').fadeOut();
    $('.etc4').fadeIn();
}


$(window).scroll(function () {
    if ($(this).scrollTop() > 1500 && $(this).scrollTop() < 3000) {
        firstAnimation();
    }
    if ($(this).scrollTop() > 3000 && $(this).scrollTop() < 4500) {
        secondAnimation();
    }
    if ($(this).scrollTop() > 4500 && $(this).scrollTop() < 6000) {
        thirdAnimation();
    }
    if ($(this).scrollTop() > 6000) {
        fourthAnimation();
    }
});