Search the Community

Actually it looks like it doesn't like interrupting the tween fired in the leave event. I can't use xTo for that because it has a dynamic ease applied. I wonder why it doesn't overwrite it.

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations. If I were you I'd approach this with single tweens per box and overwrite:true or auto. Maybe just focus on trying to swop one box between two different directions without scrollTrigger, then add some more boxes, then add in a ScrollTriggers with some callbacks and swop the direction over in the callbacks. Timelines are pre-calculated and a little less flexible for this sort of thing whereas tweens can be a bit more dynamic. Hope this helps a bit!

Here's how I'd simplify it: https://codepen.io/GreenSock/pen/ExEZxOz?editors=0010 document.addEventListener("keyup", function(e) { let x, y; if (e.keyCode == 37) { // left arrow x = 100; } else if (e.keyCode == 38) { // up arrow y = 100; } else if (e.keyCode == 39) { // right arrow x = -100; } else if (e.keyCode == 40) { // down arrow y = -100; } if (x || y) { // if anything changed... let vars = {overwrite: true}; if (x) { vars.x = gsap.utils.clamp(bigDraggable.minX, bigDraggable.maxX, gsap.getProperty(bigImage, "x") + x); } else { vars.y = gsap.utils.clamp(bigDraggable.minY, bigDraggable.maxY, gsap.getProperty(bigImage, "y") + y); } gsap.to(bigImage, vars); e.preventDefault(); } }); Does that help?

Hey GSAP, first: you are awesome, thank you for these supercool libaries. We want to try out the new ScrollSmoother an got stuck on the following problem: We have a transform based animation with a scrollTrigger: let tl = gsap.timeline({ scrollTrigger:{ trigger: card, start: "top top", end: "bottom top", pinSpacing: false, pin: true, scrub: true, markers: false, }, defaults: { overwrite: "auto"} }); tl.fromTo(cardContent, {scale:1, opacity:1}, {scale: 0.8, opacity: 0.2}); tl.to(cardContent, {opacity:0}); To avoid conflicts with the transform values in the parent container animation (like "jumping" elements) , we use clearProps: true on the parent containers animation. This works like a charm, BUT: with using ScrollSmoother, the same effect of "jumping" elements ist back, as ScrollSmoother is based on transforms. I'm happy for any advice on how to deal with that. Thanks

Hi there! I have an issue using gsap. I'm using chakra and next on my project and i dont know why, but when I put the gsap to work it just make my svg weird, It look to overwrite something that should not happen. If you look at this little example and comment the line of useEffect you'll see what I mean. Hopeful for help, thanks https://codesandbox.io/s/portfolio-app-forked-20tos8?file=/components/projects.js

