Search the Community

Hello, I have an issue with ScrollTrigger, can anyone help me to fix it ? I have a full-screen pinned div and I want to see an animation while it is pinned. At the end of the animation, it is displaying a text. I want that once the animation finishes I can only see the last picture, with the text, and never again the animation (until the next page reload of course). When I try to kill the animation "onLeave", it makes a "scroll jump" When I try to kill the animation with "once:true", the pin-spacer remains, and I have a big white space above my text Here are 2 pens to show the issue. In this example, a div becomes yellow when you scroll down, and it must remains yellow at the end of the animation, even if you scroll up again. 1) using once (big white space above the div) : https://codepen.io/Guelid/pen/OJEGzGp 2) using kill ( scroll jump) : https://codepen.io/Guelid/pen/JjBjbYM The text just after the scrolltriggered div is in red to highlight the scroll-jump issue Thanks !

Hi all, I'm trying to disable or kill a draggable element within an SVG. After calling disable() on the draggable, the onClick function still fires. Other effects of disabling are as expected: the element can no longer be dragged, the "grab" cursor style is removed, the onDragEnd function no longer fires. Have also tried kill(), with the same results. Here's a minimal example, tested in Chrome and Firefox. <svg version='1.1' xmlns="http://www.w3.org/2000/svg" x='0px' y='0px' viewBox='0 0 200 200'> <rect x="0" y="0" width="50" height="50" class="draggable1"></rect> </svg> <script type="module"> import { gsap } from 'gsap' import { Draggable } from "gsap/Draggable"; gsap.registerPlugin(Draggable); Draggable.create(".draggable1", { type:"x,y", bounds: "svg", onClick: function() { console.log("clicked"); }, onDragEnd: function() { console.log("drag ended"); } }); Draggable.get(".draggable1").disable(); // onClick function still fires </script> Let me know if you need further info. Cheers Steve

Hi, this is my first forum post and I'm hoping to get some help with an issue and learn more about GSAP. The project I'm working on is replicating a video game character select screen where the user can navigate through 3 characters (using the left and right arrow keys) which have idle animations until selected where an active animation will play on the selected character. I am doing this by using sprite sheets and SteppedEase in TweenMax. I have the navigation and idle and active animations on document ready working. The problem I am having is when switching to the next character. The way I believe it should work (with limited knowledge of GSAP) is to kill the idle animation on the element that's to be selected and return its progress to 0 before adding a new active tween to the element. The main issue at the moment is I cannot seem to kill the animation of the specified object. I have tried using TweenMax.killTweensOf() but this does not reset the progress and when the active tween is added it starts on the frame from which the idle animation was killed. I have recreated a demo with basic sprite sheets (note: there may be an initial delay in loading the sprite sheets in CodePen because I am using Dropbox as a makeshift CDN) and labeled the code I am having issues with with the comment "start here". There are two areas with this comment, one for killing the active tween and one for killing the idle tween. What I am asking for specifically is help in killing and pausing (pause(0)) the tweens in question. The way you will know if this works is if you wait until the sprite sheet in the boxes are at a stage past "1" in their images and then navigation to another box, the sprite sheet of the box you navigated away from should return to the first stage which should display the number "1" and stop the tween, the box you navigate to should also return to the first stage and stop the tween, the 3rd box should continue its tween. I hope this doesn't read like an essay but I wanted to try and give as much detail as possible on what I need help with and what I've tried so far. Again any help / guidance will be appreciated as I've been banging my head against my keyboard for the past few days. Thanks

Hi guys, I have a generall question while starting to use GSAP with barba. I wonder if someone of you could bring light into my JS-darkness at this early point. I am trying to find a solid basic setup with both of the libraries together. barba.init({ views: [{ namespace: 'home', afterEnter(data) { initTimeline1(data.next.container); initTimeline2(data.next.container); initTriggeredTween(data.next.container); }, }] }); const initTimeline1 = (next) => { const tl = gsap.timeline({}) .to(next.querySelector('el1'),{'GSAP MAGIC'}) return tl } const initTimeline2 = (next) => { const tl = gsap.timeline({scrollTrigger:{}}) .to(next.querySelector('el2'),{'GSAP MAGIC'}) return tl } const initTriggeredTween = (next) => { next.querySelector('el3').addEventListener('click', () => { gsap.to(next.querySelector('targetEl'),{'GSAP MAGIC'}) }) } barba.hooks.beforeEnter( () => { ScrollTrigger.getAll().forEach(trigger => { trigger.kill() }); ScrollTrigger.refresh(true) } ) I leaned so far, that I have to kill the ScrollTriggers, because things dont work, if I return to the page with namespace"home". But if I reinititate the timelines, tweens and events again and again I am wondering if I am causing a memory leaks. Do I have to kill, remove, destroy all of them manually or does the garbage collection take care of things by itself? And if I have to manage the things, are there similar support functions like ScrollTrigger.getAll() for helping me out? I just read, that killAll is deprecated. Sorry for my English, and the question which may be a little off topic. Many thanks in advance

