So I have a reveal animation in my react app which uses ScrollReveal package and Im struggling to make it work properly.

The animation itself works great however I found that when I navigate through the app and come back to the home page where the layout is supposed to be revealed, the full layout shows up for a split second then disappears to begin the animation. I think its fair to want the animation to start right away and not have that gitter effect at the beggining. I currently have it in a useEffect cuz I thought that would fix it however it didn't. It also tried useLayoutEffect and it doesn't work.

The code for the home page component that gets revealed:

import React, { useEffect } from "react";
import ScrollReveal from "scrollreveal";
import {
    Title,
    HomeContainer,
    Subtitle,
    TitleButton,
  Hi,
  Name,
  ButtonContainer
} from "../../styles/Home-styles";

const Home = () => {
  useEffect(() => {
    ScrollReveal().reveal('.title' , {duration: 500, origin:"top", distance: "0.5em", delay: 0 , easing: "ease-in-out"});
    ScrollReveal().reveal('.subtitle', {duration: 500, origin:"top", distance: "1em", delay: 300, easing: "ease-in-out"});
    ScrollReveal().reveal('.button', {duration: 500, delay: 1000, distance: '0px', opacity: 0, easing: "ease-in-out"})
  
  }, []);


    return (
        <HomeContainer>
            <Title className="title">
                <Hi>Hi, </Hi>
                <Name>I'm Saif.</Name>
            </Title>
            <Subtitle className="subtitle">This is a subtitle</Subtitle>
            <ButtonContainer className="button">
                <TitleButton to="/about">button</TitleButton>
            </ButtonContainer>
        </HomeContainer>
    );
};

export default Home;