Search the Community

I'm looping a MC TweenMax.allTo([counterMC6.numbers4], 1, {y:-600, repeat:140, delay:1.5, ease:Linear.easeNone} ); I have another button that pauses it. TweenMax.allTo([counterMC6.numbers4], 0, {paused:true, overwrite:true} ); How would I resume the repeating animation? Do I have to nest it in another Tween and pause/resume that Tween? I don't want to loose the number of times it has already repeated.

Ok I have three movie clips with rollovers and I want to make the movie clips that I am not putting the mouse over darken. The movie clip rolled over would stay its normal exposure while the others would darken. When the mouse is not over any clip they all return to the normal exposure. I feel like this below should work but I cant get it to act right (sometimes they don't darken and sometimes they do) maybe I am not using the Overwrite manager correctly. I also am sure there is a better structure to accomplish this simple task. Any ideas would be awesome. thanks square1.hitter.onRollOver = function() { TweenMax.to(square2.container,1,{colorTransform:{exposure:.5}}); TweenMax.to(square3.container,1,{colorTransform:{exposure:.5}}); }; square2.hitter.onRollOver = function() { TweenMax.to(square1.container,1,{colorTransform:{exposure:.5}}); TweenMax.to(square3.container,1,{colorTransform:{exposure:.5}}); }; square3.hitter.onRollOver = function() { TweenMax.to(square1.container,1,{colorTransform:{exposure:.5}}); TweenMax.to(square2.container,1,{colorTransform:{exposure:.5}}); }; square1.hitter.onRollOut = function() { TweenMax.to(square2.container,1,{colorTransform:{exposure:1}}); TweenMax.to(square3.container,1,{colorTransform:{exposure:1}}); }; square2.hitter.onRollOut = function() { TweenMax.to(square1.container,1,{colorTransform:{exposure:1}}); TweenMax.to(square3.container,1,{colorTransform:{exposure:1}}); }; square3.hitter.onRollOut = function() { TweenMax.to(square1.container,1,{colorTransform:{exposure:1}}); TweenMax.to(square2.container,1,{colorTransform:{exposure:1}}); };

So I take it that "kill" and "overwrite" are different things? In my example the object only has a single property being tweened and overwritten. So why would AUTO behave differently than CONCURRENT? They are both overwriting individual properties of the tween - a single x position tween. In AUTO, why would a tween continue to "live" when it is the tween that was just overwritten? In your opinion, what should I use in this particular case?

CONCURRENT mode (3) will kill ALL tweens of the same object (regardless of whether or not properties overlap) that are running at the time the tween begins. AUTO will only overwrite individual properties of those tweens (and allow the tweens themselves to live).

So what is my option then? Do I use "overwrite = 3" since that works? And please explain WHY this works. I don't see any difference between "overwrite = 3" and using AUTO in my particular example. It would be sweet to have something like: TweenMax.removeTweens(_holder.content_mc,{x}); ...

Hi, thanks for the help. Yes, I read some on overwriting, and tried overwrite:0 and overwrite:2, but the results appear to be the same. I think this is the problem. A user can click the start button several times per second and the tweens aren't able to keep up with that pace on the same object/same property. I think I need to create an array of objects, each of which can be tweened separately (hopefully with the same series of tweens).

TweenMax V11 If I call the "moveContent" function while the object (_holder.content_mc) is still tweening (x property) the onComplete function is called twice. The TweenMax documentation states: 2 (AUTO): (used by default if OverwriteManager.init() has been called) Searches for and overwrites only individual overlapping properties in tweens that are active when the tween begins. Why doesn't this work? I am tweening the x property of _holder.content_mc ... therefore the tweening of the x property is "overlapping" and should be overwritten. If I substitute "overwrite:3" for "overwrite:2" it works perfectly. OverwriteManager.init() private function moveContent(position:Number):void { var currentx:Number = _holder.content_mc.x; var speed:Number = Math.abs(position - currentx)/500; TweenMax.to(_holder.content_mc,speed,{x:position,overwrite:2,ease:Quad.easeInOut,onComplete:moveTagDown}); }

Have you read up on your options for overwriting modes? http://blog.greensock.com/overwritemanager/. Why are you setting overwrite to 0? Doing so allows the tweens to conflict with each other (multiple tweens trying to control the same property of the same object). You might want to try the AUTO mode. I don't have time to read through your code right now to troubleshoot, but let me know if the overwriting mode solves the problem.

Hi all, I'm new to AS3 but I've managed to get a small tween study working anyway. The code below is a simplified version of what I'm trying to do. The start button launches a series of 4 tweens each time it's clicked and there's no limit on the number of clicks. The tweens handle 3 different "circle" movieclips, each with a different size and color. The "flasher" tween in the code below allows the "circleRed_mc" (which has a duration of only .1) to show with each click, however in the more complex code that I'm trying to fix the "circleRed_mc" doesn't show if the button is clicked rapidly, even though the other 3 display. Do I need to add more copies of the circle objects to avoid the interference between the tweens, or do I need additional tweening functions, or both? A hopefully easier question is why does the last tween ("fadeCircle") not fade out to alpha:0? Here's the code: Frame 1: import gs.TweenLite; import gs.easing.*; import flash.display.MovieClip; var xcoord:Number = 200; var ycoord:Number = 400; var circleSmall_mc:circleSmall = new circleSmall(); addChild(circleSmall_mc); circleSmall_mc.y = ycoord; circleSmall_mc.alpha = 0; var circleRed_mc:circleRed = new circleRed(); addChild(circleRed_mc); circleRed_mc.y = ycoord; circleRed_mc.scaleX = 0; circleRed_mc.scaleY = 0; circleRed_mc.alpha = 100; var circleLarge_mc:circleLarge = new circleLarge(); addChild(circleLarge_mc); circleLarge_mc.y = ycoord; circleLarge_mc.scaleX = 0; circleLarge_mc.scaleY = 0; stop(); function startMovie(event:MouseEvent):void { this.play(); } playButton.addEventListener(MouseEvent.CLICK, startMovie); Frame 2: function leader(large_mc:MovieClip,small_mc:MovieClip,red_mc:MovieClip,xcd1:Number):void { small_mc.x = 575; small_mc.y = 700; small_mc.alpha = 100; TweenLite.to(small_mc, .5, {x:xcd1, y:ycoord, ease:Strong.easeOut, overwrite:0, onComplete: flasher, onCompleteParams: [large_mc,small_mc,red_mc,xcd1]}); } function flasher(large_mc:MovieClip,small_mc:MovieClip,red_mc:MovieClip,xcd2:Number):void { small_mc.alpha = 0; red_mc.x = xcd2; TweenLite.to(red_mc, .1, {scaleX:50, scaleY:50, alpha:0, ease:Strong.easeOut, overwrite:0, onComplete: showCircle, onCompleteParams: [large_mc,small_mc,red_mc,xcd2]}); } function showCircle(large_mc:MovieClip,small_mc:MovieClip,red_mc:MovieClip,xcd3:Number):void { red_mc.scaleX = 0; red_mc.scaleY = 0; red_mc.alpha = 100; large_mc.x = xcd3; large_mc.scaleX = 0; large_mc.scaleY = 0; large_mc.alpha = 100; TweenLite.to(large_mc, 1, {scaleX:1, scaleY:1, ease:Strong.easeOut, overwrite:0, onComplete: fadeCircle, onCompleteParams: [large_mc,small_mc,red_mc,xcd3]}); } function fadeCircle(large_mc:MovieClip,small_mc:MovieClip,red_mc:MovieClip,xcd4:Number):void { xcoord = setx(xcd4); TweenLite.to(large_mc, 1, {alpha:0, ease:Cubic.easeInOut, overwrite:0}); } function setx(xcd:Number):Number{ if (xcd < 800){ xcd += 200; } else { xcd = 200; } return xcd; } leader(circleLarge_mc,circleSmall_mc,circleRed_mc,xcoord);

Hi, I'm working with the TimelineMax, and besides tweens, I'd like to add audio (Sounds class) on the timeline. But when I pause or stop the timeline, the sounds continue playing. I was wondering if TimeLineMax has any features that help me putting the sound on the timeline and manages the pause and gotoTime handling for me. Maybe something with a sub-timeline? var _soundChannel : SoundChannel; var _instance:Sound; // A class instance with a dynamically instantiated Sound. var props:Object = { delay: 0, overwrite: OverwriteManager.AUTO, onStart: function() { _soundChannel = _instance.play(); }, onComplete: function() { _soundChannel.stop(); } }; timeLine.insert(new TweenLite(instance, duration, props), startTime); TIA Ronaldo

A few things off the top of my head after glancing at the code: 1) You set the overwrite mode to 0 (NONE) which means conflicting tweens will be allowed to run. I saw some conflicting tweens like bbook's x property was getting tweened by 2 different tweens at the same time meaning they'll fight with each other. I generally recommend against disabling overwrite management for this reason. Why not use the AUTO mode? 2) You're using a nested numerodos() function. Nested functions are usually problematic because they get deleted as soon as the parent function finishes running. I've seen one case in all my years where a nested function was useful, but in every other case I've seen them just cause problems and confusion. I'd avoid them. 3) In thecloser(), you create a local timer variable. I bet that's getting garbage collected because it's a local variable. Why not use TweenLite.delayedCall()? 4) You used 5 lines to activate your plugins. You can combine those all into one line like this: TweenPlugin.activate([setSizePlugin, AutoAlphaPlugin, BlurFilterPlugin, ColorTransformPlugin, TintPlugin, RemoveTintPlugin]); 5) I noticed you're doing a lot of sequencing. You might want to check out the new TimelineLite and TimelineMax classes in v11 (http://blog.greensock.com/v11beta/). They can make sequencing very intuitive and then you can manage the group/sequence as a whole very easily. Hope that helps.

