Call/Run Animation Every Time user Navigates to new Page

Question

I have a Nav (functional) component that contains a simple animation using GSAP. It animates the first time the page loads. I would like it to animate every time user clicks on a different page (I'm using React Reach Router for page navigation)

I know with a class based component, I could possibly use componentDidMount method but how can I achieve this with a functional component? And I don't think window.onload will work since site isn't actually re-loading, but re-routed.

Here's the code in question

Maybe GreenSock's article on [working with React and GSAP](https://greensock.com/react/) can help, especially the ["Route Animation Demo"](https://gsap-react-route-animation.stackblitz.io). — Zach Saucier, Sep 17 '19 at 13:20
@ZachSaucier according to that demo, it seems like I would have to include the nav component in all pages. I'll tinker around some more. thanks — Eric Nguyen, Sep 18 '19 at 17:17

score 0 · Answer 1 · answered Sep 16 '19 at 21:49

0

Include the Nav in the Products and About components.

answered Sep 16 '19 at 21:49

cucaracho

174
6

score 0 · Accepted Answer · answered Sep 18 '19 at 21:49

I was able to get it working. I kept everything contained within the Nav component. There may be a better solution but for now, this works:

  // set variable show initially to false
  const [show, setShow] = useState(false);

  // set show to true on click, then false again 
  const handleClick = () => {
    setShow(!show);
    setTimeout(function() {
      setShow(false);
    }, 500);
  };

  // if show is true, then run animation
  useEffect(() => {
    if (show) {
      TweenMax.from(navbar.current, 1, {
        y: -105
      });
    }
  }, [show]);

Here's the sandbox.

Call/Run Animation Every Time user Navigates to new Page

2 Answers2