Animation and motion are becoming more and more commonplace in modern web application design. It's no surprise then that many Javascript frameworks provide sets of tools that allow you to easily add this motion to your application. MooTools and jQuery both integrate a set of easing equations to improve upon the look of linear animation. Script.aculo.us, however, lags behind in that while it does provide some functions to help the animation appear more "natural," it lacks a truly elegant solution.
Quick Link: View a Demo
Back in 2003, Robert Penner wrote a book on animation using Flash and with that book released a set of "easing equations" that could create natural-looking motion in Flash. These equations attempt to model real-world motion behavior on the screen; and they do a remarkably good job of it! So well, in fact, that both MooTools and jQuery have adapted Robert's easing equations into their animation libraries. After searching in vain for a while to find an implementation of these equations using Script.aculo.us, I decided the best thing to do was create my own--not an overly easy task since Robert's equations were not directly compatible with the "Script.aculo.us way" of handling animation.
Today I'm releasing easing.js for Script.aculo.us 1.8. I consider this version to 0.8 of this plugin since it does not succeed in porting the entire range of equations from Robert's original set. The missing equations are:
- EaseInBounce
- EaseInOutBounce
- EaseInElastic
- EaseOutElastic
- EaseInOutElastic
The elastic functions should be fairly simple to port over; I simply haven't done them at this point. The bounce functions, however, were originally written by Robert in such a way that they don't have easily identified counterparts in the Script.aculo.us world. I will continue my efforts; but I do hope that in the true spirit of open source that others can contribute and improve upon my work. Ultimately, I hope to submit this to Thomas for inclusion in the Script.aculo.us distribution.
I have provided a quick demo of each effect which is also included in the download package for your convenience. Please feel free to provide any feedback in the comments. I hope you find this contribution useful in your projects!
