Brian Crescimanno

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!

Download easing.js for Script.aculo.us 0.8

Technorati Tags: animation, easing, javascript, motion, prototype scriptaculous, tweening

Taking a break from code samples and examples today, I want to talk a little bit about my philosophy about development.  Though it may surprise those of you reading this, I don't like writing code.  Sure there's that little bit of excitement that comes from a particularly ingenious snippet; but in general I don't like the process of writing code.  However, I contend that my greatest strength as an engineer is that I don't like to write code.

Lots of code is not brilliant code

I see them (and their code) every day; people who genuinely enjoy and revel in writing code.  These people can get completely engrossed in solving a problem; spend hours and hours working on the problem, and churn out 500+ lines of code that are truly a marvel to look at.  You stare in amazement as you look at this code; how thorougly complicated it seems.  The natural instinct of many developers is to look at that code and say "Congratulations to the brilliant person who solved this obviously incredibly complex problem."  It's just that there's a larger issue: a truly adept engineer will look at their code and say "Well why didn't you just do this?" and proceed to write 10 lines of code that do the same thing in a far simpler, more understandable, and easier to maintain fashion.  I'm sure just about everyone working in any type of software development environment has seen this.  The problem, I contend, is that it doesn't happen enough.

Don't write the code; solve the problem.

Technorati Tags: code, engineer, overengineering