Spry effects are visual enhancements that you can apply to almost any element on an HTML page using JavaScript. Effects are often used to highlight information, create animated transitions, or alter a page element visually for a duration of time. You can apply effects to HTML elements without needing additional custom tags.

Effects can alter an element’s opacity, scale, position, and styling properties such as background color. You can create interesting visual effects by combining two or more properties.

Because these effects are Spry-based, when a user clicks on an object with an effect, only the object is dynamically updated, without refreshing the entire HTML page.

Spry includes these effects:

Appear/Fade

Makes an element appear or fade away.

Highlight

Changes the background color of an element.

Blind Up/Down

Simulates a window blind that goes up or down to hide or reveal the element.

Slide

Moves the element up or down.

Grow/Shrink

Increases or reduces the size of the element.

Shake

Simulates shaking the element from left to right.

Squish

Makes the element disappear into the upper-left corner of the page.

For a comprehensive overview of the Spry effects available in the Spry framework, visit www.adobe.com/go/learn_dw_spryeffects.