Así que tengo una animación de revelación en mi aplicación de reacción que usa el paquete ScrollReveal y estoy luchando para que funcione correctamente.

La animación en sí funciona muy bien, sin embargo, descubrí que cuando navego por la aplicación y vuelvo a la página de inicio donde se supone que se revela el diseño, el diseño completo aparece durante una fracción de segundo y luego desaparece para comenzar la animación. Creo que es justo querer que la animación comience de inmediato y no tenga ese efecto de salto al principio. Actualmente lo tengo en useEffect porque pensé que eso lo arreglaría, pero no fue así. También probó useLayoutEffect y no funciona.

El código para el componente de la página de inicio que se revela:

 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;