Jump to content
Search Community

Is it possible to ease the entire animation in a TweenMax.staggerTo?

cerulean test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

@PointC beat me to it - he's exactly right. But when I re-read your question, it wasn't entirely clear to me if you were wanting to ease the whole thing or if you simply wanted to change the timeScale() to speed things up or slow them down (overall). If the latter, it should be as simple as:

 

yourTimeline.timeScale(0.5); //play at half speed

 

As for your 2nd question, you're correct - TweenMax.staggerTo() returns an array of tweens, so if you want to control them all as a whole (to ease/tween them), you'd need to tuck them into a TimelineLite or TimelineMax. It'd be cleaner to just create the timeline and use its staggerTo() method directly, but you can also add() the array from the TweenMax.staggerTo() if you prefer (not sure why you would though) :)

 

Happy tweening!

  • Like 2
Link to comment
Share on other sites

 

 

@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);

 

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...