A lot of people I know use Fuse to code their tweens, transitions, etc. It’s obviously a valuable product that has helped a lot of people, but I’ve always somewhat had the attitude that it was for people who didn’t know how to write motion code. Since I have a little experience in that area ;), I never really felt that a Fuse-like product was something I needed. I’d rather “roll my own tweens”.
But on a recent project, I started seeing why people would jump on an animation scripting package like that. The mockup I was given contained quite a few tweens, eases, transitions, fade-ins-and-outs, etc. I started writing them with simple eases, which I can do in my sleep. I soon realized that in order to match the styles, I’d need to use more advanced tweening equations. Robert Penner to the rescue. His easing equations did the trick wonderfully.
In order to make them a bit easier to use, I created my own Easer class, into which I could pass the chosen Penner equation function, and then start it, sending a starting value, ending value, and time. It uses setInterval, with a configurable interval rate, fires change and complete events. This is all AS2 by the way. This worked beautifully. I create the easer, passing in the function, set listeners, add handlers, start it. The handlers grab the current value of the easer, and apply it to whatever element is easing.
However, things started getting even more complex. There are sections of the site, where one thing builds in, then another one when that is done, then a pause, then another series of elements build in. I got it all going, but in some sections, it’s linked together as a long series of “when this easer is complete, start this one. When that is done, start the next one.” It’s perfectly valid code, but really needs to be abstracted more. As it is though, the project is just about done, and I’m not going to start restructuring the whole thing.
My understanding of some of the animation packages out there, like Fuse, is that a lot of this kind of thing is taken care of. You can have series of actions set up, or other actions run in parallel, delays, etc. So, I’m going to have to eat crow and say I wish I had started out using something like that. Then again, I still probably would have wanted to build my own, and still may expand my Easer class to do some stuff like that for future projects.
Anyway, just an acknowledgment of stuff that’s out there, that I may have somewhat scoffed at in the past. 🙂