I know I am still learning and probably always will be but for some reason I am completely stumped with this issue I am having using Tweenmax. Any help would be completely appreciated. Basically I am trying to assign a couple of functions to a button. The first function works okay (It moves the first image off the stage, and bring the second image on to the stage, while the button , and another moves to a different coordinate) It's the second function where I ran into a wall. It's suppose to move the second image off the stage, and bring the first image to it's original coordinate. But it's not. The second image goes no where. Here is a link to the page with the animation. http://www.erickjurado.com/docs/pages/demopage.html I am guessing it's an overwrite issue, or maybe some factor I am over completely overlooking. But either way I can't seem to figure out what I am doing wrong, and slowly going insane trying to figure it out. I am using TweenMax Again any insight, help, assistance, perspective, or direction would be totally appreciated!!! Here is the code if that helps. And again much thanks for any help!!!! import fl.transitions.*; import fl.transitions.easing.*; import flash.events.MouseEvent; import gs.*; import gs.easing.*; import gs.TweenMax; import gs.plugins.*; TweenPlugin.activate([setSizePlugin]); TweenPlugin.activate([AutoAlphaPlugin]); TweenPlugin.activate([blurFilterPlugin]); TweenPlugin.activate([ColorTransformPlugin, TintPlugin]); TweenPlugin.activate([RemoveTintPlugin, TintPlugin]); stop(); var soundReq:URLRequest = new URLRequest("slapish.mp3"); var sound:Sound = new Sound(); var soundControl:SoundChannel = new SoundChannel(); var resumeTime:Number = 0; sound.load(soundReq); OverwriteManager.init(0); sound.addEventListener(MouseEvent.CLICK, thecloser); ////////////////////////////////////////VARIABLES//////////////////////////////VARIABLES//////////////////////////////VARIABLES var bf:BlurFilter = new BlurFilter(); bf.blurX = 100; bf.blurY = 100; var backgroundmover:backgrounder = new backgrounder(); addChild(backgroundmover); backgroundmover.width = 675; backgroundmover.height = 510; backgroundmover.x = 280; backgroundmover.y = 192; backgroundmover.filters = [bf]; backgroundmover.alpha = 0; TweenLite.to(backgroundmover, .75,{alpha:1,ease:Cubic.easeOut, overwrite:false}); TweenMax.to(backgroundmover, .10, {blurFilter:{blurX:100, blurY:0}}); var closermakerc:closer = new closer(); addChild(closermakerc); closermakerc.x = 43; closermakerc.y = - 125; closermakerc.width = 35.8; closermakerc.height = 35.8; closermakerc.alpha = 0; TweenMax.to(closermakerc,1, {y:345,rotation:1080, alpha:1, ease:Back.easeOut}); closermakerc.addEventListener(MouseEvent.CLICK, thecloser); var nexter:nextbutton = new nextbutton(); addChild(nexter); nexter.x = 43; nexter.y = - 125; nexter.width = 50.8; nexter.height = 50.8; nexter.alpha = 0; nexter.buttonMode = true; TweenMax.to(nexter,1, {y:300,rotation:1080, alpha:1, ease:Back.easeOut}); nexter.addEventListener(MouseEvent.CLICK, numerouno); /////////////FIRST IMAGE///////////////////// var bbook:birdbook = new birdbook(); addChild(bbook); bbook.x = 102; bbook.y = 374.1; bbook.width = 30; bbook.height = 200; bbook.rotation = 1080 bbook.alpha =1; bbook.filters = [bf]; TweenMax.to(bbook, 0, {dropShadowFilter:{color:0x000000, alpha:1, blurX:10, blurY:10, strength:.5, angle:50, distance:3}}); TweenLite.to(bbook, .25,{x:100, y:60,alpha:1, ease:Back.easeOut, overwrite:false}); TweenLite.to(bbook, .25,{x:450, width: 400,ease:Cubic.easeOut, overwrite:false,delay:.25}); TweenLite.to(bbook, .25,{width: 30,ease:Cubic.easeOut, overwrite:false,delay:.5}); TweenLite.to(bbook, .25,{rotation:0,y: 270,ease:Cubic.easeOut, overwrite:false,delay:1}); TweenLite.to(bbook, .25,{width:400,x: 50,ease:Cubic.easeOut, overwrite:false,delay:1.25}); TweenLite.to(bbook, .25,{width:40,height:40, y:250, ease:Cubic.easeOut, overwrite:false,delay:1.5}); TweenLite.to(bbook, .25,{rotation:1080, x:100,y:335,ease:Cubic.easeOut, overwrite:false,delay:1.75}); TweenLite.to(bbook, .25,{width:382, height:324, x:285, y:200, ease:Elastic.easeOut, overwrite:false,delay:2}); TweenMax.to(bbook, 1, {dropShadowFilter:{color:0x000000, alpha:0, blurX:10, blurY:10, strength:1, angle:50, distance:3},delay:2.25}); TweenMax.to(bbook, 1, {blurFilter:{blurX:0, blurY:0}, delay:2.5}); ////////////SECOND IMAGE////////////// var elspread:spread = new spread(); addChild(elspread); elspread.x = -300; elspread.y = -25; elspread.width = 30; elspread.height = 30; ////////////////////FUNCTIONS///////////////////////////////FUNCTIONS///////////////////////////////FUNCTIONS///////////////////////////////FUNCTIONS function numerouno (event:MouseEvent):void { TweenLite.to(nexter,1, {y:368.9, x:316.9,rotation:1080, alpha:1, ease:Back.easeOut}); TweenLite.to(closermakerc,1, {y:369.9, x:258.9, rotation:1080, alpha:1, ease:Back.easeOut}); TweenMax.to(bbook, 1, {blurFilter:{blurX:10, blurY:10}}); TweenMax.to (bbook, 1,{height:10,width: 100, y:100, x:350,ease:Cubic.easeIn}); TweenMax.to (bbook, 1,{rotation:90,ease:Cubic.easeIn, delay:.25}); TweenMax.to (bbook, 1,{x:800, ease:Cubic.easeIn, delay:.55}); TweenMax.to(elspread, .25,{x:275, y:171, width: 520, height:321,alpha:1, ease:Cubic.easeOut, delay:1}); function numerodos (event:MouseEvent):void { TweenLite.to(nexter,1, {y:368.9, x:316.9,rotation:1080, alpha:1, ease:Back.easeOut}); TweenLite.to(closermakerc,1, {y:369.9, x:258.9, rotation:1080, alpha:1, ease:Back.easeOut}); TweenMax.to (elspread,1,{x:800, ease:Cubic.easeIn}); TweenMax.to(bbook, .25,{alpha:1, x:100, ease:Cubic.easeOut, delay:1}); } } function thecloser(event:MouseEvent):void { TweenLite.to(closermakerc, 1 ,{ y: -60, rotation:1080, ease:Back.easeIn}); TweenLite.to(backgroundmover, 1, {width:1, height:400,delay:.75 }); TweenLite.to(backgroundmover, 1, {rotation:90, x:-300,delay:1.25 }); var timer:Timer = new Timer(4500, 1); timer.start(); timer.addEventListener(TimerEvent.TIMER, felakiller); } function felakiller(e:TimerEvent):void { this.parent.parent.removeChild(this.parent); }