Thank You Cassie and Jack, there's of course some problem on the logic I'm pursuing, I know that the height of the page plays a key role on the animation I'm working on so I ask u this: if you were to make this animation from that I tried to explain the beginning, where would you start from? I don't want to bang my head unnecessarily If u think there's a better way to approach this animation I'm all ears The only caveat is that the two divs must be 100vh, always, at least when they're visible. (I tried with observer, it seems more fitting but I'm having similar problems with the changing page height Observer.create({ target: window, type: "wheel,touch,scroll", onUp: () => { move('100vh') }, onDown: () => { move(0) } }); function move(value) { gsap.to("#bottom", { "top": value, duration: 1.3, ease: Quart.easeInOut, // overwrite:true }) } )

In general, what do GSAP users have in their arsenal to mitigate animations overlapping when users are triggering multiple non-scrubbed ScrollTriggers and/or tweens while scrolling/moving through a site at various speeds. These are what we've come across: Ensure timelines/tweens do not clash (not always simple) --- however, if you're scrolling through several ScrollTriggers, even if you have a delay or long duration between ScrollTriggers, they can clash if the user scrolls too quickly. I don't think this is the case but it appears that tweens/and callbacks can be skipped if the user scrolls too quickly; we've tested this with .set() and .call(). Add OnEnter/OnLeave logic to check if another timeline is "tweening" and then kill the offending timeline gracefully. I'm not seeing any examples of this between multiple ScrollTriggers, but the logic is fairly straightforward although can be extremely convoluted. Set overwrite on your tweens/timelines. I don't think this applies to separate ScrollTriggers --- I've tried multiple ways and haven't seen any affect between ScrollTriggered timelines that clash. I guess how could it; they are separate timelines? Set overflow hidden on the scrolling container so that the user cannot scroll when a tween is occurring; use very sparingly and only in critical areas; best used with a custom scrollbar to remove visual anomalies. Are there any other ways to mitigate clashes between ScrollTriggers and tweens if a user scrolls/moves too quickly through a site? It's not only too quickly in one direction, but when they reserve direction is when we probably see the most clashing. Is there a default overwrite setting that will have an effect between ScrollTriggered timelines? Does the overwrite already do this and we're just not seeing it/using it correctly? Kind Regards, Nitro Interactive

Nope, that's fine because GSAP sets inline styles for maximum specificity. The only other thing I can think of is if maybe you accidentally killed the opacity animation? Like if after creating it, you did a DIFFERENT animation on that same element and set overwrite: true? I doubt it, but I'm just brainstorming. I would recommend setting an onUpdate on that particular tween so you know when it's being updated, and then open up Dev Tools and scroll to where it should be animating opacity and look in the console to see if it's firing. .to("#header-copy", { onUpdate: () => console.log("updated!"), opacity: 1, ease: "power1.inOut", duration: 30, }, 70); And is the opacity sticking at 0 or is it at 1 the whole time? I wonder if maybe it was not 0 when the tween rendered the first time, thus it's animating from 1 to 1 (no change).

It'd definitely help to see a minimal demo so we can make sure we're addressing the real issue adequately, but here are some thoughts: If you've built a page in a way that requires that one ScrollTrigger-based animation finishes before another one starts (thus it looks weird if the user scrolls fast and they're both playing), you can force the previous one to completion with a callback: let anim1 = gsap.to(... { scrollTrigger: { onEnterBack: () => anim2.progress(0) } }); let anim2 = gsap.to(... { scrollTrigger: { onEnter: () => anim1.progress(1), onEnterBack: () => anim3.progress(0) } }); let anim3 = gsap.to(... { scrollTrigger: { onEnter: () => anim2.progress(1) } }); Overwriting Keep in mind that overwrite logic runs once: overwrite: true - immediately when the tween is created overwrite: "auto" when the tween renders for the first time And when overwriting occurs, it is permanent. So this is not ideal for what you're talking about because you don't actually want to kill...as in dead...permanently. You're just wanting the animation to finish right away, correct? That's why I suggested the code above. For the record, the reason overwriting occurs once (not every time the animation plays) is for performance reasons and because it's almost never helpful to run more than the first time. We're VERY performance-minded. If you're still struggling, please provide a minimal demo and we'd be happy to take a peek.

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

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting and logic troubleshooting. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations. You need to adjust your value on scroll. You could do that in a "scroll" event handler and look at the deltaY of the event perhaps. I would also strongly recommend using the gsap.quickTo() for your tweens that are constantly getting recreated on each mousemove event. The way you've got them set up now, you're creating new instances every time and they're all conflicting with each other because you didn't set overwrite: true (or "auto"). That's bad for performance. You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. Otherwise, if you've got a GSAP-specific question, we'd be happy to try to help with that.

That code/logic looks very strange to me. I suspect @SteveS is correct, that you're overcomplicating and over-engineering things. You've got an onUpdate that's handling things differently based on the progress (odd - it's probably much cleaner to just use two ScrollTriggers) and then if it's more than 25%, you're calling moveAnimate() on EVERY update, over and over again which is creating a new tween each time and there's no overwrite set, so you're creating a ton of conflicting tweens that are all trying to control the same properties of the same elements. That's definitely a problem. The same goes for your xPercent tween in there - you're creating a new one over and over again. If you still need some help, I'd strongly recommend just simplifying things using a few colored <div> elements in CodePen and then post back here with your GSAP-specific question and we'd be happy to take a peek.

That's because you're creating a bunch of conflicting tweens that are fighting with each other for control on every mousemove event. Just set overwrite: true on your line tweens and that fixes it.

Actually overwrite:auto is kinda easy than what akapowl but I think it necessarry to do that hahaaha..Thanks @akapowl @GreenSock

Hi, I tried to figure it out on my own but I'm stuck. The first two parts of my animation work how I want it to, but the last part doesnt. When i scroll down 50vh, I want the floating animation (rotatesletters) to stop and the shapes stop moving And then when I scroll back to the top of the screen, I want the floating animation (rotatesletters) to start again. I've tried: 1. overwrite: "auto", 2. rotatesletters.pause() 3. functions I've also rewritten the code four different ways I appreciate any help. Thank you

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

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.

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!

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.

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.

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

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")// };