Laggy Animations on GSAP

[Cristian Hoza]

Hello.  I'm new with GSAP Technology. I'm using the ScrollTrigger Plugin for one of my websites and I find the animations very laggy. 

What I basically want to achieve is : when I scroll down the page, the IMG tag scales down its width (from 100vw to 30% of the viewport).

It actually works, but it's very laggy. Am I doing something wrong ? I'm using React with Typescript width webpack and css modules. I attached two files down below for a reference.

 

Thank you so much in advance :)

Invitation.tsx Invitation.css

[GreenSock]

Welcome to the forums, @Cristian Hoza! 

 

We'd love to help with any GSAP-specific questions, but unfortunately we're not in a position to do general performance audits and troubleshooting. If you'd like some help, please provide a minimal demo, maybe in something like codesandbox so that we can see what's going on. It's not enough to just attach a .tsx and .css file here - we need to see things in context. 

 

I'm not a React guy at all, but this smells like a React thing to me. I noticed, for example, that you're passing in pageWidth to the useEffect() and you're also adding a "resize" listener EVERY time that function gets called AND when cleanup is supposed to happen. @Rodrigo or @OSUblake would know better, but something seems off there. 

 

You also didn't include any of your GSAP-related code, so it's difficult for us to see what's going on.

 

If you still need some help, please post that minimal demo and we'd be glad to take a peek. 

[OSUblake]

9 hours ago, GreenSock said:

I noticed, for example, that you're passing in pageWidth to the useEffect() and you're also adding a "resize" listener EVERY time that function gets called AND when cleanup is supposed to happen.

 

Yeah, it definitely should not be like that. I would search around for how to handle resizes, like here.

https://blog.logrocket.com/developing-responsive-layouts-with-react-hooks/

 

[Rodrigo]

1 hour ago, OSUblake said:

Yeah, it definitely should not be like that. I would search around for how to handle resizes, like here.

Definitely!!!! Also I strongly recommend to never update a component's state on every event handler call such as window resize, mouse move or a GSAP update, unless you have no other choice. That will trigger a re-render on every state update (in the case of GSAP that could happen up to 60 times per second), and also re-render all the children in that component's tree. If possible use a breakpoint like in the article, but run your code only if the breakpoint is passed, like that you will avoid a bunch on unnecessary calls. Something like this:

const breakPoint = useRef(768);
const [width, setWidth] = useState();
const [isSmall, setIsSmall] = useState(true);

const windowResizeHandler = () => {
  const {innerWidth} = window;
  
  if (innerWidth < 768 && !isSmall) {
    setWidth(window.innerWidth);
    setIsSmall(false);
  }
  if (innerWidth > 767 && isSmall) {
    setWidth(window.innerWidth);
    setIsSmall(true);
  }
};

useEffect(() => {
  window.addEventListener("resize", windowResizeHandler);
  
  return () => window.removeEventListener("resize", windowResizeHandler);
}, []);

useEffect(() => {
  // THIS CODE RUNS ONLY IF THE BREAKPOINT IS PASSED
  return () => {
    // Remember to cleanb up before unmounting the component
  };
}, [isSmall]);

Also if you have no other option but to update the state on every resize event, keep your code as simple as possible and try wrapping any direct child with a React.memo() method in order to prevent unnecessary re-renders.

 

Finally use the profiler you can find in react dev-tools in order to find out about those re-renders:

https://www.youtube.com/watch?v=00RoZflFE34

https://www.youtube.com/watch?v=o-alRbk_zP0

 

Happy Tweening!!!