Search the Community
Showing results for 'overwrite'.
-
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 }) -
Multiple timelines for the same property in ScrollTrigger
ZachSaucier replied to Jose Pio's topic in GSAP
Hey Jose and welcome to the GreenSock forums. There are several ways to handle this sort of thing, the best depends on the effect that you want. If you want it to be smooth (no jumps) no matter what you have a couple of options: Use a single timeline to animate between the various states. Inside of the callbacks you animate the timeline's progress to a certain location. You should probably use overwriting on that tween. It'd look something like this: // helper function function getProgressOfLabel(tl, label) { return tl.labels[label] / tl.totalDuration(); } // in the ScrollTrigger onEnter: () => gsap.to(tl, {progress: getProgressOfLabel(tl, "myLabel"), ease: "none", overwrite: "auto"}) Create tweens when you need to use them (instead of using ones created in the past). That way they can use the current value as the start value. You should use overwriting on that tween. This is probably the method that I'd use. It'd look something like this: onEnter: () => gsap.to(box, { duration: 3, x: 350, y: 30, rotation: 45, ease: "expo.inOut", overwrite: "auto" }) -
Hello GSAP community! How's everybody? I would like to know if you could help me. I have two timelines that are triggered by ScrollTrigger when I am within the range of the start attribute. The onEnter and onLeaveBack events of the same ScrollTrigger instance work with timeline.play () and timeline.reverse () respectively, the problem starts when the two timelines are fired and loses the smoothness of the transition. Example: When I move from div.p3 to div.p1 tl2 is interrupted, it is interrupted by tl1 and overwrites everything. I don't quite understand if it could be fixed with invalidate or overwrite. Thank you very much in advance! Here I attach my codepen: https://codepen.io/cpiocova/pen/PoZVEva <body> <div id="box"></div> <div class="p1 pages"></div> <div class="p2 pages"></div> <div class="p3 pages"></div> </body> const box = document.getElementById('box') const tl1 = gsap.timeline({paused: true}) const tl2 = gsap.timeline({paused: true}) tl1.to(box, { duration: 3, x: 350, y: 30, rotation: 45, ease: "expo.inOut" }) tl2.to(box, { duration: 3, x: 20, y: 20, rotation: -125, ease: "expo.inOut" }) ScrollTrigger.create({ trigger: ".p2", start: "0 top", markers: true, onEnter: () => tl1.play(), onLeaveBack: () => tl1.reverse() }) ScrollTrigger.create({ trigger: ".p3", start: "0 top", markers: true, onEnter: () => tl2.play(), onLeaveBack: () => tl2.reverse() }) PD: Excuse my bad English.
-
Horizontall scrolltrigger with animated child elements
ZachSaucier replied to LukasZahorec's topic in GSAP
If you use a timeline you would create a timeline with two tweens with some space between (probably using the position parameter of the second tween). The ScrollTrigger's start value would be the start value of your current entry ScrollTrigger. The end would be the end value of your current exit ScrollTrigger. Does that make sense? Alternatively you could use the onEnter and onLeave callbacks to fire entry and exit animations. Just make sure they have overwrite: 'auto' to kill off each other if you do that. -
There is a timeline type. No need to do gsap.core.Timeline. (tl: GSAPTimelime, animData: Animation[]) I don't think you should be using Animation as class name. That already exists. https://developer.mozilla.org/en-US/docs/Web/API/Animation If you want to use a class like that, then you should provide default values. class MyAnimation { x: number = 0 y: number = 0 rotation: number = 0 duration: number = 0 constructor(...) {} } But I would recommend just using plain old JavaScript objects. GSAP adds properties to the object, like delay, ease, and overwrite.
-
Just add on both your #outer_circle tweens overwrite: true after scale, that should take care of it
-
Hey Phd and welcome to the GreenSock forums. In terms of GSAP, if you want an animation to be replay-able you should save it to a variable. Then you can use control methods on that animation to affect its play state: // gsap, not gasp ;) var slideIn = gsap.fromTo(".text", {xPercent: -100}, {xPercent: 0, duration: 2, ease: “none”, overwrite: “auto”}); // later slideIn.restart(); // simple! However, how you call that method in Adobe Captivate is a question completely unrelated to GSAP. Unfortunately I'm not aware of any regulars here who use Adobe Captivate. I recommend asking that question in Adobe's forums.
-
I have been trying to get a text rollout animation working in Adobe Captivate. A kind person on the Adobe forums responded with an example making use of GSAP library using the fromTo command, which largely resolves the problem. The animation is dropped into a Captivate slide as a zipped up .html file to animate the text at a certain point on the timeline, only compatible with HTML5 output, which is fine. The problem is that if the slide is replayed, e.g. by restarting the timeline or rewinding and replaying, the fromTo animation does not replay, it only works by refreshing the whole browser page and restarting the player. The question is, how can I get the fromTo to replay correctly if the player timeline is rewound? Gsap code is: gsap.fromTo(“.text”, {xPercent: -100}, {xPercent:0, duration: 2, ease: “none”, overwrite: “auto”});
-
That's because it will create a new tween every time that the count state updates. Sorry, I don't really use React and this is 100% a React question so I'm probably not the best equipped person to do it If this is all you're doing then you could just use a tween with overwrite: true https://stackblitz.com/edit/react-nempcw With that being said, @OSUblake, @Rodrigo, or @elegantseagulls will probably come by and correct my ignorance. Also FYI there was a recent article made about hooks + GSAP by @Ihatetomatoes that might be useful: https://ihatetomatoes.net/react-and-greensock-tutorial-for-beginners/
