Search the Community

Hello! I just faced a problem where overwrite: 'auto', is not overwriting pending staggered items. In the codepen, you can easily reproduce by clicking the show button and then quickly the hide button (while the "show" timeline is still animating), or by pressing the simulate button (which show then hide quickly). The issue is that the elements currently showing using a stagger, are not going to be "overwrited" by the hiding timeline that is not using any stagger. I guess that's because the overwrite: 'auto' of the "show" will be applied when the staggered items start animating, so it will overwrite the tween applied in the "hide". I I believe that this should not behave like that, but maybe I am wrong and this is the expected behaviour. Waiting for your answer! Thanks !

hi, i have issue with promise, is there any way to resolve `await Promise.all([ tl1 ])` when we overwrite a instance properties ? Some of my promise wait for animations but never resolve because they get crush somewhere in another child actions. ```ts gsap.defaults({ overwrite: 'auto', onInterrupt:function() { this.progress( 1 ); // force progress 100%, kill la promise pour les async await. } }); // test gsap promise all setTimeout( async () => { console.log( '💚' ); const obj = { x:0 }; const tl1 = gsap.timeline().to( obj, { x:8 }); const tl2 = gsap.timeline().to( obj, { x:5 }); // comment me for resolve Promise.all setTimeout( async () => { await tl1; console.log( '💚1' ); await Promise.all([ tl1 ]); console.log( '💚2' ); // never fired if tl2 executed }, 10 ); }, 1000 ); ``` is a `onInterrupt` bug ? or maybe we have another global cb for handle those case ? thanks