Hey, step by step, I figure out, how this fantastic plugin works, but there is one thing, I'm not understanding: The goal is, to make two different instances, which means, when the viewport is wider than 992px, it should load the instance for big screens. When it comes to smaller viewports (on resize), it should kill the actual instance and init a new one for smaller Screens. And that works perfectly with kill(), clearProps and then new init. But it works only on resize, when my scroll position is within the start and endpoint of the first screen instance (isActive). For example, I am on a big screen, scroll down for a while, after showing up my animation, I decide to change the screen size under 992px width. In that case, I get a blank viewport (the white pin-spacer gets visible). Any idea, how to solve this issue? You can see this behavior in the codepen demo. Just resize the demo at the start position and after, at the end of the page. You can see a different behavior. Thank you very much for your support!!!

hi guys how i can kill all current animation from target objet ? Related to doc , am not sure am understand. i get `TypeError: TweenLite.kill is not a function` so here the example what am target. Hold click will power Shake the hud. But if release click befor i click shakes animations, i want kills. So here my experiment When downClick pointerDW(e) { TweenLite.to(this.sprites.c2.scale, 0.2, { x: 3, y: 3, ease: Back.easeOut.config(1.7) }); this.sprites.c2.alpha = 0 TweenLite.to(this.sprites.c2, 1.3, { alpha: 1,rotation:Math.PI, ease: Power4.easeOut }); TweenLite.to(this.sprites.c2.scale, 1, { delay:0.2, x: 1.4, y: 1.4, ease: RoughEase.ease.config({ template: Circ.easeOut, strength: 3, points: 50, taper: "in", randomize: true, clamp: true}) }); TweenLite.to(this.scale, 0.2, { x: 0.75, y: 0.75, ease: Back.easeOut.config(1.7) }); TweenLite.to(this.scale, 1.2, { delay:0.2, x: 1.3, y: 1.3, ease: RoughEase.ease.config({ template: Circ.easeOut, strength: 2, points: 50, taper: "in", randomize: true, clamp: true}) }); this.slots.forEach(slot => { TweenLite.to(slot.position, 1.2, { x: 0, y: 0, ease: SlowMo.ease.config(0.7, 0.7, false) }); }); }; and than, when release click i want kill all thoses. i use es6 decomposer the Error come from TweenLite.kill(null, [this,this.sprites.c2,...this.slots]); pointerUP(e) { // kill all animations FIXME: ? TweenLite.kill(null, [this,this.sprites.c2,...this.slots]); // start new animations ...... from the cancel this.slots.forEach(slot => { TweenLite.to(slot.position, 1.2, { x: slot.position.zero.x, y: slot.position.zero.y, ease: Power4.easeInOut }); }); visual help .... thank for help

Hi. This is probebly an easy one, but I need some one to point me in the right direction here. I can't get .isActive() and .kill() to work on my TimelineMax (or don't understand how it works). I have search the forum and tried some examples but still no luck. I want to create a simple feedback animation for the user when click on a save button. If the user clicks several times while the animation is running, I want it to kill the active one and start a new one. Does not sound that hard, but now it just create an other feedback message beside the existing one. Please help.

I have this tween that repeats infinitely: var sparkleblink = TweenMax.staggerTo(".confetti", .5, {ease:Linear.easeNone, opacity:.2, repeat:-1}, .01); but I want to stop this animation after a certain point. I have a TimelineLite() which calls a function after the last animation: var tothebox = new TimelineLite(); tothebox.to(".scrollnotif", .1, {opacity:0}) // ** other animations here** // .to(".scrollnotif", .1, {opacity:1, onComplete:killthis}); Then I have that function that's being called onComplete: function killthis(){ sparkleblink.kill(); } Not sure if I'm missing something or what. Advance thanks for whoever is going to help!

