Spry Cluster effects & Spry Data

Spry Parallel Cluster effects

Fade & Grow parallel cluster effect

The Cluster allow you to run multiple Animation in parallel. You'll have to define these animations and register using the addParallelEffect() method to a cluster. When you'll call the start() method all the effects will be executed at the same time. If the cluster is allowed to toggle the effects will be run in the reverse order. Every cluster registered effect should also receive the toggle parameter to know that can run in reverse too. The observers register to the cluster will work as for any other effect.

Click here to apply Fade and Grow to the below paragraph.

Lore Ipsum Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vel sem nec massa cursus interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis euismod eros consequat nibh. Pellentesque non purus. Nam lectus magna, faucibus vel, aliquet id, commodo vitae, elit. Maecenas sollicitudin, nibh iaculis bibendum consequat, odio erat volutpat ipsum, sed dignissim ligula mi in justo. Nam placerat. Nullam fringilla tortor. Quisque lacinia, mi non iaculis adipiscing, turpis lacus eleifend velit, dictum facilisis pede diam sagittis nulla. Nunc vestibulum elementum enim. Etiam lorem felis, faucibus sit amet, vulputate sed, lobortis et, nunc. Morbi vitae lectus.

Using the parallel cluster effect as a transition between images

Suppose that once we have the above effect in place, we want to use it as a transition between the images in a slideshow, when the user mouses over the images. We need to apply this effect twice:

when the user leaves an image and is hovering another one, we fade out & shrink the initial image
after this effect finishes, we fade in and grow the new image

The images are loaded with an XML data set and used in a master/detail region. The region shows the thumbnails of the images, while the detail region is used for a bigger version of the image being currently hovered with the mouse.

The step-by-step approach is as follows:

we first register a function as the handler for the onmouseover event on the thumbnail images.
In the handler, we test if the mouse is over a different image than before, using the value of ds_RowID, then cancel any effects that are currently running (to handle the case in which the user moves the mouse fast over several images, we want to see the transition between the first and last image), and then start the fade & grow effect, from 100% to 0
when the first effect finishes, using a finsih function we manually advance the current row in the images data set
an observer object that is registered on the data region calls a function named fadeInAndGrow()
this function starts the second effect, using an image loader to make sure the new image is already loaded

To see the effect, move your mouse over the images.