bfred.it

I needed this too so I made a small module to take care of it: gsap-then (0.2KB) Carl's example would be as simple as: var t = new TimelineLite({paused: true}); t.to($(".testing"), 1, {width: 200,height: 200}); t.then(function(res) { console.log('promise resolved') }); Additionally it takes care of existing onComplete callbacks and can be used multiple times on the same tween. Side note: This is vastly different from the package gsap-promise because it simply extends existing GSAP objects by adding a .then() method to the tweens in a few bytes, rather than loading a new library and wrapping GSAP.

Excellent, thanks! If com.greensock.core.Animation is always global I might as well just append to it directly: require('gsap'); require('gsap-then'); This has been published to npm, by the way: https://npmjs.com/gsap-then

I've been adding a couple utility methods to gsap for a while but I'm not entirely sure if I'm doing it right. Have a look at this: https://gist.github.com/bfred-it/56d0ab0b88691f4a70acdd096cc2d411 My main concern is that I have to extend the prototype of each class separately: TweenLite.prototype.then = fn; TimelineLite.prototype.then = fn; ... Is there a way to extend once class and have it inherited across the board?

Yeah, that could work, as long as it's not actually rendered twice (in the same frame) if called twice, which will happen in multi-module setups.

Hijacking this thread since I think we're asking something similar. Do you think it would be beneficial to have a way to disable "lazy" for an entire timeline? I often found that it causes issues with elements that were set to display:block (with .set) and then faded with autoAlpha (it flashes the element first and then the animation starts from opacity:0). Since I have various tweens, I'd have to add lazy:false to all or find the ones that benefit from it. It would just be easier if I could disable it once per timeline

Normally, adding a tween without a position parameter will add it after ALL the tweens. Is there an easy way to add a tween right after the last tween? This without manually using variables, manually sorting the .to calls and without creating sub-timelines (ideally) In the example, tl.addLabel("after-bluebox"); adds the label BEFORE the tween, if not present. I think that there could be a way to add it AFTER the tween, perhaps tl.addLabel("after-bluebox", "", true); where true means "after the last tween you added"

Great solution! Also I suggest using this tool to figure out the bezier values: http://matthewlein.com/ceaser/

Have a look here, clearProps simply won't work in IE9, but setting {x:0,y:0} will http://jsfiddle.net/Myvg8/1/

Thanks! The first one seems to require the 0.001 too, I ended up using it that way. I was hoping to find a method to reset the tween but this works too. I guess that treating tweens at 0 differently makes sense from a performance standpoint, but I found it counterintuitive when trying to reset them. It might just be that I've haven't read every word in the docs though

I need to fully reset an animation to restore its value before TL was even called. I'm not interested in the full state restore, just whatever was rendered by .from() .progress(0, true); works fine with .to() tweens but it will keep the starting values of .from() on the element. tl.fromTo("#redBox", 1, {x:550},{x:200}); //this will bring x to 200 on render tl.progress(0, true).pause(); //this won't bring the value of x to its initial 0 Codepen here: http://codepen.io/bfred-it/pen/zcjCh

As I specified in my post, if I use .call, TL won't keep track of src's previous value, so it won't restore it. By using suppressEvents:false, src would be reset to its first change, not to its original value. I guess I could store its original value and manually set it at time 0, so it would be remembered as the first change. Like this: var originalValue = img.src; tl.call(function () { img.src = originalValue; }); for (var i = 0; i < logos.length; i++) { tl.call(function (i) { img.src = logos[i]; }, [i], null, i); } Your second example is interesting, I didn't know that TL would call a function using { fn:arg }, it could come in handy. Anyway, I take it that .set can't be used to set non-numerical values at all (unless I code a plugin for it).

I was hoping to change the src attribute of an image simply using .set instead of a manual .call (which won't reset the attribute if I bring the playhead to 0) but it doesn't seem to work at all. Codepen here (open console and element inspector on the image) AttrPlugin doesn't seem to make any change. It works here, on an SVG file, but not with an image's attributes. Strangely enough, if I try to set the src as a property (by disabling autoCSS), GSAP sets it to "NaN" Am I doing something wrong?

Wow, excellent! Thank you for taking the time to code that! I really appreciate it

I liked the pattern of the code you used for the intro animation on greensocks.com, so I'm trying to use it. You have a main timeline and multiple nested timelines added at a certain offset. I did the same thing, except I'd like to add a timeline at a specific label, rather than a time offset. I'm using this code: var main = new TimelineLite(); main.add(timelineA()); main.add(timelineB(),'labelFromTimelineA'); function timelineA () { var tl = new TimelineLite(); tl.to('#redBox', 1, {x:100}); tl.addLabel('labelFromTimelineA'); tl.to('#redBox', 1, {x:0}); return tl; } function timelineB () { var tl = new TimelineLite(); tl.to('#blueBox', 1, {x:100}); tl.to('#blueBox', 1, {x:0}); return tl; } I noticed that the two nested timelines are effectively merged into the main one (main.getChildren() lists the children of all the timelines) but the labels are not, thus I can't add timelineB at labelFromTimelineA. Is there any simple way to do this? Here I set up a simple pen: http://codepen.io/bfred-it/pen/fGorg?editors=001

Awesome reasoning! I agree that jQuery's .delay() is often better translated to the delay property in each tween, but in some cases a simple .addDelay(time) can be useful. Example A: when the timeline is not built in a linear way, eg: tween an element when timeline is created tween more in a loop maybe add a delay in a complex function or if I'm debugging tween some other element in another function an onComplete in an automated way Example B: adding up a variable delay to an existing one (JS version here): tl.to(element, 1, {x:10}); tl.addDelay(delay); //easy tl.to(element, 1, {y:100}, '-=2'); tl.to(element, 1, {x:10}); tweenDelay = -2 + delay; tl.to(element, 1, {y:100}, (tweenDelay<0?'-=':'+=')+tweenDelay);//meh . I suppose .minimumDuration() is not as simple as it may seem and the scenarios where it's useful is rare: I only needed to delay the call of onComplete. I could just use .call(onCompleteFn, 5) but 5s might not end up at the end of the timeline, of course.