Tengo tres enlaces que actualmente estoy animando para que se deslicen hacia abajo cuando el usuario hace clic en el botón de alternar menú. Funciona bien cuando el usuario vuelve a hacer clic en el interruptor.

El problema: cuando el usuario hace clic en una ruta y se aleja ENTONCES regresa para seleccionar otra ruta, la animación no se reinicia nuevamente. La animación debería reiniciarse a la posición inicial incluso si el usuario navega a otra ruta.

Esto es lo que tengo actualmente:

 let linkOne = useRef(null); let linkTwo = useRef(null); let linkThree = useRef(null); const [dropped, setDropped] = useState() const tl = useRef() useEffect(() => { // tl.current = gsap.timeline({paused: true}) tl.current = new gsap.timeline() .to([linkOne, linkTwo, linkThree], { y: 30, stagger: { amount: .3 } }); return tl.current.kill() }, []) useEffect(() => { dropped ? tl.current.play() : tl.current.reverse(); }, [dropped])

HTML:

 <Navbar.Toggle onClick={() => setDropped(!dropped)} aria-controls="responsive-navbar-nav" /> <Nav.Link ref={el => linkOne = el} as={Link} to="/About" href="#About">About</Nav.Link> <Nav.Link ref={el => linkTwo = el} as={Link} to="/TestPage" href="#TestPage">Test Page</Nav.Link> <Nav.Link ref={el => linkThree = el} as={Link} to="/GsapImageReveal" href="#GsapImageReveal">GsapImageReveal</Nav.Link>

He intentado usar useLocation:

 let location = useLocation() useEffect(() => { dropped ? tl.current.play() : tl.current.reverse(); console.log(location) }, [dropped, location])

esto no funciona Pero creo que useLocation está en el camino correcto porque me da un cambio de ruta.

¿Alguien puede sugerir una solución alternativa o una mejor manera de abordar esto?

Usando react-router v6.