Search the Community

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?

Yikes! I totally missed this thread, @lucky111. Sorry! Yes, I would definitely recommend the helper function in the docs, no question. It will perform significantly better because it doesn't constantly create a new tween over and over again on each tick to accomplish the scrubbing technique. Plus the non-GreenSock one didn't set overwrite: true, so it was creating a lot of conflicting tweens. You'd probably never notice functionally, but it's bad for performance. It gives you a lot more flexibility, as mentioned above - you can add any ScrollTrigger-related value to the object you pass in. You're not limited to "fast", "medium" and "slow" speeds - you can set ANY end value, like end: "+=2000" or whatever. But it still works with speed if you prefer that syntax. So overall it's more concise, it performs much better, and offers way more flexibility. I don't mean that as a knock on Chris's version - he built that when he was very new to ScrollTrigger. We all know what a genius he is with animation in general - I just have an unfair advantage of knowing all the ins and outs of ScrollTrigger (having built it)

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!

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.

I read your question a few times but I don't understand what you're asking. Can you provide a reduced test case as a codepen so that we can see what's going on? Also, if you're animating transforms (maybe you're not), "rotate" should be "rotation". I wonder if you're creating overlapping tweens of the same object which would cause overwriting to kick in. You could set overwrite:false and see if that resolves things, but beware that when you create overlapping tweens that overwrite, they're literally fighting each other for control of the same property at the same time, so be careful about setting overwrite:false. Lastly, you can make your code more concise by tapping into the convenience methods of TimelineMax. Instead of timeline.add( TweenMax.to(...), someDelay) you can simply do timeline.to(..., someDelay)

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.

Is there any way I can reduce the size of TweenLite's footprint within my Flash banner? On publish, Actionscript 2.0 Classes make up 20K of my 32K banner. I'm not doing anything crazy here, just fading in/out and moving up/down. I tried using TweenNano...file size was GREAT. But I couldn't figure out how to make my banner repeat only two times, since there is no "repeat" or "restart" features like there are in TweenLite. Am I importing something that I don't need? Here's my AS2.0 TweenLite Code: // import the tween engine import com.greensock.*; import com.greensock.easing.*; ////////////////////////////////////////////////////////////////////////// // define the timeline var timeline:TimelineLite = new TimelineLite({onComplete:repeat}); // define repeat function variables var nPlays = 0; var totPlays = 2; // repeat timeline if played less than three times function repeat() { if (nPlays < totPlays) { timeline.restart(); nPlays++; } } ////////////////////////////////////////////////////////////////////////// // get your tween on timeline.appendMultiple([ TweenLite.from(text1, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:.5}), TweenLite.from(text1b, 1, {_alpha:0, _y:"40", ease:Expo.easeOut, delay:.5}), TweenLite.to(text1, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:2.5}), TweenLite.to(bg1, 1, {_alpha:0, ease:Expo.easeOut, delay:2.5}), TweenLite.from(text2, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:3}), TweenLite.to(text2, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:5}), TweenLite.from(text3, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:5.5}), TweenLite.to(text3, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:7.5}), TweenLite.from(text4, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:7.5}), TweenLite.from(stall, 2, {_y:"10", delay:10})]); stop(); Here's my AS2.0 TweenNano code. File size is great, but I can't figure out how to make it repeat only twice. // import the tween engine import com.greensock.*; import com.greensock.easing.*; ////////////////////////////////////////////////////////////////////////// // define repeat function variables var nPlays = 0; var totPlays = 2; // repeat timeline if played less than three times function repeat() { if (nPlays < totPlays) { //initBanner.start(); initBanner(); nPlays++; } } ////////////////////////////////////////////////////////////////////////// function initBanner({onComplete:repeat}) { //the issue is with this line TweenNano.from(text1, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:.5, overwrite:0}); TweenNano.from(text1b, 1, {_alpha:0, _y:"40", ease:Expo.easeOut, delay:.5, overwrite:0}); TweenNano.to(text1, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:2.5, overwrite:0}); TweenNano.to(bg1, 1, {_alpha:0, ease:Expo.easeOut, delay:2.5, overwrite:0}); TweenNano.from(text2, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:3, overwrite:0}); TweenNano.to(text2, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:5, overwrite:0}); TweenNano.from(text3, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:5.5, overwrite:0}); TweenNano.to(text3, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:7.5, overwrite:0}); TweenNano.from(text4, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:7.5, overwrite:0}); TweenNano.from(stall, 2, {_y:"10", delay:10, overwrite:0}); } initBanner(); stop();

Thanks Carl for your suggestions and all the wonderful video tutorials you've shared over the years. Unfortunately, this code only seems to loop the final tween, not the entire group. (I read the other thread you linked to earlier this week. It causes a hiccup as you jump from an empty keyframe, so that creates another issue.) import com.greensock.*; import com.greensock.easing.*; function initBanner() { TweenNano.from(text1, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:.5, overwrite:0}); TweenNano.from(text1b, 1, {_alpha:0, _y:"40", ease:Expo.easeOut, delay:.5, overwrite:0}); TweenNano.to(text1, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:2.5, overwrite:0}); TweenNano.to(bg1, 1, {_alpha:0, ease:Expo.easeOut, delay:2.5, overwrite:0}); TweenNano.from(text2, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:3, overwrite:0}); TweenNano.to(text2, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:5, overwrite:0}); TweenNano.from(text3, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:5.5, overwrite:0}); TweenNano.to(text3, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:7.5, overwrite:0}); TweenNano.from(text4, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:7.5, overwrite:0}); TweenNano.from(stall, 2, {_y:"10", delay:10, overwrite:0, onComplete:loop}); } initBanner(); // function to repeat twice var count = 0; function loop() { count++; if (count != 2){ initBanner(); //WHAT AM I DOING WRONG HERE? trace("ahhhh"); } }

replayBtn.onclick = function() { til.invalidate().restart(); } //----------------------- til = new TimelineMax({repeat:3, yoyo:true}); //----------------------- til.add("one", 0.1) .add("two", 2.5) .to(root.Image01, 10, {scaleX:1.10, scaleY:1.10, ease:Sine.easeInOut, overwrite: false}, "one") .to(root.Image02, 10, {scaleX:1.10, scaleY:1.10, ease:Sine.easeInOut, overwrite: false}, "one") .from(root.Byline, 1, {alpha:0, ease:Sine.easeInOut, overwrite: false}, "two") .from(root.CTA, 1, {alpha:0, ease:Sine.easeInOut, overwrite: false}, "two+=0.5") When I click on the button nothing happens. I know i'm missing something obvious, but I've realised I've never actually added a non-Exit button in Animate before and I'm not sure what I'm missing from this...

Thank you , You are super helpful and always get to the heart of the solution but I get how I made this slightly confusing. Yes I understand the overwrite issue. I was getting this issue with other solutions, For some reason it is not working on codepen (I will add it but hopefully it doesn't confuse you), but my html works, I could film it if needed. The reason I don't want to reverse is because I want to fade out immediately and quickly once the mouse leaves the box. The only issue is I don't know how to do this without waiting for the mouseenter timeline finishes. ... Is there a way to on mouseleave: kill/ pause the previous timeline and tween to an opacity 0. if this still doesn't make sense I can explain it differently, just let me know! Thanks! https://codepen.io/jaykobz/pen/YzNQBVm?editors=0010

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.

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

Jack, loving your new platform. Spent the past weekend kicking the tires. Question, in using the following code I'm discovering that the brightness tweens in the 'over' and 'out' functions seem to be overwriting the tweens in the clickHandler function. What's the story here? Not sure what to do about this. Any help is greatly appreciated. import com.greensock.*; import com.greensock.easing.*; var clipArray:Array = [one, two, three, four, five]; for (var i:int = 0; i < clipArray.length; i++) { clipArray[i].buttonMode = true; clipArray[i].addEventListener(MouseEvent.CLICK, clickHandler); clipArray[i].addEventListener(MouseEvent.ROLL_OVER, over); clipArray[i].addEventListener(MouseEvent.ROLL_OUT, out); } function clickHandler(event:MouseEvent):void { for (var i:int = 0; i < clipArray.length; i++) { if (event.currentTarget == clipArray[i]) { clipArray[i].mouseEnabled = false; clipArray[i].buttonMode = false; TweenMax.to(clipArray[i], 1, {colorMatrixFilter:{brightness:2}}); } else { clipArray[i].mouseEnabled = true; clipArray[i].buttonMode = true; clipArray[i].alpha = 1; TweenMax.to(clipArray[i], 1, {colorMatrixFilter:{brightness:1}}); } } } function over(event:MouseEvent):void { TweenMax.to(event.currentTarget, .3, {colorMatrixFilter:{brightness:1.3}}); } function out(event:MouseEvent):void { TweenMax.to(event.currentTarget, .3, {colorMatrixFilter:{brightness:1}}); }

The solution is not obvious. Set overwrite to "auto". https://codepen.io/osublake/pen/349eabaaf1cf99de3010a6a61003abcc @GreenSock More overwrite issues.

Yep, it was a very intentional change because: The old "auto" default overwrite mode sometimes caught people off guard, so opting in ensures people are aware of what's going on. Overwriting costs some overhead processing-wise, but in the vast majority of cases you don't really need to do any overwriting so it's just a waste to always do by default. Even when you've got two competing tweens running, the "last one wins" rule applies so people almost never notice it anyway. The only time it becomes a stumbling block is when the new tween has a shorter duration than the old tween. That wouldn't work because the 5th parameter is the value that you want mapped. But like you said, it's quite easy to get the result you want: const convert = gsap.utils.pipe( gsap.utils.clamp(0, 1000), gsap.utils.mapRange(0, 1000, 2, 0.5) ); console.log(convert(-100)); // 2

Cool! Very good video! Especially the real life example at the end is important in my opinion to drive the point home. I love it! So my assumption is right for gsap 2: there was an automatic overwrite. I'm wondering why you chose to set it to false by default? `auto` as the defaults feels like it makes more sense. Back to topic: unfortunately I can still provoke unwanted jumps/flashes in your pen when scrolling back and forth heavily

Clever approach! Thanks for the demo. I set overwrite:true on the progress tween in the fork below. https://codepen.io/snorkltv/pen/QWdwyVg?editors=0010 Does that help? For more on overwriting check out: Handling Conflicting Tweens

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

Hi @ZachSaucier, Thanks so much for that article, it really helped. I've looped it and it's much cleaner. How should I go about adjusting individual animations? eg let's say I wanted to change the duration of the second brush. I'll add an additional class to that element and then overwrite it? What's the cleanest way to do that? https://codepen.io/spearquit/pen/NWbVGJM

Hey girro. Some notes: You're making one of the most common GSAP mistakes of using the old duration parameter instead of including the duration inside of the vars. Putting it in the vars also lets you use defaults. Your repeatRefresh isn't doing anything. If you're going ahead with some ES6 stuff (like arrow functions) you may as well use more features (like using const and let). If you're using a timeline we recommend using the position parameter instead of the delay property. We recommend using the latest GSAP version (3.6.0 at the moment). On CodePen, you should only include the stuff within the body in the HTML section. And you can load external resources via the cog icon next to JS (and CSS). I recommend adding a background rect to each button so that they're easier to click. As for your question, often times it's good to create animations ahead of time and use control methods (this is one of the tips to animate efficiently). However, if you need the animations to overwrite each other like this usually it's best to create the animation when you need it. I'd approach it like so: https://codepen.io/GreenSock/pen/GRNLwXE?editors=0010 With that being said, your timelines currently affect both state-specific elements and shared elements (like the background shape). The way I have it set up above, the animation is killed off completely when an item is clicked, which could be an issue if users click between them fast enough. To remedy that, I'd separate the state specific animations from the shared animations. Only kill off the animation(s) related to the shared elements and let the ones for each state continue.

That's what I thought but I didn't want to assume anything In both line 46 and 47 you are affecting the same element's width. In the second tween (line 47) you have a negative relative offset of '-=0.4' which means that the tweens overlap by 0.4 seconds. That means that the tweens are in conflict! GSAP has a hard time figuring out which value the width should be because it's being told two different things. With that being said, you can tell GSAP to ignore the width animation until it has full access by setting overwrite: "none" on the second tween (line 47). That seems to fix the issue. My question is why does it currently work the first time? I would think it would have that glitch every time without changing the overwrite for the second tween

Hi Okay hopefully simple. var til = new TimelineMax({repeat:5, repeatDelay:0.1}) til.from(this.UW1, 0.5, {alpha:0, ease: Sine.easeInOut, overwrite: false}, 0.1) .to(this.UW1, 0.5, {alpha:0, scaleX:1.05, scaleY:1.05, ease: Sine.easeInOut, overwrite: false}, 5) .from(this.UW4, 0.65, {alpha:0, scaleX:0.95, scaleY:0.95, ease: Sine.easeInOut, overwrite: false}, 5) .to(this.UW4, 1.00, {alpha:0, ease: Sine.easeInOut, overwrite: false}, 9) What I want to do, is on the final play of the loop to stop at 5 seconds, ie NOT do the fade out at 9 seconds. Is this possible in a simple manner? I presume there is a counter that the repeat is accessing, and I just guess I"m not sure how to implement an if command within the timeline as well. Thanks in advance.

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

Hard to say without being able to test it. Try changing the default overwrite, and see it that helps. gsap.defaults({ overwrite: "auto" });

We don't really have the capacity to do code optimization for every person who posts in these forums. Glancing at the code I'd try to avoid creating functions inside of a loop if possible. I bet you could avoid having to get the BoundingClientRect every mouse move event. You should also make sure to overwrite the previous animations in GSAP 3. There's really not that many calculations going on - GSAP can't remove the need to avoid calculations in every case.