Search the Community

Hi @jmsv Welcome to the forum. I'm not 100% sure why that isn't working but I've never use a CSS variable in a quickTo like that. I forked your pen and used regular .to() tween with overwrite:true and that seems to work just fine. https://codepen.io/PointC/pen/wvyXKRO/5a5b57ee5b2604c55c96196a107460b1 It also works fine just setting the property with some vanilla JS. https://codepen.io/PointC/pen/VwQdvJx/1fc0ed60e7cb73262d264d47e447e3f6 Maybe I'm missing something obvious with quickTo. Hopefully @GreenSock can clarify. Happy tweening and welcome aboard.

It looks to me like the problem is the fact that you're creating conflicting tweens and the "mouseEnter" animation is LONGER (0.3) than the "mouseLeave" (0.2), thus if you move fast enough, you could create a situation where the "mouseLeave" animation ends BEFORE the "mouseEnter" one does, thus the "mouseEnter" renders last. By default, overwrite is false. You could simply set overwrite:"auto" but if you want absolute best performance you could manage that overwriting manually like this: https://codesandbox.io/s/beautiful-leavitt-7o2tw?file=/src/App.js

Thanks for the explanation. Setting overwrite: true I can still get the animation to go awry on very rare occasions. I've not been able to isolate the exact circumstances and will report back when I do. The manual overwrite approach works perfectly and I've settled on that. Thanks again.

In JSFiddle, what I have built works like a charm(timeline with boxes that fade in from left/right). This was copied from a previous website I Have created and it worked perfect there as well. However, for some reason on another website it simply won't work. The error thrown is the overwrite error and I simply can't understand why it won't work considering it's literally the same. Done with ScrollMagic, GSAP, jQuery. https://goo.gl/JeUiEE

Thank you for having a look at it. I did overwrite those declarations, however the issue is still there. I also tried commenting out everything but that didn't help either.

You might want to look into the "overwrite" special property: overwrite: true immediately kills all animations of the same targets, regardless of what properties they're affecting. overwrite: "auto" only kills the individual parts of other active tweens of the same targets that are affecting the same properties. But to answer your original question most directly, I assume you're looking for gsap.killTweensOf(). And you can kill() any animation. Tweens and Timelines both have that method. There are actually quite a few ways to do what you're asking. If you still need some help, please provide a minimal demo so that we can see the context and quickly show you how to tweak the code. Happy tweening!

@OSUblake @GreenSock Thanks again for your feedbacks! Sorry for not posting the link to the demo again; it is still in the first post (which I adapted): https://codepen.io/rowild/pen/eYVmJdE There I added the "quickTo", which I cannot get to work. And yes, when talking about "onMoveEnd", I actually mean Draggable – sorry for being so unclear! About my performance question: since I cannot get "quickTo" to work, I define the tween that is frequently called in "onDrag" as extra timeline and invoke "resume()" on it (I now also can call this tween from "onDragEnd"): function pedalOnDragReaction(rotation) { const tl = gsap.timeline({ paused: true }) tl.to(pedal, { duration: 0.5, rotation: -rotation, overwrite: true }) return tl } const handleOnDrag = (rotation) => { pedalOnDragReaction(rotation).resume()} } Draggable.create(bikePedal, { type: "rotation", onDrag: function () { handleOnDrag(parseInt(this.rotation % 360, 10)); }, onDrag: function () { handleOnDrag(parseInt(this.rotation % 360, 10)); }, [...] }); https://codepen.io/rowild/pen/bGLpbQe?editors=1111 It seems to work - but is it an improvement performance-wise?

Hi Michael, Have you seen the new Observer plugin? You can simply some of your event handling with it. 😉 https://greensock.com/docs/v3/Plugins/Observer As far as the rotation goes, you'd have to do some math to get it to work correctly, kind of like what is shown in this post for making a generic directionalRotation plugin. The code in that pen that is inside the if statement for short is what you would need to do. Or just use the built-in directional rotation, but you'd need to use a regular tween. gsap.to(this.elRotation, { rotation: `${degree}_short`, overwrite: true }) A Pen by GreenSock (codepen.io)