Hi there, I'm using near latest npm greensock (3.11.4), and there seems to be a change in behaviour since version 2.0.1 and I'm not sure how to resolve it. Before I could have 3 items with infinitely repeating tween inside a timeline, but later I want to stop those tweens on a delay (so they don't stop at the same time), but I don't want to pause the timeline... so I'd add my tweens to a timeline like this: ``` // start rows anim this.spinTimeline = new TimelineLite({paused:true}); _.each(this.rows, (row, i) => { var slideTween = new TweenMax(row.sprite, 3, {x: row.offset, ease: Power0.easeNone, repeat: -1 }); this.spinTimeline.add(slideTween , "startRowT" + i, "-=0.1"); }); this.spinTimeline.play(); ``` then later I could stop them animating repeatedly by just calling a new tween on the row.sprite, with a slightly increasing delay on each, and the animations would transition smoothly from repeating x to landing on a specific point on the x axis. ``` stopRows() { _.each(this.rows, (row, i) => { TweenMax.to(row.sprite, 0.75, {x: row.offset, ease: Elastic.easeOut, delay: 0.75 * i, onComplete: this.animComplete.bind(this) }); }); } ``` Now with latest gsap versions I can't figure out how to recreate this. the repeating tween just keeps playing after the stopping tween finishes. If I pause the timeline first, it works but the repeating anims pause immediately.. If I use overwrite: true, then the repeating anims pause immediately (not when the stop anim starts after the delay). If I use timeline.killTweensOf(row.sprite) onStart, then it happens immediately, (not after the delay).. so i can't transition from one tween to the other anymore. My new code looks like this: ``` // start anim const tl = this.tl; this.rows.map((row, i) => { const offsetX = row.container.width / 2; tl.to(row.container, {x: offsetX, duration: 3, ease: 'none', repeat: -1}); }); tl.play(); // stop anim: this.rows.map((row, i) => { const toX = row.stopOffset; gsap.to(row.container, { duration: 1, x: toX , ease: 'elastic.out', delay: 0.75 * i, overwrite: true, // i'd expect this overwrite to happen after the delay, not immediately. onComplete: () => { //this.tl.killTweensOf(row.container); this.state = 'ready'; }, }); }); Edit: I found the problem, I needed to remove the duration from my new version and use t.killTweensOf in the onComplete (the line i had commented!).. that works as I want now!

Hi Everyone! I have a timeline that plays and reverses based on scroll direction. I also use a mouse enter/leave function to trigger/control the same timeline. When using ScrollSmoother the direction overrides the mouse enter/leave functions (the timeline won't play until the scroll is at rest, even when I trigger mouse enter/leave events). My question: Can I overwrite the scroll control to prioritize the "mouse enter/leave" functions? Thanks, as always.

Hi everyones I got stuck at the rotation so my question is how can i Overwrite the rotation ? ?? please go to the Codepen dont know only show the mobile version ... thanks for your time !

we can play animations when we click on the Nav "Slides 1 2 3..." and i want it to start as Slides[0] index array element that is Slide A as already Played or Finished animation, and then we can click on Nav slides to play the animation the issue im having is, i want when i click on Slide 2 3 4 or 5 it should Overwrite gsap.set property Slides[0] by GSAPSlideTL or in other words Slides[0] is not working when click animation to play GSAPSlideTL thank you

Hi all, In the CodePen I've set up a basic toggle that opens and closes a div. As part of the animation, the padding also expands from 0px to 20px. The 20px is however currently hard coded. What's the best way to store the divs original padding and refer to this for future animations? As currently if for example the button is toggled before the animation completes, the padding would return for example 10px if it wasn't hard coded. I was wondering if gsap had any way to store such properties? Or just storing it in a data attribute on the div is a fine solution.

Hi, In the animation, overwrite: true is not working with mask animation, works fine on other normal tweens. Works fine once animations are finished. Thanks for your help, always appreciated.

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

(In Animate CC) I have been at this for a while but cant figure out how to restart an animation from the beginning values when I use an overwrite. A basic example. On "tl2" timeline a symbol scales slowly from 0 to 100. After 3 seconds "tl" timeline overwrites and scales this symbol back to 0. Both of these timelines are nested inside a "maintl" that runs on a endless loop. In this case when "maintl" restarts the "tl2" symbol is not at 0 scale but at where it was cleared and scaled back to 0 by "tl". How to restart the "maintl" so that scaling starts again from 0. var maintl = gsap.timeline({repeat:-1}); var tl = gsap.timeline({repeat:0}); var tl2 = gsap.timeline({repeat:0}); //tl1 tl.to([this.ring],{duration:0.5, scale:0, ease:"none", overwrite:"auto"},"+=3"); tl2.to([this.ring],{duration:6, scale:2.5, ease:"none"},"+=0"); //maintl maintl.add(tl,0)//starts at time of 0 .add(tl2,0) Thanks in advance.

Hi all, i have a timeline animation where i add one object with a yoyo animation to the scene. But in the middle of the yoyo i want to overwrite, but the yoyo repeat animation is still going afterwards... I thought i can do it with overwrite, which works, but after the overwrite is finished the previous yoyo continues ... tl_scene_1 is the timeline animation object and female_02 an asset on the stage which is added next to other elements which are moving. tl_scene_1.to(female_02, { duration: 5, y: '-=200', repeat:3, yoyo: true, yoyoEase:true, ease: 'power2.out'}, 14); tl_scene_1.to(female_02, { duration: 1, y: '+=200', repeat: 0, yoyo: false, ease: 'power2.out', overwrite: 'auto' }, 16); I tried also to use killTweensOf to stop it, but than the relation to the timeline is completely removed. So i guessed with a simple overwrite i can keep the whole animation in the timeline, without removing a tweening object, only because i want to stop them. Any ideas, how to solve this. Peter

Hey! I have the same divs with classes called "wrapper" and they both have same elements called "box" inside. When you mouseenter "wrapper" all boxes inside getting filter:grayscale(1) and autoAlpha:0.5 by tween, but also I have another tween which is saying that box that you target must be filter:grayscale(0) and autoAlpha:1. So my problem is that I can't overwrite first tween by second properly, if I add overwrite:true inside tween2 my function will not work at all. What am I doing wrong? Can you help me, please?

Dear GSAP community, I’ve a question about an ‘overwrite’ feature and some timeline time aspects. If I set an animated parameter without changing the time, it works pretty well! Example: https://codepen.io/belyanskii/pen/vYLBZQE But once I am trying not only to set (or change) an animated parameter but to set delay and duration, overwriting doesn’t seem to occur: https://codepen.io/belyanskii/pen/XWXrgQy Is there a way to overwrite the whole animation w/o clearing or deleting the tweens/timelines?

Hello everyone, I'm doing an animation with a big overlay on page so I'm using the timeline of TimelineMax but I have issue when I'm using .className. To be brief, when I'm using className, it remove all classes on my element and I don't understand why it overwrite it all. Should I write it differently to keep existing classes ? Or is it possible to add an overwriting setting for .className ? This is a codePen that I simplify to troubleshoot : https://codepen.io/FrenchCooder/pen/ZEQpWJe Thanks in advance

Hey is this a bug or a misunderstood feature. I have issue with overwrite. In this demo if we make {overwrite:true} The timeLineId 'action' should override the timeLineId 'pre' only at 3 seconde no ? And if we make {overwrite:false} The timeLine 'pre' will continue in background and make big spike after 'action'. https://codepen.io/djmisterjon/pen/VwwJeJQ would it be possible technically to make override only act when the child timeLine execute has 3 seconds? thanks for help or suggest.

Hi! I'm sorry, but I have some issue with mouseleave, in demo as you can see image with overlay is not dissapearing, if I make tl.reverse() on mouseleave everything is fine, but I need my timeline to hide everything immediately. What am I doing wrong?

In JSFiddle, what I have built works like a charm(timeline with boxes that fade in from left/right). This was copied from a previous website I Have created and it worked perfect there as well. However, for some reason on another website it simply won't work. The error thrown is the overwrite error and I simply can't understand why it won't work considering it's literally the same. Done with ScrollMagic, GSAP, jQuery. https://goo.gl/JeUiEE

Hello GSAP forum! This is my first thread, hope I post it within the rules around here. I've been using GSAP for quite a while now, but there are still a lot of aspects that I couldn't comfortably say I've figured them all out. Such as overwrite, invalidate, restart, stop, seek and so on... I've been reading docs, search on Google, forum post etc, I still can't figure out the most simple things. Question: In the codepen sample, what should I do so whenever I click on buttons the line goes to left or right from wherever it is when the button is clicked. Multiple times. I seriously couldn't figure it out. Any help would be appreciated. Thank you

I'm half afraid to suggest this because it probably exists and it just didn't read the docs close enough, but I think it'd be really useful to have an overwrite mode that checks the assigned value of a tweened property, and doesn't overwrite if the value of one tween matches the value of another conflicting tween. For example, if you have 1 sec tween to Y position "10", and during that tween you call another 1 sec tween, also to Y position "10", the second tween could be ignored with this proposed overwrite mode. Could be useful when multiple UI elements effect the same targets and you don't want a stutter caused by successive tweens with unchanged property values. Hope that all makes sense.

Working on an app where users can position an SVG on the "stage" and pick an "IN" animation. Uses a from tween that starts offstage and ends wherever the user has positioned the SVG. I pulled the stage setup, some of the code and a few buttons as well as a preselected "already-added" SVG to the Codepen. There's a master timeline and each SVG becomes an element defined in a new svgObject containing its own timelines for animation onto the stage (the "IN" timeline), animation while on the stage (the "ONSTAGE" timeline) and animation off the stage (the "OUT" timeline). There can be multiple SVGs and each can have it's own tweens as well as start and end times, positions, etc for each of the 3 timelines. Kind of like this... Right now, I'm just trying to figure out how to dynamically change the "IN" tween if the user clicks a different "IN" option button. Also, trying to figure out how to properly pass new vars like ease changes. My thought was to overwrite the "in" tween and "in" timeline every time a new "in" option is chosen and to do the same for the out tween and timeline. (The onstage timeline might contain multiple options where I'll need to give the user the option to add/chain new vars and tweens) I must not understand the overwrite var and I also must not understand invalidate. I added... overwrite:'all',onOverwrite:overwrittenTween ... to the tweens but the overwrittenTween function is never running. I'm doing this at the end of each "IN" tween button click listener function... var theTweens = masterTL.getChildren(); console.log("theTweens",theTweens); ... (masterTL is the master timeline), and the tweens are all still there and growing with each click of a new "in" tween option. Also, trying to change the ease is not working as I thought it was supposed to. When I add a new ease like this: activeSVG.twIn.vars.ease = newEase; activeSVG.twIn.seek(0).invalidate(); The tween seems to break. As hinted at above, for each SVG, there's an object structured like this... var newSVG = (function() { var SVG = { el: $('#svg-0'), // the SVG itself id: "0", gp: $('#gp-0'), // there's a group that wraps each SVG with the same id# rotating: null, // GSAP Draggable object dragging: null, // GSAP Draggable object resizing: null, // GSAP Draggable object tlIn: new TimelineMax(), // in timeline twIn: null, // in tween tlStage: new TimelineMax(), // onstage timeline twStage: null, // onstage tween tlOut: new TimelineMax(), // out timeline twOut: null // out tween } return SVG; }); ... so I can set all the in/out/stage timelines and tweens for each object there. I bet I'm missing something really obvious.

Overwrite: none is not behaving how I imagined it would. In my codepen example I imagined that the second tween would be ignored because the first tween is already animating the element's "width". Instead it seems like the first tween is being overwritten despite overwrite being set to "none". Am I misunderstanding overwrite? Is there a way to accomplish what I want (where the second tween would be ignored because another tween has already 'claimed' the right to animated "width"?) http://codepen.io/anon/pen/BoJMvw Thanks for any help. -Ryan

Hi everyone, Here is what I'm expecting to happen in the Codepen: 1. Click the "Bezier" button to animate the red box along a bezier path 2. While that is playing, click the "Highlight" button. The bezier tween should stop and the red box should animate up to the top left corner of the green box. 3. Click the "Bezier" button again. The red box should then animate back to it's original starting position and then start on the bezier path again. I thought setting overwrite:"all" would help accomplish this, but I can't get the "Highlight" button to work. If you click the "Highlight" button first then it does move the red box to the correct position, but it doesn't work if you click it second. If you click the "Play Vertical" and "Play Horizontal" buttons, then the red box does box in the appropriate direction. Even if you click them in different orders, so the overwrite appears to be working there? Any suggestions?

Hello, I wanted to overwrite the properties of same element on page animated in two different functions. e.g hover function: $(".showcase-item").hover(over, out); function over(){ var hoverAnimation = new TimelineMax(); hoverAnimation.to($(this).find(".showcase-background"), 0.5, {backgroundPosition: '50% 50%',ease: Power1.easeOut}); } function out(){ var hoverAnimation = new TimelineMax(); hoverAnimation.to($(this).find(".showcase-background"), 0.5, {backgroundPosition: '25% 50%',ease: Power1.easeOut}); } click function: $('.showcase-item').on("click", function(){ var showcaseOpen = new TimelineMax(); showcaseOpen.to($(this).parent(), 0.5, {width: '100%',position:'absolute',zIndex:9,ease: Power1.easeOut}) showcaseOpen.to($(this).find(".showcase-background"), 0.5, {scale:1.3,backgroundSize:'contain',backgroundPosition:'0% 50%',ease: Power1.easeOut,'-=0.2'); }); In above code, 'backgroundPosition' has two different values. I want backgroundPosition on hover to be overwritten by one on click.

Hi! Thank you bringing us GSAP and providing such a great support. We are struggling a little with making the overwrite options work the way we understood in the documentation they should work. We are designers and not professional programmers. These are the lines of code we're using to test it: TweenLite.to( basePath.position, 1, { y: "-=250", delay: 0, overwrite: 0, onOverwrite: reTween } ); TweenLite.to( basePath.position, 2, { y: "+=250", delay: 0.5, overwrite: 0, onOverwrite: reTween } ); We don't seem to be able to prevent the second tween from overwriting the first one half way of it. What are we missing or doing wrong? Thank you!

var tl = new TimelineLite({paused:true}); tl.add(TweenLite.from('.ng_dialog', 0.2, {top: 0, left: 0, opacity: 0, scaleX: 0, scaleY: 0, onReverseComplete: hide})); How do you update/overwrite "top" and "left". I've tried various things from the docs, but no joy. OR, add those two properties. .set()? Thanks.