Your code is just creating a bunch of x/y tweens for the same object (table) that all start immediately, so they overwrite each other. It sounds like you want a sequence. In that case, you'd want to either use the "delay" special property so that they occur one-after-the-other, or use a TimelineLite, like: var timeline:TimelineLite = new TimelineLite(); for (var m:uint = 0; m var XX=board.getChildAt(player.field).x; //new x var YY=board.getChildAt(player.field).y; //new y timeline.append( TweenMax.to(table, 1, {x:(x-XX)+stageW*.5, y:(y-YY)+stageH*.5}) ); player.field++; } This relies on using v11 which you can get at http://blog.greensock.com/v11beta/

Hi, I just started using TweenMax today. I have a question about tweening multiple objects, not sure if I'm going about this the best way. Objects A, B, C are on the stage in order and scaled accordingly (100%, 60% and 40%) eg. 1st place =A at 100%, 2nd place= B at 60%, 3rd place =C at 40% When you click B. The order need to change in a tween to this --> B, C, A. When you click C. The order need to change in a tween to this --> C, A, B. You can click A, B, or C at any time and change the order/focus. Here's my code: 3 if statements that check to see where the object is positioned (in 1st plae, 2nd or 3rd.) // ActionScript Document if(productC._x > 250){ trace ("hello"); //TweenMax.to(productA, 1, {_x:140, _y:75, _xscale:60, _yscale:60}); //to 2 TweenMax.to(productB, 1, {_x:-13, _y:40, _xscale:100, _yscale:100}); //to 1 TweenMax.to(productA, 1, { _alpha:0}); //to invisible TweenMax.to(productA, 1, {_x:268, _y:90, _xscale:40, _yscale:40, _alpha:100}); //to 3 TweenMax.to(productB, 1, { _alpha:0}); //to invisible\ TweenMax.to(productC, 1, {_x:-13, _y:40, _xscale:100, _yscale:100}); //to 1 //TweenMax.to(productB, 1, {_x:-116, _y:154, _xscale:40, _yscale:40, _alpha:0 ,delay:2, overwrite:1}); //to down and out } //TweenMax.to(productB, 1, { _alpha:0}); //to invisible //TweenMax.to(productC, 1, {_x:-13, _y:40, _xscale:100, _yscale:100}); //to 1 if(productC._x = 140){ trace ("yo_140"); TweenMax.to(productC, 1, {_x:-13, _y:40, _xscale:100, _yscale:100}); //to 1 TweenMax.to(productB, 1, { _alpha:0}); //to invisible productB._x = 350; productB._y = 90; productB._xscale = 40; productB._yscale = 40; productB._alpha=100; TweenMax.to(productA, 1, {_x:140, _y:75, _xscale:60, _yscale:60, _alpha:100}); //to 2 TweenMax.to(productB, 1, {_x:268, _y:90, _xscale:40, _yscale:40, _alpha:100, timeScale : 0.5 }); //to 3 } if(productC._x < 0){ trace ("yo_0"); TweenMax.to(productC, 1, { _alpha:0}); //to invisible TweenMax.to(productA, 1, {_x:-13, _y:40, _xscale:100, _yscale:100}); //to 1 TweenMax.to(productB, 1, {_x:140, _y:75, _xscale:40, _yscale:40, _alpha:100}); //to 2 TweenMax.to(productC, 1, {_x:268, _y:90, _xscale:40, _yscale:40, _alpha:100}); //to 3 } Any help/direction would be greatly appreciated.