Thanks for the reduced test case, @emsee. It is a bit of a tricky scenario. Solution: add these lines after you enable() the ScrollTrigger: g.scrollTrigger.refresh(); // re-calculates start/end gsap.set(g, {progress: g.scrollTrigger.progress, overwrite: true}); // sets the progress immediately instead of scrubbing, and overwrites the scrubbing tween // or you could replace the line above with: gsap.getTweensOf(g)[0].progress(1); When you enable() a ScrollTrigger, it automatically refreshes its start/end values to ensure they're correct, but timelines have to wait one tick to do that (I'll spare you the lengthy explanation, but just ask if you want one). Anyway, when you disabled the ScrollTrigger, it was at a progress of around 0.1 and then when you re-enable it, it must scrub to the new value (0.5) which is what you were seeing. To get the behavior you want, we've gotta basically make the progress jump there instead of tweening there. So we refresh() to ensure the start/end are set correctly, then we directly set the progress and use an overwrite: true in order to overwrite the scrubbing tween. Does that resolve things for you? https://codepen.io/GreenSock/pen/e500c7ad56ff97f35149ba60d194e521

Hello GSAP forum! This is my first thread, hope I post it within the rules around here. I've been using GSAP for quite a while now, but there are still a lot of aspects that I couldn't comfortably say I've figured them all out. Such as overwrite, invalidate, restart, stop, seek and so on... I've been reading docs, search on Google, forum post etc, I still can't figure out the most simple things. Question: In the codepen sample, what should I do so whenever I click on buttons the line goes to left or right from wherever it is when the button is clicked. Multiple times. I seriously couldn't figure it out. Any help would be appreciated. Thank you

Hello! Is it intended that the Promise object, which is returned by a Tween's .then() method, isn't terminated when the animation has been overwritten? At first I planned on using it in combination with the async/await syntax, which sometimes resulted in a permanent halt of the respective function. (In my tests the status of the Promise remains "pending" after the animation has been overwritten.) But even when I use it with a then-catch-structure, no clause is executed. In the end I promisified the GSAP animations myself: // for example function hide(elmnt, duration = 0) { return new Promise((resolve, reject) => { gsap.to(elmnt, { duration: duration, autoAlpha: 0, overwrite: 'auto', onComplete: resolve, onInterrupt: reject }); }); } I feel like this undermines the usefulness of the .then() method (at least for some usecases). Have a good one!

This is my demo link https://tool.baotramcompany.com/animation/v2/ and this my Gsap Code so 1. Can i reduce the space between point A -> B ? 2. Can i reduce the speed of the character movement ? Thanks for you times. Sory i cant push my code to codepen (something was wrong!) var animation; gsap.registerPlugin(MotionPathPlugin, ScrollTrigger); gsap.set("#cat", { scale: 1, autoAlpha: 1 }); gsap.set("#cat", { transformOrigin: "50% 50%" }); animation = gsap.to("#cat", { scrollTrigger: { trigger: "#motionPath", start: "top left", endTrigger: "body", end: () => ScrollTrigger.maxScroll("html"), scrub: true, markers: false, timeScale: 10, onUpdate: self => { gsap.to("#cat", { rotationY: () => self.direction === 1 ? 0 : 180, overwrite: 'auto', onscroll: function () { if (self.direction === 1) { jQuery("#increaseTrans").trigger('click'); //console.log("progress", self.progress); } else { jQuery("#increaseTrans").trigger('click'); } }, //=> self.direction === 1 ? jQuery("#increaseTrans").trigger('click'); jQuery("#moveDown").trigger('click'); : console.log("up"), }); } }, duration: 0.5, ease: "none", immediateRender: true, motionPath: { path: "#text-curve", align: "#text-curve", alignOrigin: [0.5, 0.5], autoRotate: true, } });

