One thing I dig about the moo.fx javascript library, besides it’s inspiring small size of course, are the wicked cool transitions library it comes bundled with. What makes it a touch cooler than the Scriptaculous transitions are the Robert Penner-certified easing and elasticity equations. It sure would be nice to be able to have access to those transitions with Scriptaculous wouldn’t it? You can probably see where I’m going with this, thanks to the title of this post especially, but if you don’t, here’s a hint. I’m going to show you add to get this bouncy goodness into Scriptaculous so you too can make all kinds of bad UI decisions.

Lucky for us, Ken Snyder did the footwork on porting over the actual equations to be easily compatible with Scriptaculous. Too bad his site is harder to get into than the trendiest nightclub (yeah, I couldn’t think of the name of a club because to go out to clubs you have to be three things, single, kidless and a little unstable) on a Friday night. Good thing I sat there for at least 5 minutes one day, refreshing the hell out of that page until I got something. I’ll stick the actual code after this post so you can copy and paste it and do what ever you want with it.

Once you have the code, you can either plug it directly into the Scriptaculous effects.js file, under the “transitions” section, or in it’s own file. I opted to stick it in it’s own file so I wouldn’t have to keep replacing it every time I updated to a newer version of Scriptaculous. So following my lead, stick the actual code in a file called “transitions.js” and place it in your rails_project_root/public/javascripts folder.

Now you have to add the call to load it in your layout file of choice. A good place to start is in your application.html.erb (application.erb or application.rhtml or whatever, you get the gist). Add this to the section of the page..

 <%= javascript_include_tag 'transitions' %> 

Now, you have to be careful where you add this. You have to add it below the call to load Scriptaculous and Prototype because that’s just how Javascript works and I like making your life difficult. So, when all’s said and done, your should have these calls….

  <%= javascript_include_tag :defaults %>
  <%= javascript_include_tag 'transitions' %>

Now you’re free to use the many transitions where ever you darn well please. I’ve used it recently to make a login box in one of my side project apps do all kinds of unneccessary bouncing. To actual use one of these transitions with a Scriptaculous effect, like the Effect.MoveBy for example, you could call it out using the Rails link_to_function helper like so…

<%= link_to_function "Login", 
          "new Effect.MoveBy( $('login_box'), 140, 0, {duration: 1, transition: Effect.Transitions.Bounce}); new Effect.Fade('pull_down', { queue: 'end' } )" %>

“login_box” is the id of my, you guessed it, div that holds the log in form. What this basically does is fire off the Scriptaculous MoveBy to move the div to a certain place and uses our slick new Bounce transition to get the div there. Oh it’s good stuff. Feel free to unleash your inner UI expert and go wild.

Now here’s the actual code since that smartfitdesign seems to forever be in hibernation.

/*
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);
};