scroll animation code

 css

section {

            min-height: auto;

            /*change this for height*/

            padding: 100px;

            display: flex;

            justify-content: center;

            align-items: center;

        }

        section:nth-child(1) {

            color: #e0ffff;

        }

        section:nth-child(2) {

            color: #42455a;

            background: #e0ffff;

        }

        section:nth-child(3) {

            color: #e0ffff;

        }

        section:nth-child(4) {

            color: #42455a;

            background: #e0ffff;

        }

        /*section .container{

  margin: 0px;

}*/

        section h1 {

            font-size: 3rem;

            margin: 20px;

        }

        section h2 {

            font-size: 40px;

            text-align: center;

        }

        section .text-container {

            display: flex;

        }

        section .text-container .text-box {

            margin: 20px;

            padding: 20px;

            background: #00c2cb;

        }

        section .text-container .text-box h3 {

            font-size: 30px;

            text-align: center;

            text-transform: uppercase;

            margin-bottom: 10px;

        }

        @media (max-width: 100%) {

            section h1 {

                font-size: 2rem;

                text-align: center;

            }

            section .text-container {

                flex-direction: column;

            }

        }

        .reveal {

            position: relative;

            transform: translateY(150px);

            opacity: 0;

            transition: 1s all ease;

        }

        .reveal.active {

            transform: translateY(0);

            opacity: 1;

        }

java

    <script>

        function reveal() {

            var reveals = document.querySelectorAll(".reveal");

            for (var i = 0; i < reveals.length; i++) {

                var windowHeight = window.innerHeight;

                var elementTop = reveals[i].getBoundingClientRect().top;

                var elementVisible = 150;

                if (elementTop < windowHeight - elementVisible) {

                    reveals[i].classList.add("active");

                } else {

                    reveals[i].classList.remove("active");

                }

            }

        }

        window.addEventListener("scroll", reveal);

    </script>

HTML

<section>

        <div class="container reveal">

 </div>

    </section>