Animation Stops on Screens 1200px

[ReinhardTral]

Hello GSAP community!

I'm currently working on an animation using GSAP in a React component. Everything works well, but I've encountered an issue where the animation stops when the screen width exceeds 1200 pixels.

I've set up a useEffect to handle resizing, creating a new animation instance when the window is resized. However, it seems that the animation is not continuing as expected for larger screens.

Here's a snippet of my code: Im Use React and Talwind code this me Component

import React, { useEffect, useRef } from 'react';
import { gsap, MotionPathPlugin } from 'gsap/all';
import { useGSAP } from '@gsap/react';
gsap.registerPlugin(MotionPathPlugin);

export default function CornerBottomRight({
color,
disabledAnimation = false,
isExpanded
}: {
color?: string,
disabledAnimation?: boolean
isExpanded?: boolean
}) {
const pathRef = useRef(null);
useGSAP(() => {
let cornerBottomRightAnimation = gsap.to(pathRef.current, {
duration: 5,
repeat: -1,
ease: "linear",
motionPath: {
path: "#LineRuth",
align: "#LineRuth",
alignOrigin: [0.5, 0.5],
},
});

cornerBottomRightAnimation.play();

const handleResize = () => {
console.log("resize");
// Detén la animación actual
cornerBottomRightAnimation.kill();
// Crea una nueva instancia de la animación
cornerBottomRightAnimation = gsap.to(pathRef.current, {
duration: 5,
repeat: -1,
ease: "linear",
motionPath: {
path: "#LineRuth",
align: "#LineRuth",
alignOrigin: [0.5, 0.5],
},
});
// Reproduce la nueva animación
cornerBottomRightAnimation.play();
};

window.addEventListener("resize", handleResize);

return () => {
window.removeEventListener("resize", handleResize);
cornerBottomRightAnimation.kill();
};
}, []);

return (
< div className='w-full h-full'>
<svg
width="376"
height="114"
viewBox="0 0 376 114"
preserveAspectRatio="xMidYMid meet"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="6.3 1">
<g id="VisualLine">
<path id="CirclesFillDesktop" d="M32.52 61.9H32.4C30.19 61.9 28.4 60.11 28.4 57.9C28.4 55.69 30.19 53.9 32.4 53.9H32.52C34.73 53.9 36.52 55.69 36.52 57.9C36.52 60.11 34.73 61.9 32.52 61.9ZM298.94 61.9H298.69C296.48 61.9 294.69 60.11 294.69 57.9C294.69 55.69 296.48 53.9 298.69 53.9H298.94C301.15 53.9 302.94 55.69 302.94 57.9C302.94 60.11 301.15 61.9 298.94 61.9ZM278.45 61.9H278.2C275.99 61.9 274.2 60.11 274.2 57.9C274.2 55.69 275.99 53.9 278.2 53.9H278.45C280.66 53.9 282.45 55.69 282.45 57.9C282.45 60.11 280.66 61.9 278.45 61.9ZM257.95 61.9H257.7C255.49 61.9 253.7 60.11 253.7 57.9C253.7 55.69 255.49 53.9 257.7 53.9H257.95C260.16 53.9 261.95 55.69 261.95 57.9C261.95 60.11 260.16 61.9 257.95 61.9ZM237.46 61.9H237.21C235 61.9 233.21 60.11 233.21 57.9C233.21 55.69 235 53.9 237.21 53.9H237.46C239.67 53.9 241.46 55.69 241.46 57.9C241.46 60.11 239.67 61.9 237.46 61.9ZM216.97 61.9H216.72C214.51 61.9 212.72 60.11 212.72 57.9C212.72 55.69 214.51 53.9 216.72 53.9H216.97C219.18 53.9 220.97 55.69 220.97 57.9C220.97 60.11 219.18 61.9 216.97 61.9ZM196.47 61.9H196.22C194.01 61.9 192.22 60.11 192.22 57.9C192.22 55.69 194.01 53.9 196.22 53.9H196.47C198.68 53.9 200.47 55.69 200.47 57.9C200.47 60.11 198.68 61.9 196.47 61.9ZM175.98 61.9H175.73C173.52 61.9 171.73 60.11 171.73 57.9C171.73 55.69 173.52 53.9 175.73 53.9H175.98C178.19 53.9 179.98 55.69 179.98 57.9C179.98 60.11 178.19 61.9 175.98 61.9ZM155.49 61.9H155.24C153.03 61.9 151.24 60.11 151.24 57.9C151.24 55.69 153.03 53.9 155.24 53.9H155.49C157.7 53.9 159.49 55.69 159.49 57.9C159.49 60.11 157.69 61.9 155.49 61.9ZM134.99 61.9H134.74C132.53 61.9 130.74 60.11 130.74 57.9C130.74 55.69 132.53 53.9 134.74 53.9H134.99C137.2 53.9 138.99 55.69 138.99 57.9C138.99 60.11 137.2 61.9 134.99 61.9ZM114.5 61.9H114.25C112.04 61.9 110.25 60.11 110.25 57.9C110.25 55.69 112.04 53.9 114.25 53.9H114.5C116.71 53.9 118.5 55.69 118.5 57.9C118.5 60.11 116.71 61.9 114.5 61.9ZM94 61.9H93.75C91.54 61.9 89.75 60.11 89.75 57.9C89.75 55.69 91.54 53.9 93.75 53.9H94C96.21 53.9 98 55.69 98 57.9C98 60.11 96.21 61.9 94 61.9ZM73.51 61.9H73.26C71.05 61.9 69.26 60.11 69.26 57.9C69.26 55.69 71.05 53.9 73.26 53.9H73.51C75.72 53.9 77.51 55.69 77.51 57.9C77.51 60.11 75.72 61.9 73.51 61.9ZM53.02 61.9H52.77C50.56 61.9 48.77 60.11 48.77 57.9C48.77 55.69 50.56 53.9 52.77 53.9H53.02C55.23 53.9 57.02 55.69 57.02 57.9C57.02 60.11 55.23 61.9 53.02 61.9ZM319.31 61.9H319.19C316.98 61.9 315.19 60.11 315.19 57.9C315.19 55.69 316.98 53.9 319.19 53.9H319.31C321.52 53.9 323.31 55.69 323.31 57.9C323.31 60.11 321.52 61.9 319.31 61.9Z" fill="#1D1D1B" />
{/* <path id="CirclesFillMobile" d="M32.56 65.1H32.34C28.36 65.1 25.14 61.88 25.14 57.9C25.14 53.92 28.36 50.7 32.34 50.7H32.56C36.54 50.7 39.76 53.92 39.76 57.9C39.76 61.88 36.54 65.1 32.56 65.1ZM299.04 65.1H298.59C294.61 65.1 291.39 61.88 291.39 57.9C291.39 53.92 294.61 50.7 298.59 50.7H299.04C303.02 50.7 306.24 53.92 306.24 57.9C306.24 61.88 303.01 65.1 299.04 65.1ZM278.55 65.1H278.1C274.12 65.1 270.9 61.88 270.9 57.9C270.9 53.92 274.12 50.7 278.1 50.7H278.55C282.53 50.7 285.75 53.92 285.75 57.9C285.75 61.88 282.52 65.1 278.55 65.1ZM258.05 65.1H257.6C253.62 65.1 250.4 61.88 250.4 57.9C250.4 53.92 253.62 50.7 257.6 50.7H258.05C262.03 50.7 265.25 53.92 265.25 57.9C265.25 61.88 262.02 65.1 258.05 65.1ZM237.56 65.1H237.11C233.13 65.1 229.91 61.88 229.91 57.9C229.91 53.92 233.13 50.7 237.11 50.7H237.56C241.54 50.7 244.76 53.92 244.76 57.9C244.76 61.88 241.53 65.1 237.56 65.1ZM217.07 65.1H216.62C212.64 65.1 209.42 61.88 209.42 57.9C209.42 53.92 212.64 50.7 216.62 50.7H217.07C221.05 50.7 224.27 53.92 224.27 57.9C224.27 61.88 221.04 65.1 217.07 65.1ZM196.57 65.1H196.12C192.14 65.1 188.92 61.88 188.92 57.9C188.92 53.92 192.14 50.7 196.12 50.7H196.57C200.55 50.7 203.77 53.92 203.77 57.9C203.77 61.88 200.54 65.1 196.57 65.1ZM176.08 65.1H175.63C171.65 65.1 168.43 61.88 168.43 57.9C168.43 53.92 171.65 50.7 175.63 50.7H176.08C180.06 50.7 183.28 53.92 183.28 57.9C183.28 61.88 180.05 65.1 176.08 65.1ZM155.59 65.1H155.14C151.16 65.1 147.94 61.88 147.94 57.9C147.94 53.92 151.16 50.7 155.14 50.7H155.59C159.57 50.7 162.79 53.92 162.79 57.9C162.79 61.88 159.55 65.1 155.59 65.1ZM135.09 65.1H134.64C130.66 65.1 127.44 61.88 127.44 57.9C127.44 53.92 130.66 50.7 134.64 50.7H135.09C139.07 50.7 142.29 53.92 142.29 57.9C142.29 61.88 139.06 65.1 135.09 65.1ZM114.6 65.1H114.15C110.17 65.1 106.95 61.88 106.95 57.9C106.95 53.92 110.17 50.7 114.15 50.7H114.6C118.58 50.7 121.8 53.92 121.8 57.9C121.8 61.88 118.57 65.1 114.6 65.1ZM94.1 65.1H93.65C89.67 65.1 86.45 61.88 86.45 57.9C86.45 53.92 89.67 50.7 93.65 50.7H94.1C98.08 50.7 101.3 53.92 101.3 57.9C101.3 61.88 98.07 65.1 94.1 65.1ZM73.61 65.1H73.16C69.18 65.1 65.96 61.88 65.96 57.9C65.96 53.92 69.18 50.7 73.16 50.7H73.61C77.59 50.7 80.81 53.92 80.81 57.9C80.81 61.88 77.58 65.1 73.61 65.1ZM53.12 65.1H52.67C48.69 65.1 45.47 61.88 45.47 57.9C45.47 53.92 48.69 50.7 52.67 50.7H53.12C57.1 50.7 60.32 53.92 60.32 57.9C60.32 61.88 57.09 65.1 53.12 65.1ZM319.35 65.1H319.13C315.15 65.1 311.93 61.88 311.93 57.9C311.93 53.92 315.15 50.7 319.13 50.7H319.35C323.33 50.7 326.55 53.92 326.55 57.9C326.55 61.88 323.33 65.1 319.35 65.1Z" fill="#1D1D1B" /> */}
</g>
<g id="Ruths">
<path id="LineRuth" d="M319.5 58.45H32.48V57.45H319.5V58.45Z" fill="#1D1D1B" />
<path id="reverseLine" d="M319.5 58.38H32.48V57.38H319.5V58.38Z" fill="black" />
</g>
<path ref={pathRef} id="BigCircles" className="arrow" fill="rgb(255,203,97)" fill-opacity="1" d=" M0,-8 C0,-8 8,8 8,8 C8,8 -8,8 -8,8 C-8,8 0,-8 0,-8z"></path>
{/* <path id="BigCircles" ref={pathRef} d="M319.09 49.88C323.51 49.88 327.09 53.46 327.09 57.88C327.09 62.3 323.51 65.88 319.09 65.88C314.67 65.88 311.09 62.3 311.09 57.88C311.09 53.46 314.67 49.88 319.09 49.88Z" fill="#1D1D1B" /> */}
</g>
</svg>
</div>
);
}

 

