JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="container">
        <div id="mainImg">
            <img src="https://cdn.pixabay.com/photo/2019/09/03/19/09/door-4450072_960_720.jpg" style="height: 100%">
        </div>
        <div id="brandStatement">
            <img src="https://cdn.pixabay.com/photo/2019/04/22/04/32/blue-4145659_960_720.jpg" style="height: 100%">
        </div>
        <div id="animated"></div>
    </div>

    <img src="https://cdn.pixabay.com/photo/2019/02/09/09/46/architecture-3984725_960_720.jpg">
    
</body>
</html>

CSS

#container {
    height: 200vh;
    width: 100%;
}

#mainImg {
    text-align: center;
    width: 100%;
    height: 100%;
    position: fixed;
}

#brandStatement {
    text-align: center;
    width: 100%;
    height: 100%;
    position: fixed;
    opacity: 0;
}

JavaScript

let locked         = false,
    mainImage      = document.getElementById('mainImg'),
    brandStatement = document.getElementById('brandStatement');

window.addEventListener('scroll', function() {
    if (!locked) {
        window.requestAnimationFrame(function() {

            brandStatement.style.opacity = Math.min(window.scrollY / window.innerHeight, 1);
            
            if (brandStatement.style.opacity === '1') {
            		// scroll to next content
            }

            locked = false;
        });
    }
    locked = true;
});