Hi j_rock Check this .fla If you don't understand something, just ask. // When you use getNextHighestDepth(), you have to refer it to an object where the next highest depth will be evaluate // like this.getNextHighestDepth() or home.getNextHighestDepth() // getNextHighestDepth() alone will not work i think // When you do // var transformManager_obj = new TransformManager({forceSelectionToFront:false, allowDelete:true}); // var transformManager_obj = new TransformManager({targetObjects:[t], bounds:{xMin:0, xMax:900, yMin:0, yMax:900}, forceSelectionToFront:true, eventHandler:onAnyEvent}); // the next var applied to "transformManager_obj" will overwrite all previous property you set in the first instantiation // Declar your vars at one in a function like // var transformManager_obj = new TransformManager({forceSelectionToFront:false, allowDelete:true}); // transformManager_obj = new TransformManager({targetObjects:[t], bounds:{xMin:0, xMax:900, yMin:0, yMax:900}, forceSelectionToFront:true, eventHandler:onAnyEvent}); Hope it help you

I just tried your test and it worked perfectly for me. Could you post an FLA that demonstrates the problem? There's really no code inside TweenLite that I can think of that could possibly cause behavior like that. It would just tween the _alpha value from 0 to 100. Do you maybe have some other conflicting tween where you set overwrite:false that's also trying to tween the _alpha of the same TextField at the same time? That could explain the behavior.

