Search the Community

Wow, that was weird - definitely looks like a bug in Flash. There was a play() call inside gotoAndPlay() that wouldn't resolve unless I added "this." to it, this.play() even though that should be implied! Anyway, I just posted a fix. Thanks for letting me know about the issue. As for adding a stop() action, you have several options: 1) Use TimelineMax's addCallback() to add a callback which calls stop() at a particular time on the timeline. 2) Manually add a zero-duration TweenLite with immediateRender:false and overwrite:false to the timeline with an onComplete - that's the same as using TimelineMax's addCallback() but less convenient. 3) Use TimelineMax's tweenTo() method if you want to just go from wherever the timeline is to a particular point and stop.

Ok here are my findings so it might help others. I have a button class which have it's own listeners applied to it so as soon as I add a button it is already set up. These events included a RollOver and a RollOut. The reason my little application was running slow is this (simplified code to make it simple): private function fadeIn(e:MouseEvent):void //RollOver listener { TweenLite.to(texte_mc.titre_mc, .2, {colorTransform:{tint:0xffffff}}); } private function fadeOut(e:MouseEvent):void //RollOut listener { TweenLite.to(texte_mc.titre_mc, .2, {colorTransform:{tintAmount:0}}); } It seems that when I was moving the mouse over the buttons very fast, the fact that the tweens were "going one over the other" (which I don't understand since I didn't init the overwrite manager) was completely bugging my app... To solve the problem I just did a timelineLite so even if the tween isn't complete it will just reverse from where it is. Like this: public var timeline:TimelineLite = new TimelineLite({paused:true}); timeline.append(TweenLite.to(texte_mc.titre_mc, .2, {colorTransform:{tint:0xffffff, tintAmount:1}})); private function fadeIn(e:MouseEvent):void //RollOver listener { timeline.play(); } private function fadeOut(e:MouseEvent):void //RollOut listener { timeline.reverse(); } Thanks again

Could you post an example of the broken version? I think there must be something else going on - the delay never carries over from one tween to another, and you're right - the overwrite:true will definitely kill all existing tweens of that object. However, you mentioned a timer that you set up that triggers a new pulse every so often - I wonder if that's causing the problems? TweenLite cannot know that your Timer is going to call a function that triggers new TweenLite instances (preemptively overwriting tweens that don't exist yet). Oh, and for the pulse effect, you might want to try using combining the new "repeat", "repeatDelay", and "yoyo" properties of TweenMax v11 because you could get a similar effect with one line of code that'd replace all your timer stuff and the two other tweens. Like: TweenMax.to(mc, 1, {scaleX:1.5, scaleY:1.5, repeat:-1, repeatDelay:0.5, yoyo:true}); http://blog.greensock.com/v11beta/

Of course. Why, are you running into trouble? If you turn on OverwriteManager in AUTO mode, you don't even have to add overwrite:false. OverwriteManager.init(2); TweenLite.to(square, 2, {z:1000, ease:Back.easeIn}); TweenLite.to(square, 2, {x:400, ease:Sine.easeOut});

I think I see the problem. It's not really a bug as much as a misunderstanding about how and when overwriting occurs. In ALL mode, overwriting occurs immediately when the tween is created. In all other modes (AUTO, CONCURRENT, ALL_AFTER), overwriting occurs as soon as the tween is initted (typically when it starts for the first time). In your example, the first time your timeline starts playing each of the tweens, it inits them and overwriting logic runs. Thereafter, however, it doesn't keep re-initting those tweens. It just renders them. So let's say your timeline plays. Its children are initted. Then you roll over one of those bars and it creates another (standalone) tween. While that tween is running, you start playing your timeline again. The tween that's nested in the timeline doesn't keep looking for competing tweens after it has already initted, so it lets that one run. See what I mean? You could invalidate() the timeline or tween to force it to re-init on the next render cycle. That would consequently force it to overwrite other competing tweens at that point (depending on your OverwriteManager mode). Keep in mind that invalidating a tween/timeline will get rid of all the starting values too which can actually be very handy. If, however, you want to retain the starting values, set the currentTime back to 0 before invalidating(). I know this sounds convoluted, but overwriting is actually one of the most complex aspects of a tweening engine. That's also why a lot of engines don't even have any overwriting management capabilities.

It looks like it... I downloaded the latest version ov v11, but the problem remains. I recreated the problem here: http://www.deeait.com/testing/GS/test.html . Source files are attached below. When you remove the MouseOver/Out functions, everything works nicely. But as soon as there are two tweens on the same mc they conflict, and the new tweens do not seem to overwrite the old ones.

Do you have the latest v11? Please make sure you do, because there was a bug for a few days that was recently squashed. http://blog.greensock.com/v11beta/. And are you saying that the new tween does NOT overwrite the old one when it should?

Check different "overwrite" options and test with that option added to your call.

You can either use the "delay" special property to sequence the tweens, or use an onComplete to call a function that does that. Just tween it off the stage and then use removeMovieClip(). TweenLite.to(ruta2_mc, 1, {_x:300, _y:450,_xscale:100, _yscale:100 }); TweenLite.to(ruta2_mc, 1, {_x:800, delay:1, overwrite:false, onComplete:myFunction}); function myFunction():Void { ruta2_mc.removeMovieClip(); } If ruta2_mc is at a level lower than 0, you'll probably have to swapDepths() to a higher level before you removeMovieClip().

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).

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, 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

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

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