Hello ! Dear guys, I have a problem. My program works llike: I have one animation and when I click on e.g. 'Button1' my animation will change, and second animation will start (in infinite loop like the first). I created an object with coordinates of my polygon points. I start with points[0]. When I click on button1 named 'Warsaw' my function gets current position of each verticles and paste it into new object with coordinates because I want a smooth transition between my animations. So I think: Aha! I kill my old animation, create short new animation (with transition from current coordinates to first coordinates of my second animation), kill short animation and finally create my second animation which will be infinity looped (but until click on the second button). But! When I want to kill my first animation, javascript console says "TweenMax.kill is not a function". I don't know how repair that. Please help And sorry for my english

I'm a newbie to Web Development and in the process of learning if GSAP can fill my animation needs. I am pretty sure it can. This is my second post. In my first post, I mention I am currently taking an E-course and I am in the middle of creating a javascript reaction tester application: http://codepen.io/KerryRuddock/pen/rLJPkq To view the codepen correctly, please change the View to Full Page. Click Start. A random sized and colored ball rotates around the screen based on a set of CSS keyframes: twirl This codepen is HTML, CSS and JS only, no GSAP just yet. The code is a collection of tests in CSS and Javascript. Not all of the code is used within my application, I am experimenting. Apologies for any code read-ability issues. I need to know if I can do the following with GSAP and perhaps a hint in the direction to go in. In this topic, I use the word 'tweened' to cover any object that is the middle of animation, transition, transform, keyframes, and any other time/movement speciality that I may have missed.. 1) I will be changing the reaction tester animation to GSAP I hope the switching over goes smooth. My goal is to have a 'tweened' object collision detection checking in real-time. The collision may be against a border or perhaps another 'tweened' object. I need to perform real-time interval checks of the shapes x,y position of the object during a 'tween'. Can I do this? On a mouse-event, ie. object.click(), I need to kill any tween any progress. Can I do this? On a collision-event, I need to either be-able to either a) kill 1 or more tweens and start new tweens, or modify the existing tween that is currently running. Am I able to do either a or b or both? Thanks for your time, Looking forward to your feedback.

Hello everyone, I am currently creating a page that uses the GreenSock animation library to trigger animations as a user scrolls down the page. The interesting kink in this is that I need to swap out timelines I have created for the sake of responsive design (ie the animation graphics change to less complex ones when the page gets smaller.) This is a simplified test case from my actual page, but gets the same point across. The primary issue I am having is with using .pause() and instantiation of a new TimelineMax() that uses the same elements. For example, if I create a timeline with a Tween, and then pause it: var t1 = new TimelineMax(); t1.add(TweenMax.from($('#element1'), 1, { scale: '0.2', autoAlpha: 0, transformOrigin: 'center center', ease: Back.easeOut }), 0); t1.pause(0); // reset to beginning and hold, don't play yet. I can then play the animation back later on using .play() or .restart() and it works fine. However, let's say I never actually play the animation, and then kill this timeline, and attempt to create a new one that attaches to #element1: // so, instead of t1, we want to run t2 instead, so kill t1 t1.kill(); // create t2 instead var t2 = new TimelineMax(); t2.add( TweenMax.from($('#element4'), 2, { x: '-5px', ease: Power2.easeOut }), 0) .add( TweenMax.from($('#element3'), 2, { x: '-10px', ease: Power2.easeOut }), 0) .add( TweenMax.from($('#element2'), 2, { x: '-20px', ease: Power2.easeOut }), 0) .add( // Note element1 is reused here TweenMax.from($('#element1'), 1, { x: '-5px', y: '20px', scale: '0.2', autoAlpha: 0, transformOrigin: 'left bottom', ease: Back.easeOut }), 0.5)) // attempt to run t2 t2.play(); In this case, t2 will never run the animation/TweenMax on #element1 if t1 never left the paused state. However, if t1 was ever actually played with t1.play() before the t1.kill(), t2 will work successfully. I'm not sure how this works internally with GreenSock or if there is a better way I should be changing out animation timelines on the same objects. This only seems reproducible if .pause() is called, and .restart() / .play() is never called on the timeline originally containing (in this case) #element1. Does anyone have a workaround or a better method for me? I've been banging my head on this for hours and have come to the conclusion it's either post here or start digging into GreenSock source.

Hi everyone, my situation is this: I have two timelines, one for the loading initial animation and another one for the coreography when the page is loaded. The animation of the loader (a spinner) is made more or less the same as the codepen linked but in this way, as you can see, the rotation doesn't stop properly. (In simple words i want to pause the rotation animation WHEN the page is loaded, but I doesn't want to stop that if it's still moving) tlTimeline .to(test, 1, {rotation: "+=90", repeat: -1, repeatDelay: 1, onRepeat: loaded}); function loaded(){ tlTimeline.pause(); tlOpening.play(); //this one is not included in the codepen } I need to find another way to stop the repeat animation at the end of the repeat animation because in this way it makes a little step forwards.