sorry i feel i may have put this in the wrong section. basically you can use tweenLite to: TweenLite.to(mc, 1, {alpha:0}); followed by TweenLite.to(mc, 1, {alpha:1, overwrite:false}); in order to fade in and then out of alpha, i was just wondering whether there was a set "autoAlpha" which faded to a set amount i.e. 0, 0.2, etc and then back to 1 automatically. sorry for the confusion Dan

The "Multiple targets" explanation was excactly what I was looking for Had a love affair with fuse, but TweenMax has marriage potential. This code works for me: 1 . Scaling sprite PImage01 up and at the same time calling function Alpha to alpha down an array of sprites to 0.5. 2 . Scaling sprite PImage01 down and at the same time calling the same function Alpha to alpha an array of sprites back up to 1. function Alpha(Avalue:Number,Aid:String) { var A:Array; if (Aid == "A1") A = new Array(PImage02,PImage03,PImage04,PImage05,PImage06,PImage07,PImage08); TweenMax.allTo(A, Number(1.0), { alpha:Number(Avalue), ease:Quadratic.easeIn, overwrite:false }); } var D:Number = 0; TweenMax.to(PImage01, 1.0, { delay: D, scaleX:1.2, scaleY:1.2, ease:Quadratic.easeInOut, overwrite:false, onStart:Alpha, onStartParams:[0.5,"A1"] }); TweenMax.to(PImage01, 1.0, { delay: D+=4, scaleX:1.0, scaleY:1.0, ease:Quadratic.easeInOut, overwrite:false, onStart:Alpha, onStartParams:[1,"A1"] }); thank U TweenMax. Hippiesvin

