I have three links which I am currently animating to slide down when the user clicks the toggle menu button. It works fine when the user clicks the toggle again.

The problem: when the user clicks on a route and navigates away THEN comes back to select another route, the animation doesn't restart again. The animation should restart to initial position even if the user navigates to another route.

Here is what I currently have:

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>

I have tried using useLocation:

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

This doesn't work. But i think useLocation is on the right track because it gives me a route change.

Can anyone suggest a work around or a better way to approach this?

Using react-router v6.