I'm half afraid to suggest this because it probably exists and it just didn't read the docs close enough, but I think it'd be really useful to have an overwrite mode that checks the assigned value of a tweened property, and doesn't overwrite if the value of one tween matches the value of another conflicting tween. For example, if you have 1 sec tween to Y position "10", and during that tween you call another 1 sec tween, also to Y position "10", the second tween could be ignored with this proposed overwrite mode. Could be useful when multiple UI elements effect the same targets and you don't want a stutter caused by successive tweens with unchanged property values. Hope that all makes sense.

Working on an app where users can position an SVG on the "stage" and pick an "IN" animation. Uses a from tween that starts offstage and ends wherever the user has positioned the SVG. I pulled the stage setup, some of the code and a few buttons as well as a preselected "already-added" SVG to the Codepen. There's a master timeline and each SVG becomes an element defined in a new svgObject containing its own timelines for animation onto the stage (the "IN" timeline), animation while on the stage (the "ONSTAGE" timeline) and animation off the stage (the "OUT" timeline). There can be multiple SVGs and each can have it's own tweens as well as start and end times, positions, etc for each of the 3 timelines. Kind of like this... Right now, I'm just trying to figure out how to dynamically change the "IN" tween if the user clicks a different "IN" option button. Also, trying to figure out how to properly pass new vars like ease changes. My thought was to overwrite the "in" tween and "in" timeline every time a new "in" option is chosen and to do the same for the out tween and timeline. (The onstage timeline might contain multiple options where I'll need to give the user the option to add/chain new vars and tweens) I must not understand the overwrite var and I also must not understand invalidate. I added... overwrite:'all',onOverwrite:overwrittenTween ... to the tweens but the overwrittenTween function is never running. I'm doing this at the end of each "IN" tween button click listener function... var theTweens = masterTL.getChildren(); console.log("theTweens",theTweens); ... (masterTL is the master timeline), and the tweens are all still there and growing with each click of a new "in" tween option. Also, trying to change the ease is not working as I thought it was supposed to. When I add a new ease like this: activeSVG.twIn.vars.ease = newEase; activeSVG.twIn.seek(0).invalidate(); The tween seems to break. As hinted at above, for each SVG, there's an object structured like this... var newSVG = (function() { var SVG = { el: $('#svg-0'), // the SVG itself id: "0", gp: $('#gp-0'), // there's a group that wraps each SVG with the same id# rotating: null, // GSAP Draggable object dragging: null, // GSAP Draggable object resizing: null, // GSAP Draggable object tlIn: new TimelineMax(), // in timeline twIn: null, // in tween tlStage: new TimelineMax(), // onstage timeline twStage: null, // onstage tween tlOut: new TimelineMax(), // out timeline twOut: null // out tween } return SVG; }); ... so I can set all the in/out/stage timelines and tweens for each object there. I bet I'm missing something really obvious.

Hey Yandex. Some notes: I highly recommend overwrite: "auto" instead of overwrite: true because it will only kill off the conflicting tweens. You probably want to set defaults: {overwrite: "auto"} instead so it's passed to each tween. Why are you using keyframes here? Using regular tweens fixes the issue because defaults on timelines won't get passed to keyframes. They don't get passed to keyframes because keyframes essentially create a sub-timeline and defaults don't apply to those. If you want defaults on keyframes, apply it to the tween itself. You could technically pass in a defaults option that sets the defaults for each tween. Kinda meta but it works: defaults: { defaults: { overwrite: "auto" } } Another alternative is to use the global defaults for gsap: gsap.defaults({overwrite: "auto"}); I'd just use regular tweens: https://codepen.io/GreenSock/pen/WNreEaa?editors=0010

Hi @OSUblake, sorry for the delay in responding, the past two weeks have been hectic. I took what you suggested on board and spent some more time re-reading the docs, I have a habit of trying to run before I can walk... The whitespace bug has been resolved by killing the scrollTrigger and I've set up a wrapper element. Everything is working as intended. let el = useRef(); useLayoutEffect(() => { const q = gsap.utils.selector(el); const wrapper = el.current; gsap.set(q(".fancy-text"), { opacity: .2 }); gsap.to(q(".fancy-text"), { y: -50, opacity: 0, immediateRender: false, overwrite: 'auto', scrollTrigger: { trigger: wrapper, start: "top+=100px center", scrub: .5, markers:true } }); return () => ScrollTrigger.getAll().forEach(t => t.kill()); }, []) Thanks for your help, much appreciated

Hi, Is there a way to loop a Timeline but only say from after a certain point in the original timeline. I'd like to loop an animation, but only after the initial build, so ie after the timeline is finished, restart it again at 3 seconds. I suppose I could just make two separate timelines at worst but wondered if there was a way to do this within one timeline. Thanks. //----------------------- //til = new TimelineMax(); til = new TimelineMax({repeat:3, repeatDelay:0.1}); //----------------------- til.from(root.Image_01, 2.00, {y:550, ease:Sine.easeOut, overwrite: false}, 0.0) //------------------------------ .to(root.Brand_01, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 3.0) .to(root.Tag_01, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 3.0) .to(root.Image_01, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 3.0) //------------- .from(root.Brand_02, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 3.0) .from(root.Tag_02, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 3.0) .from(root.Image_02, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 3.0) //--------------------- .to(root.Brand_02, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 6.0) .to(root.Tag_02, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 6.0) .to(root.Image_02, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 6.0) //---------------------- .from(root.Brand_03, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 6.0) .from(root.Tag_03, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 6.0) .from(root.Image_03, 0.05, {alpha:0, ease:Sine.easeInOut, overwrite: false}, 6.0) //---------------------

Okay, my ignorance again is a stumbling block and buzzkill. I can't see what I'm doing wrong here but it's just looping from the start each time. til = new TimelineMax({repeat:3, repeatDelay:0.0, onComplete:playAfterBuild}); //----------------------- til.add("one", 3.5) .add("two", 6.0) .add("three", 8.5) .from(root.Image_01, 2.00, {y:550, ease:Sine.easeOut, overwrite: false}, 0.0) -- THIS IS THE ONE OFF ANIMATION THAT I DONT WANT TO REPEAT .to(root.Brand_01, 0.06, {alpha:0, ease:Sine.easeOut, overwrite: false}, "one") .to(root.Tag_01, 0.06, {alpha:0, ease:Sine.easeOut, overwrite: false}, "one") .to(root.Image_01, 0.09, {alpha:0, ease:Sine.easeOut, overwrite: false}, "one") //------------- .from(root.Brand_02, 0.06, {alpha:0, ease:Sine.easeOut, overwrite: false}, "one") .from(root.Tag_02, 0.06, {alpha:0, ease:Sine.easeOut, overwrite: false}, "one") .from(root.Image_02, 0.09, {alpha:0, ease:Sine.easeOut, overwrite: false}, "one") //--------------------- .to(root.Brand_02, 0.06, {alpha:0, ease:Sine.easeOut, overwrite: false}, "two") .to(root.Tag_02, 0.06, {alpha:0, ease:Sine.easeOut, overwrite: false}, "two") .to(root.Image_02, 0.09, {alpha:0, ease:Sine.easeOut, overwrite: false}, "two") //---------------------- .from(root.Brand_03, 0.06, {alpha:0, ease:Sine.easeOut, overwrite: false}, "two") .from(root.Tag_03, 0.06, {alpha:0, ease:Sine.easeOut, overwrite: false}, "two") .from(root.Image_03, 0.09, {alpha:0, ease:Sine.easeOut, overwrite: false}, "two"); //----------------------- function playAfterBuild() { til.play("one")// };

I have confirmed it. But what I want is that the next section(wrapper enclosing sections 3, 4, 5), which is longer than the previous section(section 2), covers the previous section, and then scrolls. that example, the height of the sections is the same. plz check my pic Section 2 is overwritten by Section 3. However, Section 3 is smaller than Section 2, so I tried to overwrite Section 2 with the wrappers wrapped around Section 3, 4, and 5. Subsequently, sections 3, 4, and 5 proceed to normal scrolling.

The scrub value is just the duration of that tween, so put in whatever value you want. gsap.to(tl, { progress: 1 - self.progress, ease: "power3", overwrite: true, duration: 0.25 });

Looks to me, like what you are actually doing with that tween is to tween him to his final position on the y-axis again, which is below/outside of that section and since you have overwrite set to true that will overwrite any other tweens on that parachute-guy, thus he won't be visible anymore after that. Since you have a scrub set, the timeline will play in reverse anyway when scrolling back up, so I do not see a real necessity for that tween. Some sidenotes: the toggleActions you have in that same scrollTrigger does not do anything. toggleActions and scrub are exclusive properties, they don't work alongside each other. When you have both set, the scrub will always be the one taking control of your scroll-animations for that ScrollTrigger. ScrollTriggers do not have a duration property. The duration - i.e. the amount of scroll - is being defined by the start and end of a ScrollTrigger. So maybe what you meant instead of duration: "150%" is end: "+=150%" ? let parachute = new TimelineMax({ ... }) is old syntax. I would suggest using the newer GSAP3 syntax for timelines: let parachute = gsap.timeline({ ... })

Do I need to wrap them in some sort of brackets? If so, how do I do that? The timing and sequence for each timeline is now exactly how I wanted it. I added overwrite:true for each timeline, so it would kill any conflicts with other timelines. and I added .kill() for each button so it would kill the other buttons. var start = gsap.timeline ({paused:true, overwrite: true}); btnstop.onclick = () => stop.play(); extend.kill retract.kill The problem is that the buttons and timelines are not killing the actions of previous timelines, even after I added specific details to do this job.. ALSO, for some reason the timelines are working only once per each loading of the page...

I read your question a few times and I'm lost. Sorry You'll significantly improve your chances of getting a good answer if you isolate things as much as possible in a minimal demo. You shouldn't need 100 lines of JS just to show the challenge you're struggling with. Just a couple of <div> elements and a timeline or two with minimal tweens is ideal, just to show the concept. Strip out everything you possibly can. You also might want to look at this (although since I don't understand your question it may not be relevant here): By the way, there's no such thing as overwrite: true on a timeline. That's a tween special property. You can set defaults on a timeline, though, that get passed to all the child tweens. gsap.timeline({defaults: {overwrite: "auto", ease: "none"}}) That can save you some typing.

// you don't need 'new' let TL_mouseleave = new gsap.timeline({ id: 'TL_mouseleave' }); // no need to 'add' you can just call TL_mouseleave.to() & overwrite: false is the default TL_mouseleave.add(gsap.to('#btn', { backgroundColor: 'white', color: 'black', delay: 0, duration: 3, overwrite: false, ease: "ease.in" })); TL_mouseleave.pause(); // so it becomes... let TL_mouseleave = gsap.timeline({paused: true}); TL_mouseleave.to('#btn', { backgroundColor: 'white', color: 'black', delay: 0, duration: 3, ease: "ease.in" }); Some notes on things I changed in your pen

Hey there! It's hard to help by looking at this example because I would do this completely differently - this is a really good case for creating a tween or timeline and then playing it forward/on reverse on hover. e.g. https://codepen.io/GreenSock/pen/zYzYGeN?editors=0011 In general this sounds like it's going to invite conflicts and confusion if you're animating the same properties. There wouldn't be a one case fits all approach - it would depend on which properties you're animating and what you want to happen when they conflict. overwrite:true or overwrite:'auto' will be your friends. Do you envisage the timelines being more complex than these examples? Maybe you could put together a more fleshed out example for us to see?