Moses Gunesch has created a very fast, lightweight core AS3 animation framework that he's proposing as a standard of sorts. You can learn more about it at http://www.goasap.org. He's done a great job of making it fast, but due to several factors I won't go in to right now, TweenMax would be slower if it was built on the GoASAP framework. It definitely wouldn't be a good fit for TweenLite because it would more than double the file size. In fact, here are some benchmarks I ran: GoASAP-based size: 6600 bytes TweenLite size: 3096 bytes GoASAP-based speed (without overlap checking): 45.5fps GoASAP-based speed (with overlap checking): 3.9fps TweenLite speed (with overlap checking): 51.7fps As you can see, the speed was somewhat close when I turned off the overlap monitor but since by default, TweenLite overwrites competing tweens of the same Object, it seems necessary to turn that on. It’s not an apples-to-apples comparison with the overwriting, though, because TweenLite takes an "all or nothing" approach (overwriting all pre-existing tweens of the same Object OR not overwriting any if you set overwrite:false) whereas I believe the GoASAP framework checks each individual property for overlaps. Also, Moses has been kind enough to take on the job of optimizing the code for use with his engine (and tweaking his engine to make it work better with TweenMax), so the speed gap will likely get even smaller, especially the overlap checking - my version may have implemented it incorrectly or something because those numbers seem way out of whack. In the end, the GoASAP version may only be 1 or 2 fps slower when pushing around 1500 instances which is pretty darn good. Since TweenMax isn't so concerned about file size, it would be the only engine of mine that I'd consider building on GoASAP. So if the GoASAP-based version is slower and fatter, why would I even consider it? Well, as Moses explains, it can be very convenient to have a single core engine that's driving everything in your SWF. For example, if you had a physics engine and a 3D engine and a tweening engine running on a common framework and you wanted to pause everything, you could do it in one place instead of 3. Plus it could be convenient to have all the systems synchronized so that when an UPDATE event is dispatched, you know that the physics, 3D, and tweening values have all been updated. I'd like to serve you well, so please let me know what you think - should I rework TweenMax so that it's built on top of the GoASAP framework? Are the speed and file size trade offs worth the increased flexibility and convenience?

