cerulean

@Carl and @PointC: thanks. The reason I was using TweenMax at this point was because I wanted to get access to the first tween returned. In an earlier Q/A you gave me the solution to a question I posed, which was how to control the first tween of a staggerTo separately from the others. The answer was const tweens = TweenMax.staggerTo(tmparr, tweenTime, { repeat: 1, className: "letterBig", yoyo: true, ease: Power1.easeInOut, }, staggerTime, callback, [], callbackContext); tweens.pop().repeat(0); That is, I manipulate the first tween, through access to the array of tweens returned from TweenMax.staggerTo. I tried to do this in Timeline but it returns itself (for chaining). How to I get access to the array of tweens in Timeline to do the same? I didn't see it here https://greensock.com/docs/TimelineLite. Also, I can't pop any internal arrays within Timeline without messing things up, right? -- I'm assuming the array returned from staggerTo is a copy of the internal one that TweenMax uses internally. Thanks! EDIT: I solved it, using childrenOf().... const timeline = new TimelineMax({paused:true}); timeline.staggerTo(tmparr, tweenTime, { repeat: 1, className: "letterBig", yoyo: true, ease: Power1.easeInOut, }, staggerTime,0, callback, [], callbackContext); const tweens = timeline.getChildren(); timeline.play(); tweens[tweens.length-1].repeat(0);

