Search the Community

I am building a code exporter for GSAP React in vanilla JS/HTML/CSS as an exercise and proof of concept. It seems like whenever i update the parameters the GSAP animation multiplies resulting in huge jumps in motion. I have tried .kill but no results. I am wondering if there is a better way to do the hover interaction? Demo can be found here Js code: // Define a function to handle the animation function animateElement() { const element = document.getElementById("element"); const container = document.getElementById("container"); const width = document.getElementById("widthInput").value; const height = document.getElementById("heightInput").value; const unit = document.getElementById("unitSelect").value; const fromwidth = document.getElementById("fromwidthInput").value; const fromheight = document.getElementById("fromheightInput").value; const ease = document.getElementById("easeSelect").value; const duration = document.getElementById("durationInput").value; const scrolltriggercheck = document.getElementById("scrolltriggercheckbox").checked; const radiobasic = document.getElementById("radiobasic").checked; // Set initial values gsap.set("#element", { width: fromwidth + unit, height: fromheight + unit, }); // Define the animation based on mouse enter and leave events container.addEventListener("mouseenter", () => { gsap.to("#element", { width: width + unit, height: height + unit, ease: ease, }); }); container.addEventListener("mouseleave", () => { gsap.to("#element", { width: fromwidth + unit, height: fromheight + unit, }); }); // Generate the exported code dynamically const exportedCode = `${ radiobasic ? `export function animation(): Override { useGSAP(() => { gsap.fromTo( "#element", { width: '${fromwidth}${unit}', height: '${fromheight}${unit}', }, { delay: 0.1, duration: ${duration}, width: '${width}${unit}', height: '${height}${unit}', ease: '${ease}', ${ scrolltriggercheck ? `scrollTrigger: { trigger: "#element", start: "top bottom", end: "bottom top", stagger: 0.5, markers: false, },` : `` } } ) }, []) return {} };` : `Hover` }`; document.getElementById("exportedCode").value = exportedCode; } // Attach event listeners to input fields to trigger the animation dynamically const inputFields = document.querySelectorAll("#widthInput, #heightInput, #unitSelect, #fromwidthInput, #fromheightInput, #easeSelect, #durationInput, #scrolltriggercheckbox, input[name='animationtype']"); inputFields.forEach(input => { input.addEventListener("input", animateElement); }); // Initial call to set up the animation based on initial values animateElement();

Hey, so I've created a nice little hover effect which I apply to several buttons using .each() but for the life of me I can't work out how to kill the hover effect so that I can apply a different hover effect to it after I apply a transition to the buttons. I know this is more of a logic problem than a GSAP one, but I've used every "kill" method I know of, but for the life of me I can't work out how or where to call the code so that it kills this hover effect. I've created a very reduced example. The intention is that when you hover the red boxes, they grow and turn blue, then when you click them, they shrink and turn green. At this point the hover timeline should be killed so that I can apply an alternative hover timeline but this is where I come unstuck. On lines 47 - 50 you can see my attempts to kill the timeline. Again, I know this is a logic rather than any inherent problem with GSAP but if somebody could point me in the right direction, I'd be very grateful. Thanks.

I tried to make a simplified version of what I experienced in another project. Essentially I get 2 warning in the console. I tried to make a modal that it will render if the state is equal to true. Else it will return null. I believe my issue is due to returning null. But I don't know how to do this another way. I experimented with the kill() option in gsap, but I had no luck with it. Here is the reference from the docs that I read. import React, { useRef, useEffect } from "react"; import gsap from "gsap"; export default function TestGsap(props) { const box = useRef(); useEffect(() => { gsap.from(box.current, { y: "500", ease: "expo", duration: 2, }); }); if (props.toggleModal === true) { return ( <div> <section ref={box} style={{ width: "10rem", height: "10rem", backgroundColor: "red" }} > <p>Hello, I am a red box.</p> </section> </div> ); } else { return null; } }

