Search the Community

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 get this Error Message when trying to stop the marquee on mouse hover! Pls Help!! Error: Invalid property pauseOnHover set to true Missing plugin? gsap.registerPlugin() Code: HTML: <div class="marquee"> <div class="marquee-inner"> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> </div> </div> CSS: gsap.registerPlugin(ScrollTrigger); let currentScroll = 0; let isScrollingDown = true; let shapes = document.querySelectorAll(".shape"); const links = document.querySelectorAll(".marquee-inner"); let marquee = document.querySelector('.marquee-inner'); let tween = gsap.to(".marquee-part", { xPercent: -100, repeat: -1, duration: 5, ease: "linear", pauseOnHover: true, }).totalProgress(0.5); let loop = gsap.to(links, { repeat: -1, speed: 1 + 0.5, draggable: true, reversed: false, paddingRight: parseFloat(gsap.getProperty(links[0], "marginRight", "px")) }); marquee.addEventListener("mouseenter", () => { loop.pause() }) marquee.addEventListener("mouseleave", () => { loop.play() }) gsap.set(".marquee-inner", {xPercent: -10}); window.addEventListener("scroll", function() { if(window.pageYOffset > currentScroll){ isScrollingDown = true; }else{ isScrollingDown = false; } gsap.to(tween, { timeScale: isScrollingDown ? 1 : -1, }).totalProgress(1); currentScroll = window.pageYOffset; });

Problem: How can I stop an infinite previous tween, when the following tween with scrollTrigger is ended? In the example the infinite previous tween starts again, after the scrollTrigger tween is ended. You have to wait 2 seconds to see it. I have created a stackblitz which shows the exact problem Stackblitz Example

Hey there! Is there a possibility to not animate an element when it is set on display none by CSS? My current project is based on Vue.js. So I don't have that window object on mounted to detect the viewport size. So I thought it might be a nice workaround to let the animation start only if the target element is set on display block. Or is the only solution another Vue plugin to get the viewport width? Thanks in advance Kerstin

Hello, i'd like to start by saying thanks for an awsome library! Now to the problem: I have a navigation menu which should display a submenu when hovering a link. This works fine but when i drag the mouse over multiple links the animation displaying the submenu continues which looks bad go ahead and try in the codepen: https://codepen.io/anon/pen/wPPrLK?editors=1111). How can i make the animation stop? I did try to set tl.clear() like this, in both the mouseenter and mouseleave functions : tl.clear() .to(".activeMenu ul", 0.25, {autoAlpha:1}) .to(".activeMenu ul li", 0.25,{autoAlpha:1, ease:Power0.easeInOut}); But then the ul remains visible. Any help is much appriciated, thank you and keep up the good work!

Hi, I am new to the forms but I am a big fan of greensock. I need to interrupt a animation when a user swipes left or right. So the idea is that the animation begins and goes left and right 2x times. But the user should have the possibility to interupt the animation by swiping left or right. When you swipe now during the animation you get 2 animations at the same time. This is not good. It should somehow kill all the animations in that specific function. ( attention() and attention2() ) I use hammer.js for mobile interaction. Sorry for the messy code If you could help me with this I would realy appreciate it. Thanks

Todays last question Is there a way that when I reverse an animation I can choose for it not to run until the very beginning (seeing as there is a way that I can reverse from before the end of animation). I tried the following since I wanted the 'reversed' version of the animation to stop 2 seconds from its beginning (otherwise it fades out to blank). But it didnt work. var callbk = tl.eventCallback("onComplete", doReverse); function doReverse() { tl.reverse(); timeline.addPause(2); } Perhaps there is a way I can continually listenfor progress during the reversal and break/pause at a certain time? Ideas welcome, in your own time. I'm done for today!

Dear All, Let me say that this is post I posted on the AS3/Flash forum but I guess the same principles apply here as well. I will just 'convert' the answer/logic to AS3 code if possible. First let me thank you for any help you can provide and let me explain what the situation is like: I have a number of elements/symbols/bitmaps that I set up on my flash stage (there can be as many as 30 elements) I place the first 5 on stage one under another and the rest outside the stage, on top, so I create the rolling effect. I have an array that I save all the element names in so I know which element is next etc. Currently I construct the spin using Timelinemax and I spin it User sees the first 5 elements and then it spins until the last 5 elements which I bounce a bit on finish ( I will provide the AS3 code after) Quote Here is when I need YOUR help. The user will be able to press a STOP button. Meaning I would like to shorten the animation in this way: Let's say the number of elements is 30. And the user presses STOP when the animation is showing elements 10-15. I want AS3 to insert at elements 16-20 my ORIGINAL last 5 elements (so basically elements 26-30). So the animation remains smooth and it stops at the same elements as it would stop if the user has not pressed STOP Basically I would like to shorten the animation strip and replace the last 5 elements to match my original 5 elements. I do not want to jump to the end of the 30 element animation because then the elements on stage (10-15) will change to elements #20-25 and the user will see this. In a more visual way, to understand better: My original strip is 1,2,3,4,5,...,26,27,28,29,30 Strip starts animating User presses STOP when on stage you see elements 10,11,12,13,14,15 Animation now how to reconstruct the strip like this: 1,2,3,4,...,15,26,27,28,29,30 So after element 15, it will be element 26 and animation will get ready to stop I hope I made the problem clear, it has been bugging me a lot lately to find a solution and I hope someone can help me from this forum. If you need more information please let me know Thank you again.

I am trying to create a water fill effect that responds to a input type=range value. Managed to get it fill up but the timeline is not responding after the first animation. You will see what I mean in the JSFiddle. Any help would be appreciated! Still new to GSAP animation so excuse any hacky methods. JSFiddle link here. https://jsfiddle.net/7mLkf5uh/#&togetherjs=bu7OUD9asn

Hello and thanks for this great library. I have a little problem with the video repeat function of videoloader. I load multiple video and I had set repeat:-1. The video loops to infinity but between the loops I have a freeze time about 2 seconds. This is the code I use: Any Ideas? I had tried both with gsap 12 and Tweening platform 11. Thanks in advance for your time!

Hello, I have a question about accessing loaded swf files by SWFLoader class. I am loading swf file and want to play/stop its content on certain event managed by certain function, not autoplay. I have managed to access child clip of loaded swf (see sample code below). But is there a way to "play" directly the loaded swf file, so I do not have to put all my animations into child clips of loaded swf? Thanks up front for any suggestions kuba import com.greensock.*; import com.greensock.loading.*; import com.greensock.events.LoaderEvent; import com.greensock.loading.display.*; import com.greensock.loading.data.*; import flash.display.MovieClip; var clip_var:MovieClip; var myLoader:SWFLoader = new SWFLoader("data/swf/test2.swf", {name:"nameSwf", container:container_mc, autoPlay:false, onComplete:completeHandler} ); //start loading myLoader.load(); function progressHandler(event:LoaderEvent):void { //trace("progress: " + event.target.progress); } function completeHandler(event:LoaderEvent):void { trace(event.target + " is complete!"); clip_var = myLoader.getSWFChild("clip_test") as MovieClip;//GET CHILD CLIP OF LOADED SWF (NAMED "clip_test") } function errorHandler(event:LoaderEvent):void { trace("error occured with " + event.target + ": " + event.text); } function swfPlay(e:MouseEvent):void { clip_var.play(); } stage.addEventListener(MouseEvent.CLICK, swfPlay);