How to add a reveal animation on scroll with the element (not the whole page)

Question

My website example: My website example

Hello, I'm trying to figure out how to add a reveal animation on scroll with the element (not the whole page). Because I set the root background image to 100vh and only use an element (overflow) to scroll it vertically so that I'm not scrolling a whole page, just the one-page component. For example, this is my App.js example code:

import React from 'react'
import {Header, Page, Footer} from "./Hooks"
import './style.css'
function App(){
  return (
    <div className="App">
      <Header/>     -> this one is a fixed component.
      <Page/>       -> this one can scroll vertically.
      <Footer/>     -> this one is a fixed component.
    </div>
 );
};

And this is the style.css code:

.App{
   background-image: './macos';
   height: 100vh;
   width: 100%;
   overflowY: auto;
}

Because of this setup, I cannot use window.scrollTo(0,0) function for scrolling to the top. And I'm going to create the reveal animation but don't know how to make it work. I watched a video about an onScroll event but it can't work on my website because of the Page component, because the website isn't scrolled, only the main page component, so window.ScrollY or window.ScrollX is always set to zero (0,0) (checked by console.log()).

I don't know how to fix this or use any kind of method. It's hard to re-create the root page UI so I don't want to have a mess with it. Thank you for all of your contributions. Anyone answers will all receive my upvote.