I've ensured that the resize event is captured, and a new animation instance is created and played, but the issue persists.

Any insights or suggestions on how to make the animation responsive for larger screens would be greatly appreciated!

Thank you in advance for your help.

Feel free to customize the message based on additional details or specific points you'd like to highlight regarding your implementation.

 

 

See the Pen VwRgMQe by Alex-carrasco (@Alex-carrasco) on CodePen

[Rodrigo]

Hi,

 

Your demo is not working on Codepen. Is better to create a demo in Stackblitz, you can fork one of our starter templates we have there:

https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

 

Finally proper cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

 

Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.

 

Here is how it works:

const container = useRef(); // the root level element of your component (for scoping selector text which is optional)

useGSAP(() => {
  // gsap code here...
}, { dependencies: [endX], scope: container }); // config object offers maximum flexibility

Or if you prefer, you can use the same method signature as useEffect():

useGSAP(() => {
  // gsap code here...
}, [endX]); // simple dependency Array setup like useEffect()

This pattern follows React's best practices.

 

We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/

 

Happy Tweening!

[GreenSock]

Yeah, once we see a minimal demo, we'll be in a better position to offer advice but I just wanted to chime in and mention that we have seen Chrome have some rendering bugs (totally unrelated to GSAP) on very wide screens. So GSAP is setting the values properly, but the browser forgets to repaint elements in certain circumstances - you can check Dev Tools and see that the element is where it's supposed to be, but my guess is that the browser was doing some kind of flawed "optimization" if the screen was too wide. Perhaps it was tiling the bitmap for the CPU texture, breaking it into chunks and it forgot to update certain pieces. Sometimes there are tricks to force the browser to re-render stuff, but again, none of that has anything to do with GSAP. I'm not sure that's what you're running into or not, but I figured I'd mention it just in case. Maybe try setting will-change: transform on some of the elements, including the container(s).