Ah, of course, thanks! One question: in the CodePen above it's possible to tween the Tween returned by new TweenMax. But staggerTo is a static method and returns an array of Tweens. I'm sure my brain is fuzzy, but how do I make the jump from one to the other, that is tween a Tween of tweens? (I'm thinking this would be a job for TimelineLite/Max, that is, I'd add the tweens to a Timeline and tween that, but I'm keen to see if I can tween it with TweenMax). Thanks

I'm sure this is an easy question but I couldn't find the answer in the docs https://greensock.com/docs/TimelineMax/staggerTo() -- I would like to both be able to adjust the ease for the individual animations, but also to adjust the rate at which the entire collection of animations plays. I think the ease detailed in the docs is for each individual animation. I suspect that since a group ease isn't detailed in the docs, the answer is you can't do it, but perhaps there is a way with call? Again, to be clear, I'm looking to put an ease on the group of animations that the staggerTo() returns. Thanks for any clues!

@PointC -- thanks very much! -- it's the second option I was looking for: " that highlighted element reverse would blend in with the next stagger".

Thanks @PointC -- I've made a new CodePen, vastly simplified. https://codepen.io/Cerulean3/pen/pKVYyq As you can see there is a circle with the letters of the alphabet. In this example I'd like to start with "B" (I'm avoid the special case of "A" as first in the alphabet for purposes of the demo), do an animation of the full circle and then leave B in the highlighted state. Thanks to @Carl that works fine with TweenMax.staggerTo. On the next round I'd like to start with the next letter in the alphabet -- C in this case -- and do the same thing. However I want the letter that remained highlighted from the previous round -- B in this case -- to go back to its normal state. Obviously I can just tween it back before starting the next TweenMax.staggerTo, but I want it to flow seamlessly with the main animation and I'm not sure how to do that. One thought is to use TimelineMax and insert first a TweenMax of the highlighted letter and then the staggerTo of the rest, calculating when to start the staggerTo so that it seems seamless. But I was wondering if there were an easier way. My thought was to access the first tween in the array returned by staggerTo and then to tweak it -- using, perhaps seek or progress so that it only started in the yoyo part of the tween. That doesn't seem to work Thanks for any clues....

By the way, the relevant code is in Animation.animate() -- there's a lot of JS to wade through. But it's the only GSAP code in there at the moment, so you can just search for staggerTo and you'll find it rapidly. I only loop through twice at the moment, in an inelegant way. Just trying to understand it.

OK, thanks. I've added a CodePen, if that helps you see things more clearly. To get the animation started, type something in the input field and hit return. It feels so close -- I tried .reverse(), I tried reverse() and setting yoyo to false, I tried progress(0.5) -- nope.... If anything occurs to you, please let me know. Otherwise I can use a timeline as you suggest... CodePen is here: https://codepen.io/Cerulean3/pen/OEZVjm -- https://codepen.io/Cerulean3/pen/OEZVjm

To expand on the original question, the following does exactly what I want it to do -- it staggerTo's around my circle of DIVs once and then leaves the second element tweened. const tweens = TweenMax.staggerTo(myArrayOfDivs, .5, { repeat: 1, backgroundColor: "rbga(100,255,255,0.9)", scale: 1.2, yoyo: true }, .05); tweens.pop().repeat(0); If I wish to continue the process and now start a staggerTo on the currently highlighted element (the second in the array), have it tween back to its original value and then continue with the yoyo tweens (as per above) to now end up on the _third_ element at keep that tweened, how do I do that? I can take care of the array mechanics -- that is, set up an array with the currently tweened element as the first element, followed by all the other divs and then repeating the first element and ending with the last element), but now what I'd like is to have the _first_ tween only go _backwards_ (i.e. the yoyo portion) and the last tween (as above) only go _forwards. To get the last tween correct I simply pop it off staggerTo and do what you suggested above. To get the first tween correct do I shift() the first tween off and then do something to it? Thus, I'm curious what to do in the last line below...is it reverse()? const tweens = TweenMax.staggerTo(myNewArrayofDivsSetupForSecondRound, .5, { repeat: 1, backgroundColor: "rbga(100,255,255,0.9)", scale: 1.2, yoyo: true }, .05); tweens.pop().repeat(0); tweens.shift().something(); // what do I do here to make the tween only go in reverse? I thought the answer might be a final tweens.shift().reverse() but that didn't work. Any clues appreciated.

Basically what the title says....I'm not attaching a CodePen as it's more or less an API question I think... I've got a collection of `divs`in a circle shape. I collect these in an array and then TweenMax.staggerTo on all of them with yoyo:1 and repeat:1 so that they quickly tween back to how they were when they started. But I'd like the last one to remain in the tweened state, that is "yoyo" all of the elements except the last. What's the simplest way to do this? (If there is a way). TweenMax.staggerTo(myArrayOfDivs, .5, { repeat: 1, backgroundColor: "rbga(100,255,255,0.9)", scale: 1.2, yoyo: true, }, .05).length; } // how to keep myArrayOfDivs[length-1] tweened? I thought of doing a staggerTo on all but the last element of the array (i.e., create a new array with all but the last element), setting a onCompleteAll on the staggerTo and then tweening the last element separately, but that didn't work, as I don't want it to start when all of the rest have tweened and yoyo'd, but for all to flow seamlessly as if it were one tween. Any suggestions welcome!

I am working with the HTML5 banner example from Greensock and started trying to do my own banner, commenting out most of the GS code, and have a very newbie (i.e., ahem, probably stupid) question: why will a simple animation from left to right (of a div or an image) work when I use 'x' and not 'left'? I understand that 'x/y' uses transforms, and 'left/top' uses CSS, so I thought it might have something to do with the CSSPlugin not loading — so I tried it with TweenMax directly (which should include the plugin, right?) TweenMax.to($monkey, 0.2, {left:400, rotation:30}); The rotation works, the lateral movement, no. This does, however TweenMax.to($monkey, 0.2, {x:400, rotation:30}); What's my obvious error? Is there an init call to CSSPlugin I'm lacking? I compared the GS example and mine, but am missing it. BTW, if I use TimeLineLite (or Max), is the CSSPlugin init'ed automatically?

Thanks. Why wouldn't one do the following though: .to($for, 0.2, {autoAlpha:0, left:300}, "+=0.7", "introOut") Wouldn't that both add the label and then add the next animation at that label? My confusion was there: the separate step for adding the label. Was there a reason for that?

I've been studying the GreenSock HTML5 banner example ( )%C2"> am somewhat confused by this syntax .to($for, 0.2, {autoAlpha:1}, "for") .add("introOut", "+=0.7") .to($for, 0.2, {autoAlpha:0, left:300}, "introOut") .to($animations, 0.2, {autoAlpha:0, top:"-=300px"}, "introOut") return tl; Specifically, what is the logic for .add("introOut", "+=0.7")? Obviously it's adding the animation that is immediately following (the two next lines) at a point .7 seconds beyond the end of the timeline — but why do this at all and not something like .to($for, 0.2, {autoAlpha:0, left:300}, "+=0.7", "introOut") .to($animations, 0.2, {autoAlpha:0, top:"-=300px"}, "introOut") Any insight appreciated. I was also curious, in this animation, what effect the line TweenLite.set($deviceHead, {transformPerspective:600}); has — I tried changing the value and got no change in the animation.

I was bidding on a project today and requested to use GSAP as my Javascript animation engine (they had originally said CSS transitions). The one question they had was 'how far back' GSAP goes — that is, will it work in IE9, IE8, and other older browsers? I had never thought of this and didn't know the answer. Also they wanted to know if GSAP 'degraded gracefully'. If GSAP doesn't work on all older browsers, how do I handle that? I know Modernizr can be used (or could be used) to provide fallbacks, but I don't know that it has a test for Greensock. What would I test for? Are there polyfills? Thanks for any info!

Thanks to all

Thanks — do you or Carl have any recommendations for Javascript MVC frameworks that play nicely with GSAP? As per above, the integration with Durandal seems cumbersome —