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. Hello, We have come a long way with GSAP in the last several months however we have come across an issue we cannot seem to solve. We have an issue when we have two instances of our accordion slider on one page. Can you help us resolve this please? The markup looks like this: jQuery(function($){ var active; var boxes = $('.accordion-slider .box').length; var singleBoxWidth = (100 / boxes); var collapsedWidth = singleBoxWidth - ( singleBoxWidth / ( boxes - 1 ) ); var openWidth = 100 - (collapsedWidth * ( boxes - 1 ) ); function accordionSlider() { $('.accordion-slider .box').css('width', 100/boxes + '%' ) $('.accordion-slider .box').on('mouseenter', function(){ if ( !$(this).hasClass('active') && $(window).width() >= 551 ){ //hide active elements if( active ){ TweenLite.to(active.find('.accordion-slider-title'), 0.3, {opacity:0, overwrite:'all'}); TweenLite.to(active.find('.accordion-slider-content'), 0.3, {opacity:0, overwrite:'all'}); } //introduce new active elements var others = $('.accordion-slider .box').not(this); active = $(this); $(this).addClass('active'); others.removeClass('active'); var tl = new TimelineLite(); tl.to(others, 0.5, {width:collapsedWidth + '%'}, 0) .to(active, 0.5, {width:openWidth + '%'}, 0) .to(active.find('.accordion-slider-title'), 0.9, {opacity:1}, 0.3) .to(active.find('.accordion-slider-content'), 0.9, {opacity:1}, 0.4); } }); $('.accordion-slider .box').on('mouseleave', function(){ if ( $(window).width() >= 551 ){ var all = $('.accordion-slider .box'); var tl = new TimelineLite(); tl.to(all, 0.5, {width: 100/boxes + '%'}, 0) .to(active.find('.accordion-slider-title'), 0.3, {opacity:0, overwrite:'all'}, 0) .to(active.find('.accordion-slider-content'), 0.3, {opacity:0, overwrite:'all'}, 0) $(this).removeClass('active'); } }); if( $(window).width() < 551 ) { $('.accordion-slider-title, .accordion-slider-content').removeAttr('style'); $('.accordion-slider .box').removeClass('active').css('width', '100%'); } } accordionSlider() $(window).resize(function(){accordionSlider()}); });
  2. I think including a minimal demo of your setup would be helpful Most likely you have to write the logic for this sort of thing yourself, i.e. something like this: const h5s = gsap.utils.toArray(document.querySelectorAll("h5")); // Set things up h5s.forEach(function(elem) { elem.origColor = gsap.getProperty("color"); elem.addEventListener("click", handleClick); }); function handleClick(e) { // This loops through each of them, but you may want to just animate the previous one instead. // To do that, you'd need to keep track of the previously clicked element using a variable h5s.forEach(function(elem) { gsap.to(elem, {color: elem.origColor}); }); // Make the clicked one blue const elem = e.target; gsap.to(elem, {color: 'blue', overwrite: true}); }
  3. overwrite: true simply tells GSAP to immediately kill all other tweens of that same target (or targets). So, for example, if someone clicks the button a bunch of times quickly, you wouldn't want a bunch of tweens trying to control the progress of that same animation simultaneously. You could use overwrite: "auto" for a more complex algorithm that only looks for (and kills) specific properties that overlap, but in your demo it was clear that we've only got one thing we're tweening anyway, so it's faster to just do overwrite: true. Make sense?
  4. Thank you for the help and the heads up on the old CDN! I have tried it now and it works great! I have one question, what does overwrite:true do?
  5. I don't think you need a timeline actually. First of all, I know it sounds weird but the "/latest/" directory on the CDN points to a very old version of GSAP - I would strongly recommend updating to the latest version. The CDN provider, CDNJS, stopped allowing updates to directories like that many years ago - that's why it's stuck at an old version. In the future, always link to a specific version, like /3.0.5/. You could use a single tween that goes across the whole 28 steps, and then just tween to the midway point (progress: 0.5) for the first step, and the end (progress: 1) for the second. Here's an example with the first step and it's using the latest GSAP 3 syntax: // do the whole sequence in one tween, but just remember that animating the progress to 0.5 is the first part, and then 1 as the second part. var walk = gsap.to("#object", 1, {backgroundPosition: "100% 0", ease: "steps(28)", paused: true}); $('#forward').on('click', function(event) { event.preventDefault(); gsap.to(walk, {progress: 0.5, duration: 1, overwrite: true}); }); $('#back').on('click', function(event) { event.preventDefault(); gsap.to(walk, {progress: 0, duration: 1, overwrite: true}); }); You can load the latest GSAP from https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js (though we're likely releasing an update to 3.1.0 this week, FYI). Does that help?
  6. Hey SamW and welcome to the GreenSock forums! I believe that this is related to the default value of overwrite being changed to false from "auto" as it was in GSAP 2. Specifically an overwrite of "auto" or true is required for your ev.currentTarget opacity tween because it's in conflict with the other tween that changes the opacity to 0. https://codepen.io/GreenSock/pen/mdyzKNJ?editors=0010 I went ahead and also updated the formatting to use GSAP 3's format, including putting the duration in the vars parameter, using the string form of eases, and using gsap instead of TweenLite/TweenMax. Those are all optional of course, but are recommended and I think improvements Happy tweening!
  7. thanks Zach for clarifying this to me and for quick response. I have a problem with property: repeatRefresh, i can't make it work. I'm trying to make a demo in which the svg paths will go in random directions using the new GSAP 3.x Utility Methods. I thought first the problem is with overwrite, but it's not. https://codepen.io/isladjan/full/qBEJPpJ
  8. Hey isladjan, welcome to the GreenSock forums! This is a good question. Sorry, we're still in the process of updating our docs (it's a long process to document all of the changes and new things!) so onInterrupt is not in there yet. The GSAP 3 Release Notes say This means that onInterrupt only fires if the tween is effectively killed, meaning something like .kill() is used on it or another tween affecting the same target has overwrite: true. It might be worth observing how the different overwrite values affect your animation: https://codepen.io/GreenSock/pen/WNbaoXG?editors=0010 Are you trying to achieve something specifically? Maybe some context can help you figure out the setup that you need.
  9. Hi to all, I'm trying to learn gsap 3.x, but i have a problem with overwrite. Can anyone show me working example of new "onInterrupt" callback? Or there is some other way in GSAP 3.x to identify when (or if) overwrite between tweens is happen? Thanks, isladjan
  10. Good questions! A key to my demo is widthSoFar. Perhaps I should have named it something more appropriate for what it does, like offsetAmount. But naming things is hard and it's just a demo so I didn't think about it too hard. Anyway, its a variable used to keep track of the total amount of offset that accrues when users click the button and moves the "slides". Notice that it's the only thing that's being added to. All the tweens I create use it as a reference point. The purpose for this is that if someone clicks the button multiple times in a row (i.e. before the previous animation ends) you need to keep track of the remaining distance that hasn't been covered until that point. The reason why overwrite: true is required is because we want the old animations to be killed. We can't have the container being controlled by two tweens at once and the newer tween has the correct end point because it compensates for both the previous tween(s) and the new tween. Does that make sense? One other note, I included this bit if(!tweenAnim.isActive()) { widthSoFar = 0; gsap.set(container, {x: widthSoFar}); } Because I found that there was a small error in the offset if the user clicks a lot of times in direct succession. Evidently there's some error due to the small amount of processing time it takes to update variables (meaning the time between the click event and when the amount is actually stored in widthSoFar). So I corrected that by resetting once the animation is no longer active. I hope that helps! I'm happy to clarify anything that's confusing.
  11. @ZachSaucier first of all, thank you so much. I was struggling with that all day! I originally removed the element from the DOM and used append child to add it to the end but I was constantly getting that jump. I would be really, greatful if you could answer these questions so I can wrap my head around what you did: How is it that cloning then appending doesn't create a jump? Ive never seen overwrite: true before, Ive read that: What's it doing in this tween? You've added a !tweenAnim.isActive() statement, which I presume is to set the container back to the starting position? How is it that you can click repeatedly and the tween still run smoothly? Again thank you so much.
  12. So fast answer! Thanks!!! I can't find property overwrite in docs? Can you give me the link?
  13. Your mouseout is triggering and you didn't tell your tweens to overwrite, so you're creating a ton of conflicting tweens. I assume this is what you wanted, right?: https://codepen.io/GreenSock/pen/9a468c836762b983013294fef9d7a296?editors=0010 Happy tweening!
  14. Hm, try making sure you set overwrite: true or overwrite: "auto" on your tween so that it kills any competing tweens. If you're still having trouble, please post a reduced test case in codepen and we'd be happy to help.
  15. I had to deal with this "issue" as well, I didn't go through entire code but for some reason ScrollMagic tries to update tween twice, then detects it as overwrite and tries to call onOverwrite method which has been removed from gsap 3. Certainly not related to GSAP and those are just warnings, you can ignore them without any issue. There are other compatibility issues, for example ScrollMagic tries to use 'Tween' object when you try to update scene duration on the fly, this gives error. You can set Tween equal to gsap directly in ScrollMagic files.
  16. @ZachSaucier thanks for reply. I made a repro - https://codesandbox.io/s/jovial-moser-fk4lq Animations are in the App.vue file. If you change GSAP 3 to GSAP 2 all is fine. This behavior is not expected. I am not sure how to apply gsap.defaults({overwrite: "auto"})
  17. Hey bdrtsky, It's hard to say from that video what exactly is happening. My guess is that it has to do with the default overwrite behavior. Try setting gsap.defaults({overwrite: "auto"}); and see if that fixes the issue. If it does, you can just set it on the tweens that need it later on if you want to. If it doesn't fix the issue, recreating the issue in a CodePen or something would be helpful for us.
  18. Been struggling with this for a while now and can't seem to solve the issue. My animation has a box comes in from right (outside the 'banner' container) then the next tween needs to overlap and slow down the animation. .from(div1, {duration: 0.3, x: 300}, 'f1+=0.5') .to(div1, {duration: 6, x: '-=40'}, '>-=0.5') 2 sec later the next tween pushed the box out to the left. The problem is that on repeat the slow tween doesn't play. .to(div1, {duration: 0.3, x: -410, overwrite: 'auto'}, 'out1') If I remove the overwrite: 'auto' then the slow tween keeps playing after the box goes off to the left. Any suggestions? The only way I found a way around this to add a .call function https://codepen.io/dev-pk/pen/MWYJGEG
  19. The solution is not obvious. Set overwrite to "auto". https://codepen.io/osublake/pen/349eabaaf1cf99de3010a6a61003abcc @GreenSock More overwrite issues.
  20. Thanks for clarifying what you're wanting. There are a few ways to handle this sort of thing. One would be to call the "out" animation/timeline then in its onComplete you do the "in" animation. That way when the other button is clicked, you overwrite the onComplete with the new animation. Any other method of waiting for the "out" animation to complete and then calling the correct animation would work. The selectors of this are a bit off but it shows the gist: https://codepen.io/GreenSock/pen/MWYyMmX?editors=0010
  21. Not sure. I really haven't used any beyond simple testing in a long time, so I don't remember. It's mostly been helping other people. When something looks funky, it's not obvious to me that the problem is overwrite. My first instinct is that there is a logic problem somewhere. Also, callbacks fire on conflicting tweens.
  22. Yep, we expected there'd be some speed bumps during the transition. Just keep in mind: No other animation engine I know of has ever done auto-overwriting (or any kind of overwriting that I can remember). So having overwrite: false as the default seems common/expected in the greater context (outside legacy GSAP) There's a performance penalty to overwrite: "auto". I'm not excited about imposing that on everyone, especially since I'd guess that 95%+ of users don't create conflicting tweens to begin with. In other words, a tiny portion of the audience benefits from something that 100% would pay the performance penalty for. Frankly, I'm a bit uncomfortable making it EASIER for people to create conflicting animations (without even realizing it) In some ways, I see it as a GOOD thing that some people have run into issues with their animations due to their conflicting tweens - yes, it's one more question in the forums for us moderators to answer, but ultimately it helps users understand what's going on and why they should avoid creating conflicts (or at least how to mitigate them intentionally if they must create them to begin with). I'm not totally closed off to changing the default to "auto", but I think we need to push through at least another month or two and let people settle in a bit. It seems premature to revert just because some people have stumbled. Remember, plenty of people have stumbled on the old default overwrite:"auto" behavior and wondered why their tweens got killed. It isn't as if overwrite: "auto" is going to solve everything. Wouldn't that be the case with any other animation library as well? And I'm curious - what are the common scenarios that tend to trip you up? I think it'd help me to understand the context a bit. In other words, when does the overwrite: false behavior tend to catch you off-guard?
  23. I think having overwrite set to false is really only helpful to people who create conflicting animations in banner-like animations. When doing interactive animations, having overwrite set to false can really mess people up because most people are not familiar with the different overwrite behaviors. I've been using gsap since 2014, and the new overwrite behavior still messes me up. I looked at this question last night, and it didn't occur to me that it might be an overwrite issue. I understand the reasoning for having overwrite set to false, but I think it does more harm than good.
  24. Hey mapo and welcome to the GreenSock forums! Thanks for being a Shockingly Green member. I think most of your jumpiness comes from the difference in the default value of overwrite between GSAP 2 and GSAP 3. In GSAP 2 it was "auto" by default and in GSAP 3 it is false by default. Changing it removes a bit of the jumpiness for me. You can change the default by saying gsap.defaults({overwrite: "auto"}); or you could apply it to just the tweens you want to by saying overwrite: "auto" in their vars parameter. @GreenSock another instance where people are tripping over this. But maybe it will lessen once people are converting GSAP 2 things to GSAP 3 a while from now?
  25. Just keep bothering @GreenSock until he changes it back to "auto". ? There have been a lot of overwrite issues since v3 was released. https://greensock.com/search/?&q=overwrite&page=1&search_and_or=or&sortby=newest