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.

I have an animation that goes from left to right. The arrows point towards the invert, as shown in the image. I want to reverse the animation so that it goes in the opposite direction, from left to right. Is there an easy way to do this?" Mi code : "use client" import React, { useEffect, useRef } from 'react'; import { gsap, MotionPathPlugin } from 'gsap/all'; gsap.registerPlugin(MotionPathPlugin); const CornerTopRight = () => { useEffect(() => { // Número de animaciones const numAnimations = 4; // Duración y retraso base const duration = 5; const baseDelay = 0.3; const repeatDelay = 0.9; // Crear un bucle para generar las animaciones for (let i = 1; i <= numAnimations; i++) { const delay = baseDelay * (i - 1); gsap.to(`.arrowCornerTopR${i}`, { duration, yoyo: true, repeat: -1, ease: "linear", motionPath: { autoRotate: 90, drawSVG: 0, path: ".pathCornerTopR", align: ".pathCornerTopR", alignOrigin: [0.8, 0.8] }, delay, repeatDelay, }).play(); } // Limpiar todas las animaciones al desmontar el componente return () => { for (let i = 1; i <= numAnimations; i++) { gsap.killTweensOf(`.arrowCornerTopR${i}`); } }; }, []); return ( <svg className="w-full" viewBox="0 0 95.084 22.22" xmlns="http://www.w3.org/2000/svg"> <g fill="#000000" transform="matrix(0.9718469977378846, 0, 0, 0.8569409847259521, 0.8365160947518957, 1.7288000841259965)"> <path d="M95.084 6.222h-.813v1.777h.813zm0 3.555h-.813v1.778h.813zm0 3.555h-.813v1.778h.813zm0 3.555h-.813v1.778h.813zm0 3.556h-.813v1.777h.813zm0-16.443c0-.511-.09-1.01-.256-1.476l-.756.33c.13.36.199.746.199 1.146v.444h.813zM93.751.913a3.509 3.509 0 0 0-1.66-.849l-.146.876c.476.098.92.324 1.29.658zM90.402 0h-1.626v.889h1.626zM87.15 0h-1.626v.889h1.626zm-3.253 0h-1.627v.889h1.627zm-3.253 0h-1.627v.889h1.627zM77.39 0h-1.627v.889h1.627Zm-3.254 0H72.51v.889h1.626zm-5.93.022h-1.627V.91h1.627zm2.905 0h-1.627V.91h1.627zM23.823.056h-1.626v.888h1.626zm-3.253 0h-1.627v.888h1.627zm-3.253 0H15.69v.888h1.627zm-3.253 0h-1.627v.888h1.627zm-3.253 0H9.184v.888h1.627zm-3.254 0H5.931v.888h1.626zm-5.93.021H0v.89h1.627zm2.904 0H2.905v.889H4.53z" /> <path d="M68.208.016h-1.627v.889h1.627zm-3.253 0h-1.627v.889h1.627zm-3.253 0h-1.627v.889h1.627zm-3.254 0h-1.626v.889h1.626zm-3.253 0H53.57v.889h1.626zm-3.253 0h-1.626v.889h1.626zm-5.93.022h-1.627v.888h1.626zm2.904 0H47.29v.888h1.626z" /> <path d="M46.011.032h-1.626V.92h1.626zm-3.253 0h-1.627V.92h1.627zm-3.253 0h-1.627V.92h1.627zm-3.253 0h-1.627V.92h1.627zm-3.253 0h-1.627V.92h1.627zm-3.254 0H28.12V.92h1.626zm-5.93.021h-1.627v.89h1.627zm2.904 0h-1.626v.889h1.626z" /> <path className='pathCornerTopR' d="M1.425 1.729 L35.857 1.729 L93.244 1.729 M93.244 1.729 L93.244 8.869 L93.244 20.77" /> </g> {[1, 2, 3, 4].map((index) => ( <path key={index} fill-opacity="1" className={`arrowCornerTopR${index}`} fillOpacity="1" d="M 3.374 0.171 C 3.374 0.171 1.787 4.069 1.787 4.069 C 1.787 4.069 4.961 4.069 4.961 4.069 C 4.961 4.069 3.374 0.171 3.374 0.171 Z" transform="matrix(0, 1, -1, 0, 8.1867e-8, 1.00523e-7)" /> ))} </svg> ); }; export default CornerTopRight;