giancarlo.dimassa.net A web programmer's blog

Elastic and bouncing transitions in scriptaculous

Scriptaculous has a lot of transitions, but in some situations, you want to sprinkle up a dull animation, applying a different, custom transition type.
Back in 2003, Robert Penner wrote the easing equations, a set of math formulas in Flash Actionscript released under the BSD license, that simulate various types of physical effects, the most notable are the overshooting elastic and bouncing ones. For an example, look at the demo here.
Three years later, Ken Snyder adapted the equations for scriptaculous, enabling builtin and custom animations to use these new nice effects as transitions. However the Penner easing equations were highly configurable, where instead in the Snyder ones you can only set the duration, because the other parameters are fixed in the source code. Also, not all (indeed, only a few) of the transitions have been ported, and their names have been changed too.

To use these new transitions, the easiest way is to open the effects.js file inside the src folder of your scriptaculous library, and add these lines at the end:

/*
transitions.js

Based on Easing Equations v2.0
(c) 2003 Robert Penner, all rights reserved.
This work is subject to the terms in http://www.robertpenner.com/easing_terms_of_use.html

Adapted for Scriptaculous by Ken Snyder (kendsnyder ~at~ gmail ~dot~ com) June 2006
*/

/*
Overshooting Transitions
*/
// Elastic (adapted from "EaseOutElastic")
Effect.Transitions.Elastic = function(pos) {
return -1*Math.pow(4,-8*pos) * Math.sin((pos*6-1)*(2*Math.PI)/2) + 1;
};
// SwingFromTo (adapted from "BackEaseInOut")
Effect.Transitions.SwingFromTo = function(pos) {
var s = 1.70158;
if ((pos/=0.5) < 1) return 0.5*(pos*pos*(((s*=(1.525))+1)*pos - s));
return 0.5*((pos-=2)*pos*(((s*=(1.525))+1)*pos + s) + 2);
};
// SwingFrom (adapted from "BackEaseIn")
Effect.Transitions.SwingFrom = function(pos) {
var s = 1.70158;
return pos*pos*((s+1)*pos - s);
};
// SwingTo (adapted from "BackEaseOut")
Effect.Transitions.SwingTo = function(pos) {
var s = 1.70158;
return (pos-=1)*pos*((s+1)*pos + s) + 1;
};

/*
Bouncing Transitions
*/
// Bounce (adapted from "EaseOutBounce")
Effect.Transitions.Bounce = function(pos) {
if (pos < (1/2.75)) {
return (7.5625*pos*pos);
} else if (pos < (2/2.75)) {
return (7.5625*(pos-=(1.5/2.75))*pos + .75);
} else if (pos < (2.5/2.75)) {
return (7.5625*(pos-=(2.25/2.75))*pos + .9375);
} else {
return (7.5625*(pos-=(2.625/2.75))*pos + .984375);
}
};
// BouncePast (new creation based on "EaseOutBounce")
Effect.Transitions.BouncePast = function(pos) {
if (pos < (1/2.75)) {
return (7.5625*pos*pos);
} else if (pos < (2/2.75)) {
return 2 - (7.5625*(pos-=(1.5/2.75))*pos + .75);
} else if (pos < (2.5/2.75)) {
return 2 - (7.5625*(pos-=(2.25/2.75))*pos + .9375);
} else {
return 2 - (7.5625*(pos-=(2.625/2.75))*pos + .984375);
}
};

/*
Gradual Transitions
*/
// EaseFromTo (adapted from "Quart.EaseInOut")
Effect.Transitions.EaseFromTo = function(pos) {
if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,4);
return -0.5 * ((pos-=2)*Math.pow(pos,3) - 2);
};
// EaseFrom (adapted from "Quart.EaseIn")
Effect.Transitions.EaseFrom = function(pos) {
return Math.pow(pos,4);
};
// EaseTo (adapted from "Quart.EaseOut")
Effect.Transitions.EaseTo = function(pos) {
return Math.pow(pos,0.25);
};

That's all you need to do to add the transitions. To use them, simply add the transition to the effect, for example

transition:Effect.Transitions.Bounce

like here

new Effect.BlindDown(el,{duration:2, transition:Effect.Transitions.Bounce});

note that as some time is spent accelerating and decelerating the element, the animation will seem to "endure" less, it will seem to be faster, so it's better to at least double the duration time. Also I suggest tweaking the transitions parameters for further personalization.
As you can see skimming trough the code, the effects name (case sensitive) are: Elastic, SwingFromTo, SwingFrom, SwingTo, Bounce, BouncePast, EaseFromTo, EaseFrom and EaseTo.
Remember that if you upgrade your scriptaculous, you'll need to paste again this code at the end of the effects.js file. You could also consider adding it to your code, as it is not really as important where it is, as soon as the new transitions are loaded after the effects.js code. A third option can be creating a pennier.js file in the scriptaculous folder and change the script tag to add it, as an example

<script src="/lib/scriptaculous/src/scriptaculous.js?load=effects,pennier" type="text/javascript"></script>

but if you prefer to aggregate as much files as possible to reduce network delays during page loads, that's not you'll want to do.
Ah, if you use Flash and plan adding the tweening Pennier equations to your actionscripts, check out his book "Programming Macromedia Flash MX", part III:Dynamic Visuals, chapter 7:Motion, Tweening, and Easing. The book details are available on his website, where the chapter is freely downloadable here.
In a forthcoming article, I'll discuss about an animation library (the technical name is "tween sequencer") for Flash that incorporates the Robert Penner tweens, think of it as the scriptaculous for Flash: The FUSE Kit.