Upping Your Transition Count

No, I'm not becoming all health conscious, just looking at adding more transitions to those already present withing Adobe Spry's effects library.

Spry includes a few transitions which you can check out in the Effects Transitions Sampler, such as Linear, Sinusoidal, and Pulsate. For a complete list of build in transitions, check out Working with Spry Effects, and scroll down to the "Transition overview" section.

Transitions are within the Spry.Effect.Transitions namespace object located in SpryEffects.js within the Includes folder in the Spry download package. Once that file is open, you'll see the supported effects defined as functions attached to the Spry.Effect.Transitions object. This functions are commonly referred to as easing equations, and are in a specific format, so unless you're familiar with the math involved in creating an easing equation { f(0)=0 and f(1)=1 }, then I suggest you do what I've lazily done and look for pre-exisiting easing equations to play around with. And for that, we have Robert Penner's to work with, or at least start from. So you could take the equations you find at Penner's site and then modify them for JavaScript, but handily, a number of folks have already done that, and one such example is at YUI.

Now, the YUI code has the equations in a YAHOO.util.Easing name space, so you don't want to copy that out, so near the beginning of the code sample drop:

YAHOO.util.Easing = {

and at the end, drop:


};


So if you grab all of the code that lies between the two snippets listed above, and then you paste it into SpryEffects,js between lines 81 and 82, then you'll have the listed easing equations available for use in transitions for your effects and widgets. Important: give credit where credit is due, make sure to copy the copyright info for the easing equations along with the equations themselves! As the equations and Spry are both BSD licenses, they mix together well, but pay attention when mixing open and closed source code.

Please note that by default, all of the transitions are added to the Spry object directly (As of Spry 1.6.1 that is done in SpryEffects.js lines 83-86), so if you write your own equation, or use someone else's, please make sure to check the name of the function and ensure that there's no naming conflict because of the potential for overwriting another Spry object's, or for your transition to be overwritten by some other code. For example, naming an easing function Effect, would cause your function to be assigned to Spry.Effect, which would cause an issue for you (or anyone else) that needs the default Spry.Effect object.

So if everything has gone correctly, you can now enjoy 16 new transitions along with the original 8 that are part of Spry 1.6.1.

If you have run across any other transitions or effect tidbits, trivia, or interesting findings for Spry, or that you feel might apply to Spry, please leave a comment so we all can press forward!