Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for 'overwrite'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. 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!
  2. 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!
  3. 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.
  4. 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!
  5. 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?
  6. 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
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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
  12. 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
  13. 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); });
  14. 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.
  15. 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, }) });
  16. 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;
  17. 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.
  18. 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.
  19. 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, } });
  20. 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 })
  21. 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" })
  22. 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.
  23. 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.
  24. 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.
  25. Just add on both your #outer_circle tweens overwrite: true after scale, that should take care of it
×