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!

Nested Spry Collapsible Panels

I ran into a project where I wanted to be able to use nested Spry collapsible panels in Spry 1.6.1 but I saw that when I expanded the child panels that they expanded over the border of the parent panel. I'll try to get a sample up soon to show how it didn't work correctly for me. But in the mean time, you can fix it by opening up SpryCollapsiblePanel.js (within a SpryAssets folder is you added the panel via Dreamweaver) and go to line 431, which reads:
this.content.style.height = this.toHeight + "px";

Change that to:
this.content.style.height = "auto";

And you should be good to go. The first fix I had tried set the height to an empty string which worked for any panel that doesn't have a height set in the CSS for the content. If you do have a height set in the CSS for the content, then setting the height to an empty string causes the CSS to take effect and if the CSS height is different than the height that Spry determined the content of the panel to be when the panel opens, then you could get some jumping as the animation finishes and then the height adjusts to the value set in the CSS.