GSAP 3 Cheat Sheet @import url('https://fonts.googleapis.com/css?family=Signika+Negative:300,400&display=swap'); ::selection { background-color: #88ce04; color: white; } body { background: #111; color: white; font-family: "Signika Negative", sans-serif; font-size: 19px; line-height: 1.4; font-weight: 300; margin: 0; text-align: center; } body > * { text-align: left; } a { font-weight: 400; color: #88ce02; text-decoration: none; } a:hover, a:hover .ipsPager_type { color: #a7ff00; text-decoration: underline; } .pdf-icon { width: 32px; vertical-align: bottom; display: inline-block; margin-bottom: 12px; } .ipsCode { background: #fafafa; padding: 15px !important; border: 0 !important; border-left: 4px solid #5e9815 !important; clear: both; direction: ltr; word-wrap: normal; } .prettyprint { font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; font-weight: normal; border: none; line-height: 18px; margin: 0 0 15px; background: #262626; border-radius: 6px; color: #ccc; padding: 12px 18px; } .prettyprint .str { color: #EC7600 } .prettyprint .kwd { color: #93C763 } .prettyprint .com { color: #999999 } .prettyprint .typ { color: #72a5d8 } .prettyprint .lit { color: #FACD22 } .prettyprint .pun { color: #F1F2F3 } .prettyprint .pln { color: #F1F2F3 } .prettyprint .tag { color: #8AC763 } .prettyprint .atn { color: #E0E2E4 } .prettyprint .atv { color: #EC7600 } .prettyprint .dec { color: purple } .prettyprint ol, .prettyprint ul { margin: 0px; padding: 0px; margin-left: 40px } .prettyprint ol li, .prettyprint ul li { margin: 0px; padding: 0px } .prettyprint ol.linenums { margin-top: 0; margin-bottom: 0 } .prettyprint li.L0, .prettyprint li.L1, .prettyprint li.L2, .prettyprint li.L3, .prettyprint li.L4, .prettyprint li.L5, .prettyprint li.L6, .prettyprint li.L7, .prettyprint li.L8, .prettyprint li.L9 { color: #777; list-style-type: decimal; padding-left: 20px; padding-right: 20px; margin-left: -40px } .prettyprint li.L1, .prettyprint li.L3, .prettyprint li.L5, .prettyprint li.L7, .prettyprint li.L9 { background: #2a2a2a } .prettyprint.wrap { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word } .prettyprint.linenums { padding: 12px 0px; margin: 0 0 0 25px } .post_wrap .prettyprint { margin: 10px 0; } .prettyprint .pln { font-size: 15px; } .flexRow { display: flex; } .flexRow > * { flex-grow: 1; } .flexRow > *:not(:last-child) { margin-right: 15px; } .cheat-header.cDarkContent { display: inline-block; padding-left: 144px; min-height: 146px; position: relative; } .cheat-header h1 { font-size: 3rem; margin: 0; font-weight: 400; } .cheat-header .logo { position: absolute; top: 10px; left: 20px; width: 112px; } .cheat-header ul { margin: 0; display: inline-block; vertical-align: top; padding-left: 0; margin-right: 20px; } .cheat-header li { list-style: none; } .cheat-header ul:first-child { padding-left: 0; } .cheat-header .pipe { color: #777; } .cheat-header .cheat-container { display: block; } pre.prettyprint { margin-bottom: 10px; } .cheat-container { padding: 10px; display: flex; } .cheat-container > * { flex-grow: 1; } .cheat-container > *:not(:last-child) { margin-right: 10px; } .cheat-container h2 { text-align: left; color: white; font-weight: 300; font-size: 2em; margin-top: 0; margin-bottom: 4px; } .cheat-content a:hover { color: white; } .cheat-content .ipsCode a:hover { color: #88ce02; } footer p { margin: 0 auto 2em; text-align: center; } footer img { vertical-align: middle; width: 100px; margin-left: 15px; } @media (max-width: 1659px), print { .cheat-content { display: flex; max-width: 100vw; flex-wrap: wrap; } .cheat-content > * { flex-grow: 1; } .cheat-container { display: contents; } .cheat-container:not(:first-child) h2 { margin-top: 3rem; } .cheat-container > * { padding: 10px; } .cheat-header > .cheat-container > * { padding: 0; } .cheat-container > *:not(:last-child) { margin-right: 0; } } @media (max-width: 648px) { .cheat-header .logo { position: static; display: block; margin: 0 auto; } .cheat-header.cDarkContent { padding-left: 10px; } .column { max-width: calc(100% - 20px); } .cheat-container pre { overflow: auto; } } GSAP 3 Cheat Sheet .cls-1,.cls-3{fill:#111;}.cls-1{stroke:#999;stroke-linecap:round;stroke-linejoin:round;stroke-width:6px;}.cls-2{fill:#88ce02;} Most code is linked to the appropriate page in the Docs Links: Get started | Install | Forums | Tips | Learning | CodePen | Club Basics // "to" tween (animate to provided values) gsap.to(".selector", { // selector text, Array, or object x: 100, // any properties (not limited to CSS) backgroundColor: "red", // camelCase duration: 1, // seconds delay: 0.5, ease: "power2.inOut", stagger: 0.1, // stagger start times paused: true, // default is false overwrite: "auto", // default is false repeat: 2, // number of repeats (-1 for infinite) repeatDelay: 1, // seconds between repeats repeatRefresh: true, // invalidates on each repeat yoyo: true, // if true > A-B-B-A, if false > A-B-A-B yoyoEase: true, // or ease like "power2" immediateRender: false, onComplete: myFunc, // other callbacks: // onStart, onUpdate, onRepeat, onReverseComplete // Each callback has a params property as well // i.e. onUpdateParams (Array) }); // "from" tween (animate from provided values) gsap.from(".selector", {fromVars}); // "fromTo" tween (define both start and end values) gsap.fromTo(".selector", {fromVars}, {toVars}); // special properties (duration, ease, etc.) go in toVars // set values immediately (no animation) gsap.set(".selector", {toVars}); Timelines // Create a timeline let tl = gsap.timeline({ delay: 0.5, paused: true, // default is false repeat: 2, // number of repeats (-1 for infinite) repeatDelay: 1, // seconds between repeats repeatRefresh: true, // invalidates on each repeat yoyo: true, // if true > A-B-B-A, if false > A-B-A-B defaults: { // children inherit these defaults duration: 1, ease: "none" }, smoothChildTiming: true, autoRemoveChildren: true, onComplete: myFunc, // other callbacks: // onStart, onUpdate, onRepeat, onReverseComplete // Each callback has a params property as well // i.e. onUpdateParams (Array) }); // Sequence multiple tweens tl.to(".selector", {duration: 1, x: 50, y: 0}) .to("#id", {autoAlpha: 0}) .to(elem, {duration: 1, backgroundColor: "red"}) .to([elem, elem2], {duration: 3, x: 100}); // position parameter (controls placement) tl.to(target, {toVars}, positionParameter); 0.7 // exactly 0.7 seconds into the timeline (absolute) "-=0.7" // overlap with previous by 0.7 sec "myLabel" // insert at "myLabel" position "myLabel+=0.2" // 0.2 seconds after "myLabel" "<" // align with start of most recently-added child "<0.2" // 0.2 seconds after ^^ "-=50%" // overlap half of inserting animation's duration "<25%" // 25% into the previous animation (from its start) Control methods // retain animation reference to control later let anim = gsap.to(...); // or gsap.timeline(...); // most methods can be used as getters or setters anim.play() // plays forward .pause() .resume() // respects direction .reverse() .restart() .timeScale(2) // 2 = double speed, 0.5 = half speed .seek(1.5) // jump to a time (in seconds) or label .progress(0.5) // jump to halfway .totalProgress(0.8) // includes repeats // when used as setter, returns animation (chaining) // other useful methods (tween and timeline) .kill() // immediately destroy .isActive() // true if currently animating .then() // Promise .invalidate() // clear recorded start/end values .eventCallback() // get/set an event callback // timeline-specific methods // add label, tween, timeline, or callback .add(thing, position) // calls function at given point .call(func, params, position) // get an Array of the timeline's children .getChildren() // empties the timeline .clear() // animate playhead to a position linearly .tweenTo(timeOrLabel, {vars}) // ^^ with both start and end positions .tweenFromTo(from, to, {vars}) Eases // see greensock.com/ease-visualizer ease: "none" // no ease (same as "linear") // basic core eases "power1", "power2", "power3", "power4", "circ", "expo", "sine" // each has .in, .out, and .inOut extensions // i.e. "power1.inOut" // expressive core eases "elastic", "back", "bounce", "steps(n)" // in EasePack plugin (not core) "rough", "slow", "expoScale(1, 2)" // members-only expressive plugins CustomEase, CustomWiggle, CustomBounce ScrollTrigger scrollTrigger: { trigger: ".selector", // selector or element start: "top center", // [trigger] [scroller] positions end: "20px 80%", // [trigger] [scroller] positions // or relative amount: "+=500" scrub: true, // or time (in seconds) to catch up pin: true, // or selector or element to pin markers: true, // only during development! toggleActions: "play pause resume reset", // other actions: complete reverse none toggleClass: "active", fastScrollEnd: true, // or velocity number containerAnimation: tween, // linear animation id: "my-id", anticipatePin: 1, // may help avoid jump snap: { snapTo: 1 / 10, // progress increment // or "labels" or function or Array duration: 0.5, directional: true, ease: "power3", onComplete: callback, // other callbacks: onStart, onInterrupt }, pinReparent: true, // moves to documentElement during pin pinSpacing: false, pinType: "transform" // or "fixed" pinnedContainer: ".selector", preventOverlaps: true, // or arbitrary string once: true, endTrigger: ".selector", // selector or element horizontal: true, // switches mode invalidateOnRefresh: true, // clears start values on refresh refreshPriority: 1, // influence refresh order onEnter: callback // other callbacks: // onLeave, onEnterBack, onLeaveBack, onUpdate, // onToggle, onRefresh, onRefreshInit, onScrubComplete } Other Plugins // Register GSAP plugins (once) before using them gsap.registerPlugin(Draggable, TextPlugin); // Available plugins Draggable, DrawSVGPlugin*, EaselPlugin, Flip, GSDevTools*, InertiaPlugin*, MorphSVGPlugin*, MotionPathPlugin, MotionPathHelper*, Physics2DPlugin*, PhysicsPropsPlugin*, PixiPlugin, ScrambleTextPlugin*, ScrollToPlugin, ScrollTrigger, SplitText*, TextPlugin // * available to Club GreenSock members. greensock.com/club Installation // Import and register GSAP (ES Modules) import { gsap } from "gsap"; import { DrawSVGPlugin } from "gsap/DrawSVGPlugin"; gsap.registerPlugin(DrawSVGPlugin); // Import and register GSAP (UMD/CommonJS) import { gsap } from "gsap/dist/gsap"; import { DrawSVGPlugin } from "gsap/dist/DrawSVGPlugin"; gsap.registerPlugin(DrawSVGPlugin); Utility methods // accessible through gsap.utils.foo() checkPrefix() // get relevant browser prefix for property clamp() // clamp value to range distribute() // distribute value among and array getUnit() // get unit of string interpolate() // interpolate between values mapRange() // map one range to another normalize() // map a range to the 0-1 range pipe() // sequence function calls random() // generates a random value selector() // get a scoped selector function shuffle() // shuffles an array in-place snap() // snap a value to either increment or array splitColor() // splits color into RGB array toArray() // convert array-like thing to array unitize() // adds specified unit to function results wrap() // place number in range, wrapping to start wrapYoyo() // place number in range, wrapping in reverse Nesting Timelines function scene1() { let tl = gsap.timeline(); tl.to(...).to(...); // build scene 1 return tl; } function scene2() { let tl = gsap.timeline(); tl.to(...).to(...); // build scene 2 return tl; } let master = gsap.timeline() .add(scene1()) .add(scene2(), "-=0.5") // overlap slightly Miscellaneous // Get the current value of a property gsap.getProperty("#id", "x"); // 20 gsap.getProperty("#id", "x", "px"); // "20px" // Set GSAP's global tween defaults gsap.defaults({ease: "power2.in", duration: 1}); // Configure GSAP's non-tween-related settings gsap.config({ autoSleep: 60, force3D: false, nullTargetWarn: false, trialWarn: false, units: {left: "%", top: "%", rotation: "rad"} }); // Register an effect for reuse gsap.registerEffect({ name: "fade", effect: (targets, config) => { return gsap.to(targets, { duration: config.duration, opacity: 0 }); }, defaults: {duration: 2}, extendTimeline: true }); // Now we can use it like this gsap.effects.fade(".box"); // Or directly on timelines tl.fade(".box", {duration: 3}) // Add listener gsap.ticker.add(myFunction); function myFunction(time, deltaTime, frame) { // Executes on every tick after // the core engine updates } // To remove the listener later... gsap.ticker.remove(myFunction); // faster way to repeatedly set property than .set() const setX = gsap.quickSetter("#id", "x", "px"); document.addEventListener("pointermove", e => setX(e.clientX) ); For an all access pass to premium content - JOIN CLUB GREENSOCK