Search the Community
Showing results for 'overwrite'.
-
Hey Tee. First off, I recommend that you modify your mousemove function. The one that you have could be improved like so: node.addEventListener("mousemove", e => { const x = e.clientX / 10; const y = e.clientY / 10; gsap.to(blurRef.current, { yPercent: -30, x, y, duration: 1, overwrite: "auto" // very important }) }) However you could go even further improving the performance using GSAP's .quickSetter() which is what I would do in your position. When combining animations that are animating the same properties of the same objects, it's usually best to animate a container of the element with one animation and the actual element with the other element. That way you don't have to worry about managing the combination of the animations, it just works because the animations are on different elements. So I would recommend adding a new container just around your blur element and animating that with one of your two animations. In terms of writing that CSS animation in GSAP, here you go: gsap.fromTo(blurRefContainer.current, { y: -10 }, { y: 15, repeat: -1, yoyo: true ease: "power1.inOut", duration: 1 });
-
Hi, I am using Tweenmax and ScrollToPlugin for smooth scroll effect on my website. I have used following code for same. $(function() { var $window = $('#outerWrapper'); //Window object var scrollTime = 2.5; //Scroll time var scrollDistance = 400; //Distance. Use smaller value for shorter scroll and greater value for longer scroll $window.on("mousewheel wheel DOMMouseScroll touchmove tick", function(event) { event.preventDefault(); var delta = event.originalEvent.wheelDelta / 120 || -event.originalEvent.detail / 2; var scrollTop = $window.scrollTop(); var finalScroll = scrollTop - parseInt(delta * scrollDistance); TweenMax.to($window, scrollTime, { scrollTo: { y: finalScroll, autoKill: true }, ease: Power1.easeIn, //For more easing functions see https://api.greensock.com/js/com/greensock/easing/package-detail.html autoKill: true, overwrite: 5 }); }); }); and it really works great on mouse wheel scroll. I want same effect of smooth scroll when someone try to scroll website using trackpad on laptop. Is any solution for same? I tried with all events "$window.on("mousewheel wheel DOMMouseScroll touchmove tick", function(event) { " but this gives regular scroll while using trackpad, not smooth scroll effect.
-
Hey dnknapp and welcome to the GreenSock forums. Thanks for supporting GreenSock by being a Club GreenSock member! You're making one of the most common ScrollTrigger mistakes: .to() tweens with ScrollTriggers get evaluated immediately so you need to set immediateRender: false if you don't want that to happen. In this case you should also set overwrite: 'auto' to make sure the old tween is killed when the ScrollTrigger is reached. But this helped us find a bug in the current version that made it glitch even if you did that. We fixed the bug and you can see the working version below (you may need to clear your cache): https://codepen.io/GreenSock/pen/5ee69c59eea050ee5b3efcf75313bf5e Visual-Q's method also works
-
Hey dawid660. A few notes: In general it's best to create animations at the start and use control methods inside of your functions for interaction. I talk more extensively about that in my article about animating efficiently which I highly recommend. Part of what makes killing off the old animation more difficult is that you don't save the reference to any of the tweens that you're creating inside of the arrowsAnimation function. One way you could do so is to create a timeline within that function and add all of your tweens to that timeline. Then return the timeline from the function and save a reference to that timeline. That way you could use the variable (that points to the timeline) to kill off the animation. Alternatively if you are setting all of the properties that you're animating in the intersection observer callback you could use overwrite: 'auto' or overwrite: true to kill off any tweens that are in conflict. Using GSAP's ScrollTrigger would likely make this sort of thing more easy. You don't need the quotes around numerical values. That's one of the most common GSAP mistakes.
- 1 reply
-
- 1
-
-
The default of overwrite: false is the most CPU-friendly option...it assumes you're responsible with the way you create your animations (not creating conflicts). 2nd fastest is overwrite: true because that doesn't have to care about which properties - it just obliterates any active tweens of the same object. We don't plan on changing any of those overwrite options if that's what you're asking. It won't cause a conflict, no - the whole purpose is to avoid conflicts But I think it'd be rather strange to do physics animations with overwrite: "auto" but it's not wrong or anything. Frankly, you're not going to notice a performance difference unless you really push things hard and have hundreds/thousands of things initiating animations simultaneously. And remember, overwriting logic only runs ONCE for a tween (when it renders for the first time). It's not like it's constantly draining resources looking for things to overwrite. As you probably know, we put a lot of effort into making GSAP highly performant. I may be misunderstanding but no, I don't see any reason to use isTweening() in that scenario. Here's some very basic pseudo code: // this replaces your setTimeout() logic. Just use a delayedCall - remember, it's just a tween with an onComplete, so you can pause()/restart() it. let hideControlsDelay = gsap.delayedCall(1, hideControls).pause(); function onPointerEnter() { hideControlsDelay.pause(); // don't hide controls when the pointer is over them gsap.to(controls, {autoAlpha: 1, overwrite: true}); // animate controls in } function onPointerLeave() { hideControlsDelay.restart(true); } function hideControls() { gsap.to(controls, {autoAlpha: 0, overwrite: true}); // animate controls out } hitArea.addEventListener('mouseenter', onPointerEnter); hitArea.addEventListener('mouseleave', onPointerLeave); I guess I don't really understand why isTweening() would be helpful. Maybe I'm missing something. Anyway, does that help? -
Thanks for the info. Since it is my opensource project and I want it to be as forward compatible and versatile for people that might not be using it in the same ways that I am now, is overwrite:auto going to remain current or are things moving toward a more CPU friendly way of handling things? Also lets say that someone wanted to do a physics simulation behind the video player using GSAP would the overwrite:auto cause conflict? About what you said about the isTweening, I think the isTweening might be the only way to tell tweening object to stop and change direction handled by multiple but similar events, like when you mouse over the player you need to see the cursor and the controls. It's the same for the controls but you no longer need the timeout to hide the controls and the cursor; but you want a timeout when leaving the controls to hide the controls and the cursor (especially if the video is playing) all of which need to be interrupted and overwritten by the last event in 1/10000000 of a second depending on how fast your kid(or me) is spasming the mouse around. Im I right in my thinking if using isTweening in that scenario? If not Im thinking that im thinking about this entire redesign thing wrong then. Thanks again Jack! -
Yeah, it definitely looked like some refactoring was in order there There is an onInterrupt() callback that'd tell you when something gets killed prematurely (like with an overwrite:"auto" kicking in). And for the record, overwriting isn't "bad" or anything - you just need to be aware of what you're doing. I've seen people creating a bunch of conflicting tweens due to logic in their code and then they wonder why they're running into performance problems or odd "glitches" (which aren't glitches at all, since GSAP is doing exactly what they're telling it to do). Example: create a 1-second rollover fade-in tween and a 0.5-second rollout fade-out tween that affects the same object...now rollover and immediately rollout. Without any overwriting, you've now got two tweens fighting over the opacity of the element, and the fade-out tween "wins" because it was created last...but it finishes after 0.5 seconds at which point the opacity JUMPS to something like 0.8 and goes up to 1. Some people are like "GSAP is broken"...but no, it's not. The fade-up tween still had about 0.5 seconds left to go, so as soon as the fade-out tween stopped overruling it on each tick, you see the fade-in finish. See the issue? It always makes me a little nervous when I see if (gsap.isTweening(...)) because it's almost always in the context of a bad UX decision like making the UI unresponsive until certain animations finish (a pet peeve of mine). Or someone is trying to mask a logic issue in their own code by slapping an .isTweening() condition on it. I'm not saying you're doing that - sometimes there are legitimate reasons to use .isTweening(), absolutely. Just be careful Glad to hear the auto overwriting resolved things for you. Good luck with the port!
-
Ugh, sorry to hear about the trouble, @N1DAN. Sounds super frustrating. I'm not in a position to be able to wrap my head around 2500+ lines of code and debug it for you, but the only thing that came to mind is that perhaps you're creating conflicting tweens. Before version 3, GSAP used overwrite: "auto" as the default which means that it automatically tried to find competing tweens of the same properties of the same objects and killed any it finds. For some people that was a bit confusing, plus it cost CPU cycles so in version 3 there is no overwriting by default. You opt-in to ensure developers are more aware. Of course it's best to not create conflicting tweens to begin with, but try just adding this to the top of your file: gsap.defaults({overwrite: "auto"}); Does that resolve anything for you? Other than that, there really isn't anything I can think of that'd cause such simple tweens to behave differently in the newer version. Trust me - the new version is far more capable, plus the syntax is easier and the overall file size is significantly smaller. So you're making a good move by updating. I'm confident that once you get past this issue, you'll love working with GSAP 3. Let me know how that overwriting tweak goes. I have a sneaking suspicion it'll solve things for you based on what you described.
-
That's because you're trying to animate an attribute but you forgot to use the AttrPlugin, so GSAP is taking you literally and attempting to directly get/set properties like "stopColor". Minor note: you don't have to pass an Array of selector text - you can just use a normal selector text string with commas: // BAD gsap.to(['#cursor-gradient-1', '#cursor-gradient-2'], { stopColor: '#000' }); // GOOD gsap.to('#cursor-gradient-1, #cursor-gradient-2', { attr: {"stop-color": '#000'} }); Does that clarify things? Oh, and you don't need to have this line: gsap.killTweensOf(['#cursor-gradient-1', '#cursor-gradient-2', '#cursor-fill-1', '#cursor-fill-2']); You can simple set overwrite: true or overwrite: "auto" on your tweens. I mean it's totally fine if you prefer explicitly killing things like that, but it seemed more verbose than necessary. Happy tweening!
-
So, on click kill all ScrollTrigger's then scale to 100% and create a new ScrollTrigger (that does no animation). And that one has two hooks: on leave and leaveBack, that then kills it self and reinstates all previous ScrollTrigger's that where killed by the click? Seems a lot more complicated than `overwrite: true`, which if it would work does everything above, but with one line of code. Why doesn't overwrite work? Are there plans to make it work in combination with ScrollTrigger?
-
How do I overwrite scrollTrigger with an other timeline that also scrollTo the element on click, but keep the scrollTrigger alive to use the `onLeave` trigger? I have a page with videos and on scrollTrigger enter the videos should play and scale a bit (✅ working), but then when the user clicks the video should scale to 100% (❌ not working). I've set the property `overwrite: true` on the time line, but that doesn't seem to work in combination with scrollTrigger. In my demo you can see an orange box that scales to 100% on click, the video tries to do the same, but is taken over by the scrollTrigger timeline which I want to overwrite. I've tried killing all the scrollTriggers, but I need the `onLeave` trigger for when the user scrolls away again, so I can scale the video back and pause the video
-
Hello, In my react application, there are three section with class .cts which contains image and some content. All the three section is wrapped in a main container. Now I have implemented the animation as follow: const scrollColorElems = document.querySelectorAll(".cst"); scrollColorElems.forEach((colorSection, i) => { console.log(colorSection.clientTop); const prevColor = i === 0 ? "gray" : scrollColorElems[i - 1].dataset.scrollcolor; ScrollTrigger.create({ trigger: colorSection, start: "top center", end:"bottom center", markers:"true", onEnter: () => gsap.to("#ftiot", {backgroundColor: color, overwrite: 'auto'}) // onLeaveBack: () => onLeaveBack(prevColor), onEnterBack: () => gsap.to("#ftiot", {backgroundColor: color, overwrite: 'auto'}), }); }); Now the problem I am facing is the start marker keeps changing its position and become pretty inconsistent. In the below screenshot you can see the start marker is way below the top offset marked by black border of the trigger container even though I have specified "top center" as starting point in start property.
-
When you do a timeline.tweenTo(), that's just creating a linear tween that automatically sets its duration to the amount between the current playhead position and the destination. So, in your example, let's walk through what happens... Click "Pos2", and it starts a 2-second tween (because that's how far it is to that position). 0.5 seconds later, click "Pos1" which now creates a 0.5-second tween back to the start (because that's how far it is) Now you've got TWO tweens created, both vying for control of the playhead. The 0.5-second one "wins" while it's running because it runs last (since it was created last) The 0.5-second tween to the start finishes first. The 2-second tween still has 1 second left to play so it keeps going. The position suddenly jumps from "Pos1" to part-way to "Pos2" (because that's where that second tween was in its progression). Make sense? That should also explain why @akapowl's solution worked. That was essentially hiding the problem because the tweens were always the same duration, thus the "new" one always runs longer than the "old" one (therefore no jump). There are a bunch of solutions. Perhaps the easiest is to just have the new tweenTo() tweens overwrite the old ones so you don't have multiple going at the same time. Here's an example of that: https://codepen.io/GreenSock/pen/8e4fd7788a7b9b84664236ef155577a2?editors=0010 Of course you could directly animation the progress like Zach showed. In the next release, I'll force the overwrite of .tweenTo() tweens to be "auto" because that's more intuitive and would resolve this anyway.
-
Unfortunately it's not working very well. What do you mean by setting overwrite to "auto"? I tried some stuff in the code sand box today but did not manage to find a solution. When I hover to fast on a nav item, the timeline get stuck in its first part and does not reach the second part. If I get ride of the addPause() the whole timeline runs, I don't want that.
-
I didn't test that code. Just showing how to access an animation elsewhere. The addPause method that zach did probably isn't going to work well for hovering. What you originally posted should work. Maybe try setting overwrite to "auto" for your animations.
-
Alright, you're welcome. Is this more like what you want to achieve? https://codepen.io/akapowl/pen/3f71a982b9f6cf5ee10bdc5da5a12c18 I think the main issue here, is that the tweens in your second timeline sort of 'overwrite' the values of the first timeline ( not the proper terms - just my interpretation of it) - you can avoid this by adding immediateRender: false to those tweens in the second timeline and it should be good to go. Also, I was looking for a related thread on this for more information (and a proper explenation on this - not just my jibberish) - but I couldn't find it for now - will add it in later, if I'm gonna find it. Let me know, if this is more like what you wanted to achieve. Cheers
-
Thanks, Zach. That set me on the right path. Not entirely a matchmedia / media query solution, but this fixed the mobile issue for me: let cachedWidth = $(window).width(); $(window).resize(function(){ var newWidth = $(window).width(); if(newWidth !== cachedWidth){ if(anim) anim.play(0); totalDistance = $(ticker).width() / 2; anim = gsap.to(ticker, { duration: dur, x: -totalDistance, ease: "none", repeat: -1, overwrite: true }); cachedWidth = newWidth; } }); Probably not the most elegant fix, but happy the timelines are preserved on scroll without resetting. Reposting if it helps anyone. https://codepen.io/euqio/pen/RwaKmOw
-
Hey Xsander775. I'm not fully understanding the context here. Based on the code you're want an animation to play every resize? Maybe explaining the context or including a minimal demo can help us help you further. In terms of your actual question, you can use logic when getting the values: let timeout; window.addEventListener("resize", function() { if(timeout) clearTimeout(timeout); timeout = setTimeout(function() { const raz = bnr.offsetWidth; if(raz >= 300) { gsap.from('.rpanel', { xPercent: raz >= 560 ? "+=100" : 0, yPercent: raz >= 300 ? "+=100" : 0, delay: 0.5, duration: 0.65, ease: "power2.out", overwrite: 'auto' }); } }, 500); });
- 1 reply
-
- 1
-
-
Might be worth turning off the gsap on the element and verifying that the divi animation is working ok and examine exactly what it does. Assuming you mean the red and white building you can see gsap applying the transform (translate...) if you have another framework applying transform(rotate) inline would gsap overwrite the entire transform. i.e. erase the the rotation? Possible you might also get around a conflict applying gsap and divi animations to separate elements i.e. one on a parent the other on a child.
-
.thumb.jpg.9b4fbe9c95c03fa9e10dcdcf47d9abcc.jpg)
Thankyou This work good window.addEventListener("mousemove", e => { // best Power4.out or sine.out gsap.to(dpkCursorMouse,{ duration:.10, x: e.x, y: e.y, ease:'sine.out', overwrite:true, }) }); -
Optimization for Custom Cursor & Best Way to Call a Function on Scroll
ZachSaucier replied to Dushyant Kumar's topic in GSAP
At the least you should apply overwrite: true to this tween so that it kills off previous ones. Otherwise you can just adjust the formulas in the ticker to affect the ease: dpkCursorPos.x += (dpkCursorMouse.x - dpkCursorPos.x) * dpkCursorSpeed; dpkCursorPos.y += (dpkCursorMouse.y - dpkCursorPos.y) * dpkCursorSpeed; -
Optimization for Custom Cursor & Best Way to Call a Function on Scroll
ZachSaucier replied to Dushyant Kumar's topic in GSAP
Hey Dushyant and welcome to the GreenSock forums. I'm curious: why do you have an animation inside of the mousemove listener and try to set the position in the ticker? They are going to overwrite each other. Are you talking about changing the cursor back to the default if someone hovers an element then scrolls? One way would be to keep track of the scroll position the last time that the mouse moved. Then in the scroll event you check to see if that's over a maximum distance and change it back to the default. -
Hi, I have included a CodePen to illustrate my issue. When I am scrolling downward, I have some GSAP code that transforms my elements. Wen I am scrolling upward, the GSAP code transforms them in a different way, and when we reach the top of the window the code transforms the elements in another way. The issue that I am experiencing is that, if I am scrolling fast, or if I touch the bottom and then start to scroll up and down, it *sometimes* causes the elements to jitter. When I inspect the code, it looks like my inline styles that are created by the tweens are fluctuating up and down rapidly, causing the elements to jitter repeatedly. I can usually *but not always* stop it from happening, when I re-scroll in either direction. But it is unpredictable. I am using 'overwrite: true' in most instances to try and compensate for this, in-case it is still reading the values from a previous tween, but it still occurs. Is there something that I can do to completely avoid these values from fluctuating rapidly up and down, and causing my elements to jitter ? Note: I tried using scrollTrigger to do the whole thing and recognize when I am scrolling up or down, but I was unable to figure out a way to handle that.
-
Hello everyone 🙂 I am quiet new to greensock. Currently I am using ScrollTrigger and the MotionPathPlugin. Here is what I have: https://kwizda.gugler.at/ the tractor is moving on the path perfectly, but as you may see the path isn't moving in the free space given instead its overlapping with the content. On my screen it works perfectly fine, but by changing to another screen it's wrong. Do you have any idea how I could change the path related to the content? Here is my code: gsap.registerPlugin(MotionPathPlugin, ScrollTrigger); gsap.set("#motionSVG", { scale: 0.8, autoAlpha: 1 }); gsap.set("#tractor", {transformOrigin: "50% 50%"}); gsap.to("#motionSVG", { scrollTrigger: { trigger: "#motionPath", start: "top 35%", end: "bottom 35%", scrub: 1, onUpdate: self => { gsap.to("#tractor", { rotation: () => self.direction === 1 ? 0 : -180, overwrite: 'auto', duration: 0.1,}); } }, duration: 10, ease: "none", immediateRender: true, motionPath: { path: "#motionPath", align: "#motionPath", alignOrigin: [0.5, 0.5], autoRotate: 90, } });
-
Multiple timelines for the same property in ScrollTrigger
ZachSaucier replied to Jose Pio's topic in GSAP
I would make a function that creates a new animation. Something like this: export const animIron2 = (model, material, node) => { const tl = gsap.timeline({defaults: {overwrite: "auto"}}); tl.to( model.rotation, { duration: 2, x: 0, y: -2.34, z: -0.05, ease: "expo.inOut", }, 0 ) tl.to( model.position, { duration: 2, x: 3.47, y: -7.1, z: -13.27, ease: "expo.inOut", }, 0 ) } Then call that function when you need it: ScrollTrigger.create({ trigger: ".sp-2", start: "0 top", markers: true, onEnter: animIron2 })
.thumb.jpg.45ad1f0654d8c8cd759c47599fe1796d.jpg)
