Spry Effects

About Spry Effects

Effects are visual enhancements that you can apply to almost any element on an HTML page. For example, an effect might highlight information, create animated transitions, or visually alter a page element for a certain period of time. Effects are a simple but elegant way of enhancing the look and feel of your website.

Effects refer to JavaScript methods and functions that reside on the client, and don't require any server-side logic or scripting to work. Thus, when a user browses an HTML page and triggers an effect, only the object to which the effect is applied gets updated: there is no need to refresh the entire page.

You can easily apply effects to most HTML elements, and the HTML element to which you apply the effect does not require any custom tags. All effects-related functionality for Spry effects are contained in a file called SpryEffects.js. The HTML page that contains effects must reference this JavaScript file and reside on your server in order for Spry effects to work.

Why doesn't Spry use a 3rd-party framework (like Script.aculo.us) for effects?

Adobe examined other effects libraries and noted how other frameworks implemented their effects. In most cases, other implementations were close to our vision, but not close enough.

While using another framework in Spry would certainly have its advantages (less or no coding responsibilty, broad user base, and, especially for open source projects, a good method of reporting and fixing bugs), 3rd-party frameworks like Script.aculo.us didn’t exactly fit the Spry Model. For example, the Prototype library (which is an integral part of the Script.aculo.us framework) extends the JavaScript associative array type in a way that is not compatible with standard JavaScript arrays. Since Script.aculo.us heavily relies on the prototype.js library, it is difficult to separate out just the effects part of Script.aculo.us. In the end, Spry cannot directly make use of Script.aculo.us; we can, however, use Script.aculo.us as a foundation for our library.

Adobe recognizes the community's acceptance of Script.aculo.us as a well-written effects library. With that in mind, we based our Spry effects on Script.aculo.us effects in many ways. Specifically, we adopted their list of effects as well as their nomenclature, and also implemented the ways Script.aculo.us has solved many browser issues related to effects.

We have used Script.aculo.us as a foundation for our framework, divorced it from the prototype, and made some enhancements (the ability to toggle for example). Thus, if Spry and Script.aculo.us seem similar, it's because they are. Adobe acknowledges the work done by Thomas Fuchs of Script.aculo.us and hopes that the community will recognize both libraries as useful and viable. Additionally, we've worked to make sure that you can use both libraries on a single page.

The Spry effects library

The file SpryEffects.js includes all Spry effects that ship on Adobe Labs. The file is relatively small in size (about 9 KB) and can be used independently of any other libraries. It has no other dependencies. You must reference the file from the head of your HTML source file, as shown below:

<script type="text/javascript" src="../js/SpryEffects.js>"></script>

Currently, Spry includes 7 effects:

Appear/Fade Makes an element appear or fade away
Highlight Flashes a color as the background of an element
BlindUp/BlindDown Simulates a window blind, up or down, where the contents of the affected elements stay in place
Slide Simulates a window blind, where the contents of the affected element scroll accordingly(vertical or horizontal)
Grow/Shrink Increases/reduces the size of the element
Shake Moves the element slightly to the left, then to the right, repeatedly
Squish Reduces the element to its top-left corner and disappears

Effects and the Spry framework

As with previously-released Spry datasets and their accompanying widgets, we designed Spry effects to be easy to implement on the page while letting the framework do the real work. No new tags or strange syntaxes are required. Designers with a rudimentary understanding of JavaScript can easily implement any of these effects. More advanced users can combine base effects to create more complex and sophisticated effects.

The following shows an example of a basic effect :

onClick="Spry.Effect.AppearFade('target',{duration: 1000,from: 0,to: 100, toggle: true;});"

You can apply an effect to almost any page element, and the code is easy to understand and edit. With the trio of Spry framework features—datasets, widgets, and effects—Adobe hopes to provide designers and developers the tools they need to easily create Ajax-enabled pages.