Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'kill()'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 7 results

  1. 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; } }
  2. 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
  3. 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!
  4. 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?
  5. 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!
  6. 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});
  7. 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.