Hello, can anyone help me with this error? (I want to preface that I'm a newbie at coding and I only try to adapt from other as much as I can understand...) I have adapted some code from the forum which explained how to use GSAP for different media queries but I cannot seem to make the functionality work... The idea: When page is fullscreen, the menu icon should trigger and animate GSAP timeline on >mouseenter/mouseleave< for selector ".menu-links". ( I used .play(); and .reverse(); ) When page is going devices size screens, mobile/tablet < 733px, the menu icon should trigger and animate GSAP timeline on >click< for selector ".menu-links + #social" ( I used .restart(); and .reverse(); ) ---- the code works right now only when page is loaded in mobile size to begin with, if resized functionality breaks. also vice versa, desktop resized to mobile ---- My question is can: this be done better? Ideal would be to resize page without losing functionality going from big screens to small screens without page reload. ==== ps: if this topic is wrongfully opened please feel free to delete it. Thank you very much, Alex

I don't have a codepen but basically what i want to achieve is this: I have some data loading in the background, and i'm using GSAP3 to create a timeline that's animating an svg infinitly, it's a preload animation basically. What i want to do is that when the data is loaded, i want to pause the current timeline object, animate it until the progress is 1, and then when the animation is completely finished i want to create another animation to smoothly animate the preloader out of the screen and then show the loaded data. I saw an example of this in GSAP2 using TweenMax where: you pass the tweenmax object into the to() method, animate the progress property and then assign a callback function to the onComplete() property to kill the timeline object, but that doesn't seem to work in GSAP3, the svg abruptly jumps to the it's final state (where the progress is equel to 1) instead of animating to it. Can you please tell me how can i achieve this? I can't seem to find any example of this in GSAP3. Thanks in advance!

OK - I give up. Been struggling with this for the last three hours. I am by no means a JavaScript expert but I am pleased with the amount of things I am able to do with it. GSAP tools are poised to really open things up for me but - MAAAN - am I taking it in the shorts. I like to learn though so I don't necessarily mind the struggle but I am clearly missing something here. I made a really simple animation with a rotating box - (imagine in your mind a box fan in the window). I created four buttons to set the speed of the rotation high, medium, low, and off. High, medium, and low work great and my codepen here might lead you to believe that the Off button works too but it is more of a gimmick than a true off. I got it to look like it is off by using fromTo and setting the rotation to zero for both. What I really want is to get the kill() command to work properly but have been failing all night long. I have tried tons of variations and none of them seem to work. I have read the docs on it which generated some thoughts but no success. I have read several forums with similar questions but many of them simply pointed to the docs on the kill() command - so that didn't get me much further. I have tried rearranging the code, using a jQuery example I found in one of the forum posts, and setting my animation to a variable so that I could try using variable.kill(); but that didn't seem to help either. So here is what I am left with - the pseudoStop. What in the world am I missing in trying to get the kill command to work?

Hello, I'm very new to GSAP and am trying to figure out how to pause a tween on the hover of a specific div. The code for the auto scroll was corrected in a previous forum post, but I'm now trying to make this slight adjustment because the aforementioned div is a slider. So when the mouse hovers over this div, the animation needs to pause in order for the user to click through the slides. I'm not sure if I need to assign a timeline to my tween, etc. in order to accomplish this? I've tried to implement some examples from the docs, but nothing has worked; just wanting to see if there's a method simpler than determining if the cursor is in its bounds. Any help is greatly appreciated!

After killing animation and setting a new style, the new animation starts from the wrong position Steps for reproducing: Create new tween let tween = TweenMax.to($test, 5, {x: 100}); Kill the tween while animating tween.kill(); Change target style $test.style.transform = 'translate3d(0,0,0)'; Start new animation TweenMax.to($test, 5, {x: 100});

Hi, First of all thank you for developing such an amazing lib and it has made our lives much simpler. We are developing a major website using greensock where all the animations are being handled by various timelines. it is a single page website so there is no page refresh. The top navigation helps navigating between timelines by tl.play(). These timelines also have a loop of flickering text set to repeat -1 The issue arrises when we load a new timeline and go back to the previous timeline. Then the loop starts running twice and the page crashes. I wish to kill all timelines on the document whenever a new timeline is loaded. Because there are like 20 chapters, it would be very very tedious to kill all animations on every click. I tried using TweenMax.killAll(); this abruptly kills all animations ( even if i have an animation playing ) and the next animation doesnt play. I tried using chap2.kill(); this works nicely but is not expandable. There are going to be 20 chapters which will make developer's life miserable. My code : chap1 = TimelineMax chap1.to(something) chap2 = TimelineMax chap2.to(something) // option 1 (not working) //click on chap1 in top nav TweenMax.killAll(); chap1.play(0); //click on chap2 in top nav TweenMax.killAll(); chap2.play(0); // option 2 (working but tedious) //click on chap1 in top nav chap2.kill(); chap1.play(0); //click on chap2 in top nav chap1.kill(); chap2.play(0); Can you please help me out over here. How to use killAll to enable a seamless display of animation. I was short on time so didnt make a codepen. If my query is not clear I will make a codepen n provide the details too. Thanks for your product. I hope it will keep on becoming better every day.