Search the Community

Hi @kcarp Welcome to forums! You're not missing anything obvious, you just stumbled upon a quirk when going backwards. This post gives an explanation and helper function for onReverseComplete. Also, for a smoother transition when changing direction, you can animate the timeScale. gsap.to(anim, { overwrite: true, timeScale: self.getVelocity() / 5 });

Typing too fast - yep, I meant overwrite: 'auto' I'll edit that to avoid confusion.

I think perhaps you meant overwrite: "auto" on the second tween. overwrite: true immediately kills all other tweens of the same target (even if there aren't any overlapping properties). The "auto" mode only runs the first time the tween actually renders, and isolates only the individual properties that overlap. Also keep in mind that once a tween (or a property in a tween) is killed, it's dead. It doesn't come back the next time you run it. I personally favor the finishOnFastLeave() helper function approach because it avoids killing things so that if the user scrolls back up and goes slowly, things still work the way you intended.

Hey @Nysh, There's still going to be a conflict between the tweens, you just can't see it as the first tween is playing too fast to notice. If we slow it down and you scroll down fast it will still be there. The magic combo in this case will be immediateRender:false and overwrite:'auto' on the second tween. This will result in the behaviour I think we were both expecting! ScrollTrigger tweens render immediately so that all the positioning can be precalculated. We want to wait and only run overwrite as the second tween plays, that way any conflicts occurring at that point will be killed. https://codepen.io/GreenSock/pen/GRmzWob?editors=0010 Here's a simplified demo with some console logs to show the start, end and when the tween's interrupted! https://codepen.io/GreenSock/pen/c298bc17db96f11251efc1740a4d10e4?editors=0011

Another option: use an onToggle that checks the velocity and if it's adequately fast, it just forces the animation to its end with a reusable helper function like this: function finishOnFastLeave(self) { !self.isActive && Math.abs(self.getVelocity()) > 2500 && self.animation.progress(self.progress === 1 ? 1 : 0).pause(); } Usage: onToggle: finishOnFastLeave https://codepen.io/GreenSock/pen/eYWbZxN?editors=0010 No, overwrite logic runs ONCE for a tween (for performance reasons): overwrite: true - runs immediately when the animation is created - it finds all other tweens of the same target(s) and kills them in their entirety. overwrite: "auto" - runs the first time the tween renders; it isolates and kills only the conflicting individual properties in other tweens that are active at that moment. If you invalidate() a tween, then the first time it renders after that, it'll re-run the overwrite: "auto" routine at that point too. Here's another thread where we discussed several options for handling fast scrolling and overlapping scroll-driven animations (skip to the final few pots):

Interesting. I would have thought overwrite true would have worked here too. 👀 When the box tween in the box2 timeline has overwrite true set, the first box tween doesn't play at all... I'm definitely missing something. https://codepen.io/cassie-codes/pen/f73a2dfc64470853d40c7540cb8996fd?editors=1010

Hey guys, I'm running into problems when i scroll down or up too quickly. It must be something quite simple, I'm missing. If you scroll down slow, then box 1 appears, and then as you go further down, box-2 appears. But if you scroll down quickly, past both triggers, box 1 doesn't disappear quick enough and all the boxes appear on top of each other. I'm using fromTo's and I've tried "immediate render: false" and "overwrite" but, have not been able to work out what is causing this issue. Hope that all made sense. I've made a minimal codepen demo to show what's going on. Any help is greatly appreciated. Cheers

You can animate the progress of a timeline. onUpdate({ progress }) { // add this if you want it to stop it when scrolling up // gsap.killTweensOf(tl); if (tl.progress() < progress) { gsap.to(tl, { progress: progress, duration: 3, overwrite: true }); } }

Indeed That's what I tried but there are always new errors and it doesn't seem to overwrite what is done in the private function so... Just making a search replace in all files before delivery with sublime text is much faster

@GreenSock thanks Jack, that clarifies several questions. I didn't realize I could set everything to a fixed height and hide the overflow -- I thought that would impact how ScrollTrigger behaves. That makes it much easier to calculate the position in different scenarios. I also see revert and refresh options are part of the self.enable() function but I didn't see those documented. @OSUblake I created as minimal of a Codepen demo as possible. I'm pretty sure this behavior is correct but I'm trying to find a work around for anchors. Within each section would be many other ScrollTriggers with their own timelines; each section is pinned for the duration of those animations. I also tried Jack's suggestion -- I am able to save and set a scrollTo position with overwrite: "all", after re-enabling the ScrollTriggers and it does move the viewport to that position (the position is off due to paddingBottom but this can be calculated/accounted for other ways), but several of the ScrollTriggers end up firing (timelines become overlapped). I looked at the self.enable function -- the viewport is reset when self.enabled is set to true; but as you know that's tied to a ton of logic. I'm hoping to just toggle the ScrollTriggers off, move the viewport, toggle them back on so the current section (and all other sections) continue pinning. Use case would be for anchors and other functionality that might require going through all of the ScrollTriggers very quickly --- another example: scroll to top button. https://codepen.io/steve-giorgi/pen/jOmeBwK I'm forking the demo to see if I can replicate the behavior described above when saving/restoring the position.

Yeah, that's what loops are for. 😉 gsap.utils.toArray(".btn-rotated").forEach(btn => { const animation = gsap.to(btn, { paused: true, rotation: 360, repeat: -1, ease: "none", duration: 5 }).timeScale(0); btn.addEventListener("mouseenter", () => { animation.play(); gsap.to(animation, { timeScale: 1, duration: 1, overwrite: true }); }); btn.addEventListener("mouseleave", () => { gsap.to(animation, { timeScale: 0, duration: 1, overwrite: true, onComplete() { animation.pause(); } }); }); });

the timescale example is what i was looking for. in the start there is smooth easing, in the middle(during hover) an infinite loop and at the end it kinds of fades out with easing. thanks @OSUblake – but i like the code more of @cassie 2nd codepen as i need to be sure to trigger animation for the current element if there are multiple with same classes at once. so this is my final code: $(".btn-rotated").mouseover((e) => { gsap.to(e.currentTarget, { duration: 5, ease: "none", rotation: "-=360deg", repeat: -1 }); }).mouseleave((e) => { gsap.to(e.currentTarget, { duration: 2, ease: "power.out", rotation: "-=50deg", overwrite: true }); }); only thing whats missing is the smooth easing start.

Hi Julia! ThrowProps is deprecated. See the IntertiaPlugin docs. https://greensock.com/docs/v3/Plugins/InertiaPlugin Another change from v2 to v3 is the overwrite behavior. If we're animating the same properties with different durations, we should definitely overwrite those animations. GreenSock Slider with Skew v3 (codepen.io)

Not sure I fully understand your question, but you probably shouldn't be making an animation just for the initial state. Click Animation On Array Index i Overwrite Issue (codepen.io)

we can play animations when we click on the Nav "Slides 1 2 3..." and i want it to start as Slides[0] index array element that is Slide A as already Played or Finished animation, and then we can click on Nav slides to play the animation the issue im having is, i want when i click on Slide 2 3 4 or 5 it should Overwrite gsap.set property Slides[0] by GSAPSlideTL or in other words Slides[0] is not working when click animation to play GSAPSlideTL thank you

Yeah, it's a fun challenge. Very doable, but I don't have time to build it all for you. One general idea is to treat the horizontal movement as one animation (wired to the scroll with a scrub number to smooth it out), Then... Create an individual tween for each element that handles the skew and scale to the maximum values. Let's say that's a scale of 1.5 and a skewY of 15 (or whatever). Now create a generic object with a property that'll handle the "power" (doesn't matter what you call it), like {power: 0}. This is just a value between 0 and 1 that controls how much of the zoom/skewY gets applied. The faster you scroll, the closer to 1 it gets. When you're not scrolling, it goes back to 0. In an onUpdate on your ScrollTrigger, animate that "power" value based on the velocity. So it'll always lag a little behind, depending how long your duration is on that tween. This gives it a nice smooth feel. Don't forget to overwrite: true on that tween so it doesn't stack up. In an onUpdate of that tween, loop through each of the scale/skewY tweens and adjust their progress based on the power and the proximity to the center. So if power is 1, the progress of the tween of the element at exactly center is 1. The tween that's a little further from the center may be 0.6, for example. You just use a multiplier. This is relatively efficient because you're just reusing one tween for each element and adjusting the progress accordingly. And there's a single tween doing all of the horizontal movement. I hope that helps! If you'd like our help to actually build it, contact us for a paid consulting estimate.

Hello, We have a project built in Gatsby.js which is nearing completion and we're interested in hiring a freelancer to have a second look at a few issues that persist. We have a page made up of sections and each section consists of many ScrollTriggers. We have the individual animations looking quite good. We're attempting to also integrated the ScrollToPlugin in order to snap the user between sections, which also works, but when animating the 'window' between section it is extremely choppy. We've loaded the UMD distribution files, utilized several React hooks (useEffect, useLayoutEffect, useCallback). We are trying to overwrite all tweens, kill all other tweens. You name it, we've tried it --- the kicker is that it does work, almost beautifully, but as is, we cannot launch the site. We also have a side navigation which makes use of the AnchorLink module. We need to have this converted to ScrollToPlugin so that we can add an offset (currently the anchors break the animations and cause overlapping --- which is obvious, they are currently positioned where the other ScrollTriggers are positioned to pin). Lastly, we're having issues with elements becoming visible that should not be, when resizing, refreshing. We're invalidating the animations and killing all of the ScrollTriggers within our useEffects. This one is not so simple to describe without seeing it. We utilize Bitbucket so we could definitely give you access to the repository to have a look before you commit to anything. If you'd like to jump on a phone call or chat via Slack --- or --- whatever works for you, let me know. Even if you do not have the time to devote to the project and you think you know how to resolve these issues --- definitely message me because we can also just do a consultation. We're quite capable, but we've tried everything we could think of. We've also tried to post in the forum and have gotten lots of great help but the issues persists. For us to really resolve the issues we need to provide a Codesandbox, and we have when possible, but it's just not feasible to build a distilled down version of this; there are far too many moving parts. Timeframe: No timeframe, we can begin with a consultation. I would like to speak with you as soon as possible though! If we find that the scope is more than we can handle or you do have time to just jump in, you can estimate how much time you think will be required. Compensation: Name your price; hourly or fixed

Yep, @OSUblake and @PointC are exactly right. One other option: set up your animations with ease: "none" and then you can animate the playhead with any ease you want with another tween: let tl = gsap.timeline({defaults: {ease: "none"}, paused: true}); tl.to(...) .to(...); // here's the magic: gsap.to(tl, {time: tl.duration(), ease: "power3.out"}); // then to go backwards with another ease: gsap.to(tl, {time: 0, ease: "power4.inOut", overwrite: true});

Of course it helps. I agree that it is much better approach: better functionallity and more readable. After seeing this solution it seem obvious. I learned some interesting things like overwrite property. And some javascript basics: I thought this way of declaring the isOpen variable would put it in the global scope, but the variable belongs to the scope of each menu, just like box and items. Thank you much.

Sure, in your onUpdate(), put this at the bottom: gsap.to(tl, {timeScale: 1, overwrite: true});

I have these two animations, a box rotating and contact buttons popping onto the screen. ScrollTrigger.create({ trigger: "#topLetterTrigger", animation: gsap.fromTo("#topLetter", {rotateY: -180}, {duration: 2.2, rotateY: 0, ease: "back.out(1.7)"}), once: true }); gsap.set(".contact-icon", {scale: 0}); ScrollTrigger.batch(".contact-icon", { trigger: "#topLetterTrigger", interval: 3, batchMax: 4, once: true, onEnter: batch => gsap.to(batch, {delay: 0.5, duration: 0.8, scale: 1, stagger: {each: 0.25, grid: [1, 4]}, overwrite: true, ease: "back.out(1.7)"}).delay(1.4), }); The delay on the batch animation is supposed to make the animations end at roughly the same time. However it doesn't, it seems sometimes the second trigger doesn't fire, or it starts the second animation when the first animation has completed, so instead of completing together the second animation commences at the end of the 1st animation + 1.4 second delay. Note: is there an issue where you shouldn't have 2 animations given the same trigger: value? I think using a timeline and the ScrollTrigger-ing them both will make it more robust. Or there is some other better way?

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 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

It doesn't look like you are animating the blur property. Look at the proxy object. There is no filter property. gsap.to(proxy, {blur: 0, duration: 0.8, ease: "power3", overwrite: true, onUpdate: () => filterSetter("blur(" + proxy.blur + "px)")});

@OSUblake Thanks a lot! Generally this seems to work, but I have the issue that in my setup, it starts blurring on scrolling, but it does not seem to animate back to 0 when I stop. Here is the code that I currently have: let proxy = { blur: 0 }, filterSetter = gsap.quickSetter(".shape", "filter"), // fast clamp = gsap.utils.clamp(0, 40); ScrollTrigger.create({ onUpdate: (self) => { let blur = clamp(self.getVelocity() / -300); if (Math.abs(blur) > Math.abs(proxy.blur)) { proxy.blur = blur; gsap.to(proxy, {filter: "blur(0)", duration: 0.8, ease: "power3", overwrite: true, onUpdate: () => filterSetter("blur(" + proxy.blur + "px)")}); } } }); Any idea if there is something wrong maybe? Thanks a lot!