How do I kill tweens past a certain point in time? So, I have a timeline with a bunch of tweens all starting at random times. I want to remove tweens of certain elements that either start past a certain point in time, say, 5 seconds, or tween beyond that point in time. I know about killTweensOf(), but now how do I killTweensPastTime()? I searched google and these forums but couldn't find anything. Thanks, John

Hi everyone. I set a infinite timeline with some callbacks onComplete & onRepeat that change numbers around the page. I'm working into an ember application, so because of my timeline is infinite and change numbers in the page I need to kill everything when the user leave the page to another, otherwise when he will come back the new timeline initialization will mess-up the design. I tried with the function mytimeline.kill() but looks like it doesn't work. Any idea on how to solve? Cheers! ps: it's difficult to provide a codepen in this case sorry

I'm trying to kill a tween after it plays- mainly because the <div> flies off the page- but it's still there, as you can scroll to the right and it is still there. I would like both divs to disappear after animating through the timeline. I know there is a "clear()" as well, or maybe I should be using "clearProps" Thanks

Hi all. I have a problem with pausing a point of TimeLineMax. I have an animation queue like this: var tl= new TimelineMax({paused:true}); var tm1=tl.set(".circle-f:nth-child(7)", {autoAlpha:0,scale:0,backgroundColor:'#00E5FF'}) .addLabel("mystart") .to(".circle-f:nth-child(7)", 0.3, {autoAlpha:1,scale:0.2,backgroundColor:'#00E5FF'}) .addLabel("mystop") .to(".circle-f:nth-child(7)", 0.3, {scale:1,backgroundColor:'transparent'}) .... The problem is when I want to reverse timeline from "mystop" to "mystart". I do it easily by : if(//for example: scrollTo<=500) tm1.tweenFromTo("mystop", "mystart"); But this animation when will be run that condition above is true. Actually, the animation will be run from mystart to at the beginning point of the timeline when the condition is true. I want to run the animation once, only. So I have to kill that: if(//for example: scrollTo<=500) tm1.tweenFromTo("mystop", "mystart"); tm1.kill(null, ".circle-f"); But it kills all animation of ".circle-f" on other conditions that I don't want to happen it. The question is is there any way by other condition I can turn off the kill or return the animation has been killed. And there is a way to make me don't use of kill? I tried with addPause but I couldn't understand when I use it like this: var tl= new TimelineMax({paused:true}); var tm1=tl.set(".circle-f:nth-child(7)", {autoAlpha:0,scale:0,backgroundColor:'#00E5FF'}) .addPause() .to(".circle-f:nth-child(7)", 0.3, {autoAlpha:1,scale:0.2,backgroundColor:'#00E5FF'}) .addLabel("mystop") .to(".circle-f:nth-child(7)", 0.3, {scale:1,backgroundColor:'transparent'}) .... How can I call it when I am calling its playing? Like this? tm1.play(); tm1.addPause("mystop"); Please let me know and help me if it's possible.

I have multiple elements that are being used as the trigger under one class. For example, the "dragHandle" class is my trigger: <div class="dragHandle"></div> <div class="dragHandle"></div> <div class="dragHandle"></div> <div id="draggableLayer"></div> This is fine when it is first initialized. All three will drag the "draggableLayer." The problem is, I am dynamically adding more "dragHandle" elements, and they are not seen as triggers after Draggable has initialized on page load. I.e: <div class="dragHandle"></div> <div class="dragHandle"></div> <div class="dragHandle"></div> <!-- these 2 were added after page load, but don't work like the others do as a trigger --> <div class="dragHandle"></div> <div class="dragHandle"></div> <div id="draggableLayer"></div> I have tried disabling (and killing) and then enabling the Draggable after adding the the additional trigger elements, but that hasn't worked. Is there a way to destroy and reinitialize the Draggable? Or maybe another way to make it see the additional trigger elements I am dynamically adding? Thanks!

Hi, I have big problem with killing The problem: 1. I have 5 functions fired one by one with "onComplete". 2. I need to kill any tweens from this functions in any time, and it works properly when I kill any of these functions for the first time. 3. It doesn't work properly when I fired these functions and try too kill one again. 4. It does look like "the killing machine" remember position of myElement when the first "kill" was fired and move in a blink myElement to this position, then of course kill the tween. Should I clear something or maybe something else? Best Regards

function mouseOUT(e:MouseEvent):void{ TweenMax.to(menu_MAIN, 2, {rotation:"360", ease:Linear.easeNone, repeat:-1}); } function mouseOVER(e:MouseEvent):void{ TweenMax.killTweensOf(menu_MAIN);; } Hi guys, here is a little problem I have and cant figure out how to solve it say I have a clock hand @ 12 o'clock which rotates constantly until I MOUSE_OVER it, what I am trying to do is when I MOUSE_OVER it I want the clock hand to always stop @ 12 o'clock no mater when I MOUSE_OVER it. Thanks for your help in advance Steven

I have the following situation: I have one timeline. I append to it a sequance of TweenLites with target1. A little later i kill tweens of target1, and try to launched a sequance of tweens for target2. The problem: animation for target2 is not launched, it's only works when i call timeline.kill() instead of timeline.killTweenOf(target1) I hoped to use a single instance of TimelineLite to handle all needed animations. i.e. I want to use timeline.append, timeline.insert for many targets, and if the target is repeated or i just needed to get rid of tweens, 1stly kill it's animation and run new after. What i'm doing wrong? var timeline:TimelineLite = new TimelineLite(); for each (var obj:Object in transitions) { timeline.append(new TweenLite(target1, transition.duration, transition.to)); } timeline.play(); After a few time the following code is launched timeline.killTweensOf(target1); for each (var obj:Object in transitions) { timeline.append(new TweenLite(target2, transition.duration, transition.to)); } timeline.play();

I am trying to build my own custom rotator, but I am having a problem with interrupting the current animation, then going to a specific one to play from there. I made a click function that plays from the desired spots, but I have tried several ways to interrupt the current animation. disc01.onclick = TweenMax.killAll(); animate_rot01; disc02.onclick = TweenMax.killAll(); animate_rot02; disc03.onclick = TweenMax.killAll(); animate_rot03; disc04.onclick = TweenMax.killAll(); animate_rot04; disc05.onclick = TweenMax.killAll(); animate_rot05; Here is the link to my codepen http://cdpn.io/IKvah If I take out the killAll it plays through fine, but when I add it, it seems to fire before I click anything. Any help would be awesome. After I figure out how to kill the animation I want to have the click ignore the delay.

Hi Greensock guys, Know this topic has been covered a little in some other posts, was reading about using media queries and 'resize' functions here and here, but I wanted to double-check something with you in regards to responsive animations. I've just put together a quick landing page for my portfolio, found here (and big thanks to the GS guys for helping me nut out questions I had along the way with it), and I'm using an if/else statement after the $(document).ready to fire differently scaled animations depending on the browser width. I had put in a window resize event handler in my script but I noticed it was screwing with the animations, they would still be stuck on a particular width's animation even though it had resized. Plus, I was essentially just repeating the same code all over again to get it to work, was thinking there must be a better way to call responsive animations than this. So I'm guessing to make these kinds of responsive animations work we'd need to kill the currently running ones first right? And is there a better/cleaner way of doing this than just repeating functions over when a browser resizes, say for instance if I just made the if/else media queries a function of their own, then recalled that function when a resize fired? Apologies if this is actually simpler than I've figured, I just wanted to clarify this in case any other devs needed a simplified answer to this too, am finding myself having to do a lot of these responsive animations lately and I thought it would be wise to get a more definitive approach to it Thanks as always guys.

Hello all... i had a couple questions about clear and kill methods: What is the difference between using clear(), versus one of the kill methods and/or clearProps? Is the clear() method faster, and just clears a timeline? ...versus using one of the kill methods, or clearProps on a individual basis? Also is clear() better than using killAll()? thanks ahead of time for any clarification?

Could someone explain the difference between using kill() or clear() on a timeline? That is, besides kill() being able to kill individual tweens, lets assume we're using kill() on the entire timeline itself. The documentation is unclear (use kill to kill a tween; define kill?). If they're the same, then why use clear(), other than the timeline instance being preserved? And, I'm interested if either resets the positions of elements in a timeline to their beginning position, or what the best way to go about that is? Thanks!

I have a DOM element that stores a TimelineLite Object in a data object. I reference this stored TimelineLite Object at a given time and call the kill() method on this object. From what I understand and desire, the kill() method will immediately stop the animations on the TimelineLite Object and release for garbage collection. I have several tweens and potentially timelines nested in the referred TimelineLite Object. I want them all to stop immediately even if currently tweening. They should stop right where they are. This is not what I am experiencing. Currently tweening animations/tweens continue to run until completion, and only then do animations stop (do not continue to run). Am I doing something wrong here? Should I be using a different method to accomplish the desired result? Should I be getting the nested tweens/timelines and then kill() those first?