Jump to content

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


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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. I see. Thanks for explaining more clearly! Long story short you have conflicting tweens - some tweens are overwriting others. That's why the duration matters. With an appropriately short duration, the tweens can start after each other. With a longer one they conflict so GSAP has to try and figure out what to do. The ways to work around this are to either 1) change your times so there's not this conflict or 2) change GSAP's default overwrite to a different value that works for your setup. By testing, TweenLite.defaultOverwrite = "allOnStart"; seems to work with the longer duration. You can see other values at https://greensock.com/docs/v2/TweenLite/static.defaultOverwrite
  2. Thank you so much! Setting the overwrite mode worked! Creating the tween looks like the best alternative so I tried using that, but React is crashing logging t.getAttribute is not a function. const animation = gsap.fromTo( circleId, { attr: { r: 1 }, transformOrigin: "center", }, { scale: 20, transformOrigin: "center", paused: true } ); animateIconEnter = () => animation.timeScale(1).play(); animateIconLeave = () => animation.timeScale(6).reverse(); Here's my codepen.
  3. Welcome to the forums, @Kahlub! In GSAP 3, overwriting is false by default. You were creating conflicting tweens in this case - in the mouseenter you started a 3-second long animation but let's say the user moves their mouse off of it 1 second later, you're creating another 0.5 second animation of the SAME property of the SAME object, which of course works (both tweens are setting that property, but since the mouseleave was created later, it runs last, thus its values are what's seen while it's running), and then when that animation finishes the OTHER one is STILL RUNNING. So suddenly you see the jump. That's not a bug in GSAP - it's just a logic issue with your code. But don't worry, it's easy to fix. You have several options: 1) Just set overwrite: true on your tweens. That means that when the tween is created, it finds all other tweens of the same target and immediately kills them. No more conflicts! 2) You could manually accomplish that with gsap.killTweensOf(yourTarget) but I find it simpler to just set overwrite:true. 3) You could set the default overwrite mode to "auto" or true, like: gsap.defaults({overwrite:"auto"}); That will tell GSAP to automatically check the first time each tween renders and find any animations of the same property of the same target and kill just those pieces of the other tween(s). 4) You could create a single tween that you simply play()/reverse() in the mouseenter/mouseleave events. That's even more efficient (but GSAP is so fast it's not as if there's a performance problem with the way you're currently doing it - I just tend to be a performance nut). If you want the mouseenter animation to be longer, you can simply set the timeScale accordingly, sorta like: const animation = gsap.fromTo(...); //create your tween once, set paused:true animateIconEnter = () => animation.timeScale(1).play(); animateIconLeave = () => animation.timeScale(6).reverse(); Just an idea. Lots of flexibility Happy tweening!
  4. Use auto. gsap.defaults({ overwrite: "auto" })
  5. You can overwrite particular properties by passing them into overwrite instead of true. https://jsfiddle.net/492oqsth/ Side notes: You don't need to pass units into y. Pixels is the default. You should include the duration inside the vars parameter, not as the second parameter
  6. Thank you so much for the hint, but I'm not going to be able to use this option, because I also animate X and Y in addition to Scale when I move the mouse. In any case, thank you. I used your decision in another part of the code, it helped me a lot. I have a question. Is there any way you can use it for the whole function "overwrite:true" and for a certain part "overwrite:false". I'm asking because I stopped working on this piece of code: https://jsfiddle.net/2b9fgxL0/ . Opacity doesn't work for some reason... If overwrite is removed, everything will be fine.
  7. `overwrite: "auto"` didn't do the trick, unfortunately. I made 2 code sandboxes illustrating the issue. without issue https://codesandbox.io/s/gsap-v2-no-jump-bug-umw6x?fontsize=14 with issue https://codesandbox.io/s/gsap-v3-jump-bug-in-vue-3272l?fontsize=14 Interesting: when you remove `clearProps` from the v3 sandbox, the issue doesn't occur. So apparently I do not understand what clearProps is supposed to do or we really have gsap bug here. Nevertheless: even if the v3 sandbox illustrates the intended behavior, I'd argue this should be changed to the way it worked in v2. Thrilled to read if you disagree with that and why you made this change.
  8. Hard to say without being able to test it. Try changing the default overwrite, and see it that helps. gsap.defaults({ overwrite: "auto" });
  9. why is that? I really like the "old syntax"; I'm used to it, it's faster to type, easier to see at a glance what the duration is, etc. I will need to look into the `overwrite` solution; right now here in Germany shoulllld be sleeping time having to set where things are at the beginning of the timline would be really bothersome and be kind of a downgrade for me personally–
  10. It's hard to say without the ability to see it for ourselves. Guessing somewhat blindly, it could be because the overwrite property has a different default in GSAP3. In GSAP 2 it was "auto" by default but in GSAP 3 it's false. You can test it by putting gsap.defaults({overwrite:"auto"}); to the top of your script. Side note, it's good to put the duration inside of the vars parameter.
  11. Zach, thanks for the quick reply! I updated the overwrite value to 'auto' like you said and it helped a bit, but there were still some funky things going on. I then realized - based on your 'if I don't scroll too quickly' comment - that I didn't have a way to stop the animation from going again and again. I added 'isAnimating' to my state and set it before running the masterTL and resetting after. That seemed to do the trick! Appreciate the help!
  12. Hey Brad, cool site! Welcome to the forums. Your animations look pretty smooth to me (given I don't scroll too fast too many times right in a row - I think that's more of a logical error. Is that what you're referencing?). Is it a particular browser that's giving you trouble? or a part of the site's animation that it happens with? That's a bit of code to look through even though most of it is unrelated. Guessing somewhat blindly, I'd guess that it's because the overwrite property has a different default in GSAP3. In GSAP 2 it was "auto" by default but in GSAP 3 it's false. You can test it by putting gsap.defaults({overwrite:"auto"}); to the top of your script. P.S. Small note: "out" is the default ease, so you can just say "expo" instead of "expo.out" if you want to.
  13. overwrite is set to false in v3. You can set it to true or "auto". It was set to "auto" in v2. gsap.defaults({ overwrite: true }) $('.kareta-b').mouseenter(function(event){ gsap.to($('.kareta-b .pimg'), 1, { x:"-27%", y:"-18%", width:"331%", }); }); $('.kareta-b').mouseleave(function(){ gsap.to($('.kareta-b .pimg'), 0.7, { x:"-27%", y:"23%", width:"185%", }); });
  14. The only way I can think of that would cause behavior like that is if your rollout/rollover tweens have different durations, such that one finishes before the previous one does. If you want overwrite:"auto" (the old default), you can simply set that as the default like this: gsap.defaults({overwrite:"auto"}); Technically yes, but if you load GSAP first and you're loading the files into a browser, the plugins will attempt to auto-register but it's still a good habit to get into (registering them) because when you're working in build tools/bundlers, tree shaking can bite you if you have zero references in your code to the plugins.
  15. TweenMax.to('body', 0.4, { color:recklessFG, backgroundColor:recklessBG,overwrite: true }); I've found that since I updated, I've had to use overwrite:true as things that were in order were going out of order? I have a lot of rollovers that all impact a few divs... e.g. rolling over a piece of text changes the background etc. and hides text, and the rollovers can happen very quickly.
  16. Forgot to mention, that yes, I'm using the window to make it global. This pattern makes sure it doesn't overwrite window.mySvg if it already exists. window.mySvg = window.mySvg || {};
  17. Hello I did two codepens, the first one trying to use the track you gave me but I have to miss something. I tried to be more specific about how the site works. I got a result on the second codepen but the animations when they are on screen, have an infinite animation (up to off screen) I tried to pause the offscreen sections but without any result I looked at overwrite and clearProps but I don't know how to implement them properly https://codepen.io/CedGrvl/pen/LYYdePj?editors=1010 https://codepen.io/CedGrvl/pen/QWWmmqJ Thx Again
  18. Hey CedGrvl. Sorry to say, but neither approach is very good. The main reason for that is because every time the scroll event fires you'd be creating new tweens and timelines for every section of the page. That can't be good What you should be doing instead is only recreating the tweens and timelines on resize if that's even necessary. Otherwise your tweens and timelines should be fine because the page dimensions are the same as they were when it was initialized. Now, to answer your question about which approach of the two is better. I think your first approach is missing some pseudo-code because it's not equivalent to the second approach in terms of the theoretical logic. It's missing conditional checks and creating one of two timelines for each section based on the viewport size. Assuming that is just a mistake and that the logic for that is supposed to be there, I would probably use a variant of your second approach. In general it is good to put the building of complex timelines into their own functions so that your code is more modular, as "Writing Smarter Animation Code" by our very own Carl says. However, the way that you have it setup, with functions within functions, isn't optimal because those functions are recreated every time and functions are somewhat expensive. Rewriting your psuedo-code, I'd probably do something along the lines of this: let masterTL, mobileMasterTL = new TimelineMax({paused: true}), tabletMasterTL = new TimelineMax({paused: true}), desktopMasterTL = new TimelineMax({paused: true}); // keep track of the furthest position that we have been to (to not go backwards) let furthestPos = 0; // for desktops const mql = window.matchMedia('screen and (min-width: 992px)'); // for tablets const mql2 = window.matchMedia('screen and (min-width: 576px) and (max-width: 991px)'); // our sections const pages = document.getElementsByClassName('js-page'); // Keep track of our offsets and hrefs const offsets = []; // Setup our page function init() { updateOffsets(); setupTimelines(); checkSwitchMasterTL(); window.addEventListener('resize', () => requestAnimationFrame(handleResize)); window.addEventListener('scroll', () => requestAnimationFrame(handleScroll)); } // Update each element's recorded offset top position on page resize function updateOffsets() { for(let i = 0; i < pages.length; i++) { let myObject = { "positionPage": pages[i].getBoundingClientRect().top, "hrefPages": pages[i].dataset.href } offsets[i] = myObject; } } // Create the timelines in each section for each section // Do this for each section... function initFirstSection() { let myHREF = offsets[0]["hrefPages"]; // setup the desktop animations let dtl = new TimelineMax(); // ... desktopMasterTL.addLabel("start" + myHREF); desktopMasterTL.add(dtl); desktopMasterTL.addLabel("end" + myHREF); // setup the tablet animations let ttl = new TimelineMax(); // ... tabletMasterTL.addLabel("start" + myHREF); tabletMasterTL.add(ttl); tabletMasterTL.addLabel("end" + myHREF); // setup the mobile animations let mtl = new TimelineMax(); // ... mobileMasterTL.addLabel("start" + myHREF); mobileMasterTL.add(mtl); mobileMasterTL.addLabel("end" + myHREF); }; // Create timelines for the second section function initSecondSection() { // ... } // Call all of our section timeline setup functions function setupTimelines() { // Init all of our sections' timelines initFirstSection(); initSecondSection(); // .... } // Switch between the timelines based on the current viewport width function checkSwitchMasterTL() { // desktop if(mql.matches) { masterTL = desktopMasterTL; tabletMasterTL.progress(0).pause(); mobileMasterTL.progress(0).pause(); } // tablet else if(mql2.matches) { masterTL = tabletMasterTL; desktopMasterTL.progress(0).pause(); mobileMasterTL.progress(0).pause(); } // mobile else { masterTL = mobileMasterTL; desktopMasterTL.progress(0).pause(); tabletMasterTL.progress(0).pause(); } } // Update our offsets and see if we need to switch timelines function handleResize(e) { updateOffsets(); checkSwitchMasterTL(); } // Check to see if we need to fire any animations function handleScroll(e) { // Iterate backwards through our offsets, tweening the furthest one down the page // if the offset is in view let viewportBottom = scrollY + innerHeight; for(let i = offsets.length - 1; i > 0; i--) { let scrollPos = offsets[i]["positionPage"]; if(scrollPos > scrollY && scrollPos < viewportBottom && furthestPos < scrollY) { let myHREF = offsets[i]["hrefPages"]; // We use tweenFromTo to play a section of our master timeline and make sure // that the rest of the page is setup the way we need it to be. // tweenFromTo docs: https://greensock.com/docs/v2/TimelineMax/tweenFromTo() masterTL.tweenFromTo("start" + myHREF, "end" + myHREF); // Update our furthest Y position variable furthestPos = scrollY; } } } requestAnimationFrame(init); The advantages of an approach like this: You do most of the work when setting up the page. All of the tweens and timelines are created at that point. The only things that you're doing on resize are checking to see if you need to switch between timelines and updating the offset positions of your sections. On scroll all you're doing is checking the scroll position and playing the relevant animation (if necessary). It's very modular. It's easily extendable - all you need to add per section is an initFirstSection equivalent function and call that function inside of setupTimelines. Note that this code is completely untested other than for basic syntax errors Some other notes: You might not need the mobile timeline logic. I just included it based on your media point. I figured it's better to add it and take it away if need be than have to not have it and have to add it later. Generally speaking you should put variables that don't change outside of functions that are called multiple times. That saves the computer from having to do the same work every time. You should consider using overwrite: "all" on your tweens since you have multiple timelines affecting the same element. You've got to be a little careful about how you structure the animations. What are you expecting break to do? I think you're wanting return there instead. But if you use if statements, it's not much more processing to just let it check the other conditionals. Sorry for the long post - hopefully it's very helpful!
  19. Why are you even using "transform" to being with? transform:'rotate('+r+') translate('+radius+',0.1) rotate('+(-r)+')' Use gsap transform syntax instead (x, y, scale, rotation, etc). That can be done by changing the transformOrigin, and using rotation. Then there wouldn't be an overwrite problem.
  20. (See: http://forums.greensock.com/topic/7184-oncomplete-event-does-not-fired/) "If you create a competing tween of the same object that's tweening the same property, it will overwrite the previous one by default, and if that previous one has no tweening properties left, it will also kill the tween so that its onComplete doesn't fire." Sometimes this can be very annoying and can (potentially) break your project since there can be a lot of logic dependent on the onComplete call of a tween. Could you please add the following overwrite options: 1. Don't kill tweens that doesn't have properties, but still have an onComplete (or an other method) handler. 2. Throw an error when you create a second tween on an objects, when the first isn't finished yet.
  21. I didn't use one in my demo. I just read the commented out .set() call that you had. It had an ease so I commented about it. You can look at the variable that they are being assigned to (xMove and yMove). Then look where that variable is being used: TweenMax.to($landingWrapper, 8, { scrollTo: { x: xMove, y: yMove }, ease: Power0.easeNone, overwrite:"all" }); No .set() calls are being used in that demo that you posted - only a couple of .to() calls. But that demo faces the same issue as your first one - I'd recommend an approach like the one I used in the post above Sure, if you do it properly You just have to make sure that they're not both being used at the same time and are set up correctly to play nicely.
  22. Hey Tessa and welcome to the GreenSock forums. Your tweens conflict a good bit here. I'd recommend using one tween per mousemove call and using overwrite: "all" to make sure and stop conflict with previous tweens. Doing both of those things seems to take away the stuttering. https://codepen.io/GreenSock/pen/ExxmBbr?editors=0010 Side note: it doesn't make sense to put an ease on a .set() call
  23. I want to tween first three items and then replace the 3 items(overwrite) with next three items for tweening and after that I want to overwrite next 3 : continue so on until the end of items and oncomplete, I want to repeat the whole process. I am using overwrite to overwrite the first three with next three but it doesn't work! Can someone help me with this? Is something wrong in my code? Any help will be greatly appreciated! CSSPlugin.defaultTransformPerspective = 600; var t1 = new TimelineMax({ repeat: 1000, yoyo: true, repeatDelay: .5 }), count = 1;//the label number $('.tick').each(function (index, item) { t1.from(item, 0.7, { x: 100, rotationX: -90, transformOrigin: "50% 0px", ease: Back.easeOut, overwrite: "none" }, 'label' + count) count++; if(index % 3 == 2) { t1.TweenLite.defaultOverwrite = "all"; } });
  24. When it overlaps, it kills the first x animation. Setting overwrite to false will prevent that. var tl = new TimelineMax({repeat:-1}); tl.addLabel("start"); tl.to("#cat",0.5,{x:"+=300",ease:Quad.easeOut },"start"); tl.to("#cat",3,{x:"+=470", ease:Linear.easeNone, overwrite: false},"start+=0.4"); These are probably the 3 most used overwrite settings. The default is auto. In the next version of GSAP, false will be the default. "none" (0) (or false) - no overwriting will occur. "all" (1) (or true) - immediately overwrites all existing tweens of the same target even if they haven't started yet or don't have conflicting properties. "auto" (2) - when the tween renders for the first time, it will analyze tweens of the same target that are currently active/running and only overwrite individual tweening properties that overlap/conflict. Tweens that haven't begun yet are ignored. For example, if another active tween is found that is tweening 3 properties, only 1 of which it shares in common with the new tween, the other 2 properties will be left alone. Only the conflicting property gets overwritten/killed. This is the default mode and typically the most intuitive for developers. You can also tell when something gets overwritten like this. https://codepen.io/osublake/pen/06dcaf7668cb3925c779a7c7e57cb5c3 https://greensock.com/docs/v2/TweenLite/static.onOverwrite https://greensock.com/docs/v2/TweenLite/static.defaultOverwrite
  25. Hi, guys. I needed to create animation like this (in principle): 1. animate rectangle in few steps (=in timeline) 2. when finished, run animation BACKWARDS - 2x faster. But this part is only small part of complex timeline. I tried to achieve this effect by .reverse() method - in two ways: 1) First, I put .add(t2) followed by .add(t2.reverse()) into one timeline. I found out that .add(t2.reverse()) overwrite previous .add(t2) - if I understand this behavior well. However I didn't get what I wanted. This example is represented by blue square in CodePen. 2) So I tried another way - I used onComplete parameter where I called this.reverse(). I didn't expect to get the result that I got. When onComplete is called, red square jumps to initial state without any animation. I'm little bit confused because when I use only one timeline - without calling timeline in timeline as in example - everything works well. Can anybody please tell me what I did wrong and show me better approach? Thank you very much in advance. Karpec