TweenMax is fantastic, TweenGroup is great, TimelineMax is even better than TweenGroup. With all that said there is one very useful feature that I felt it was missing. The inspiration from this came from a brilliant animation system that my co-worker created a few years back.
When working with large multi-tiered animations I often find it tedious to use TweenMax, especially if you need to pull out or add animations in the beginning or middle of a set after the fact. Sure you can use TimelineMax to create a huge set of animations that start one after each other, which is great, but often times I have 2 or more animations in the middle of a sequence that need to fire at the same time. You can work with TweenMax, TweenGroup, or TimelineMax to get this to work, but it often requires managing a bunch of delays that become very tedious. There are other methods but they require writing too much code for something I think should be simple.
After several attempts at a solution I finally decided that I would extend the TimelineMax class. This is still in beta, but the tweenMax guys have said that they’ll be deprecating TweenGroup so I figured I’d build for the future. One advantage of extending the class is that you still get all the functional goodness of the original class with one new function.
Below is a code example:
var anim1 = new TweenSequence();
anim1.add(clip1,1,{y:300},”set1″);
anim1.add(clip2,1,{y:300},”set2″);
anim1.add(clip1,1,{y:0},”set3″);
anim1.add(clip2,1,{y:0},”set3″);
anim1.play();
Hopefully this is pretty straightforward, but this is how it works. You now can use your TweenSequence object just like a TimelineMax object, but with the new “add” function.
TweenSequence.add(object,duration,{TweenMax paramaters object},setName);
The additional setName should be the only thing looking unfamiliar to those of you used to TweenMax. What TweenSequence does is keep track of sets in the order that you define them. The name of the set is unimportant, only the order of the first defined animation assigned to that set. It then runs all animations of each set to begin at the same time, and then all animations of the next set will begin at the end of the first animation of the previous set.
Ok, that probably sounds a bit confusing, so lets just show an example.
anim1.add(clip1,3,{y:300},”set1″);
anim1.add(clip2,5,{y:300},”set1″);
anim1.add(clip1,5,{x:300},”set2″);
anim1.add(clip2,3,{x:300},”set2″);
anim1.add(clip1,3,{y:0},”set3″);
anim1.add(clip2,3,{y:0},”set1″);
In this example the first set of animations that will run will be set1. This even includes the very last animation added in the code as it’s still defined as belonging to set1. All of the set1 animations will begin at the same time. Next up is set2 which will begin 3 seconds after set1 starts. At this point you might ask why doesn’t set2 start 5 seconds later as the second animation in set1 will overlap into set2. The answer is simply personal preference. This is the way I like it to work, and it’s easily fixible by just defining your longest animation of a set first. By using this method you are able to avoid or allow overlap at your discretion. Finally set3 will run 5 seconds after set2 starts as the first set2 defined animation is 5 seconds long.
So that’s it, pretty simple, but a handy and concise way to create a complex multi-tiered animation. If it seems limited just remember it’s still a TimlineMax object that uses TweenMax tweens, so you can use the power of those to take this well beyond simple tiered animation.
This is a AS3 class, would be simple enough to make it a AS2 class but I really have no need for it right now.
It also could probably use some polish or be compacted, but again those aren’t things I’m concerned with. I’m going to try and submit this to Jack over at GreenSock and see if he’d think the concept was useful for a future release.
In the meantime enjoy.
Download the code here http://hilleman.net/TweenSequence.as
Before using this make sure you have the TweenMax v11 beta, otherwise it’s not going to work.
UPDATE: After sending this over to Greensock(Jack), it looks like he’s going to implement an improved method into a near future release of his TimelineMax system. It will be an improvement over my idea, fit into the existing syntax, and be more flexible, win for everyone.
UPDATE TO THE UPDATE: Jack over at greensocks let me know that newest version of the beta now has the functionality built in. This is the way it works.
var myAnim:TimelineMax = new TimelineMax()
myAnim.insert(TweenMax.to(blahblah),”set1″)
myAnim.insert(TweenMax.to(moreblah),”set2″)
etc..
The basic way it’s setup is if you insert a tween at a yet undefined set id then it will automatically create a new set at the current duration. This is great because it’s less code, intuitive, and flexible as it allows you to use tweenMax or TweenLight