React gsap animation crash when spam clicking the navlink

[jwwc23]

I am new to gsap and reactjs. I have a problem with using TimeLineLite with react-router. A navbar is created with a link redirecting to the homepage. When I spam clicking it, the animation crashes. How do I solve this problem?

My code is on the codesandbox. Any suggestions are highly appreciated.

 

https://codesandbox.io/s/sad-brook-if9o6?file=/src/Navbar.css

See the Pen Navbar.css by s (@s) on CodePen.

[ZachSaucier]

Hey jwwc23 and welcome to the GreenSock forums.

 

We highly recommend using the GSAP 3 syntax for your GSAP code. It's simpler and lets you use new features like GSAP's defaults! More info about upgrading:

 

The issue that you're seeing comes from creating multiple timelines and the tweens in them playing after one another while the previous timeline is still playing. There are a couple of ways that you could fix this issue:

1. Create the timeline ahead of time. When the link is clicked, use control methods to control the state of that animation. This is slightly more performant and would fix the logical issue you're facing. I write more about how to do that in my article about animating efficiently.
2. When creating a new animation, see if there is a past animation running. If it is, kill it and then create the new animation (resetting values as necessary). Perhaps this would be easier to setup in your situation.

[Rodrigo]

Hi,

 

The main problem I see in your code is the fact that the Footer component it's inside the Home component. So everytime you access a new route the Home component is re-render and so is the Footer component. Since the Footer component is not receiving any props from it's parent and there is no state update in it, the best option is to use React Memo in order to prevent unnecessary re-renders when it's parent component is re-rendered:

 

import React, { useEffect, useRef } from "react";
import "./Footer.css";
import { Link } from "react-router-dom";

import { gsap, Power3, TimelineLite } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

import {
  IoLogoFacebook,
  IoLogoTwitter,
  IoLogoInstagram,
  IoLogoYoutube
} from "react-icons/io";

const Footer = React.memo(function Footer() {
  /* ALL THE FOOTER COMPONENT CODE HERE */
});

export default Footer;

That seems to fix the issue.

 

Happy Tweening!!!

[jwwc23]

Thanks for your help and patience! Apologies for the late response. I really appreciate it.