Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

cerulean last won the day on April 30 2013

cerulean had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


cerulean last won the day on April 30 2013

cerulean had the most liked content!

Community Reputation

3 Newbie

About cerulean

  • Rank
    Advanced Member

Profile Information

  • Gender
    Not Telling
  1. @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
  2. 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
  3. 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(
  4. @PointC -- thanks very much! -- it's the second option I was looking for: " that highlighted element reverse would blend in with the next stagger".
  5. 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
  6. 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.
  7. 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
  8. 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 e
  9. 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, backgrou
  10. 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 work
  11. 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?
  12. 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, le
  13. 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 t
  14. 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 —