Create an effect cluster

A Spry Effects cluster lets you combine multiple effects to create a single new effect. Depending on the method the effects are added to, the effects can either run in parallel (at the same time) or in queue (where one effect begins only after the previous effect ends).

When you define a cluster, you can combine simple effects like Move, Size, Opacity, or Color, or a previously defined cluster effect. For examples, see the Spry effects demonstration page.

A cluster can contain an unlimited number of animated effects. You can also use a cluster to animate two or more different elements, either in parallel or in queue.

All the Spry effects—Fade, Grow, Highlight, Slide, Shake, Squish, and Blind—are predefined clustered effects that use the basic effects Move, Size, Opacity, and Color.

To begin creating an effects cluster, link the SpryEffects.js file on your web page by adding the following code to the head of your document:
```
<head>
. . .
<script  src="../includes/SpryEffects.js" type="text/javascript"></script>
</head>
```
Note: The exact file path differs, depending on where you store the SpryEffects.js file.

The SpryEffects.js file is in the includes folder of the Spry folder that you downloaded from Adobe Labs. See Prepare your files.
Extend the Spry Cluster JavaScript class.
The Spry effects library includes a class called Spry.Effect.Cluster. Any new effect that extends this class becomes a cluster.

This example creates a new effect that fades an element in or out at the same time as it slides the element.

Create the class to extend the Spry.Effect.Cluster. The constructor should receive two parameters: the element to apply the effect to, and the animation options.
```
<script type="text/javascript">
FadeSlide = function(element, options)
{
	Spry.Effect.Cluster.call(this, options);
};
FadeSlide.prototype = new Spry.Effect.Cluster();
FadeSlide.prototype.constructor = FadeSlide;
</script>
```

Define default values for the effect’s options when no custom options are used:

<script type="text/javascript">
FadeSlide = function(element, options)
{
	Spry.Effect.Cluster.call(this, options);
	var duration = 1000;
	var from = 0;
	var to = 100;
	var transition = Spry.fifthTransition;
	var toggle = false;
};
FadeSlide.prototype = new Spry.Effect.Cluster();
FadeSlide.prototype.constructor = FadeSlide;
</script>

Define options that override the default options when someone adds custom options to the constructor:

<script type="text/javascript">
FadeSlide = function(element, options)
{
	Spry.Effect.Cluster.call(this, options);
	var duration = 1000;
	var from = 0;
	var to = 100;
	var transition = Spry.fifthTransition;
	var toggle = false;
	if (options)
	{
		if (options.duration != null) duration = options.duration;
		if (options.from != null) from = options.from;
		if (options.to != null) to = options.to;
		if (options.transition != null) transition = options.transition;
		if (options.toggle != null) toggle = options.toggle;
	}
};
FadeSlide.prototype = new Spry.Effect.Cluster();
FadeSlide.prototype.constructor = FadeSlide;
</script>

Define the effects that animate the element:

<script type="text/javascript">
FadeSlide = function(element, options)
{
	Spry.Effect.Cluster.call(this, options);
	var duration = 1000;
	var from = 0;
	var to = 100;
	var transition = Spry.fifthTransition;
	if (options)
	{
		if (options.duration != null) duration = options.duration;
		if (options.from != null) from = options.from;
		if (options.to != null) to = options.to;
		if (options.transition != null) transition = options.transition;
	}
	var fadeEffect = new Spry.Effect.Fade(element, {duration: duration, from: from, to: to, transition: transition, toggle: toggle});
	var slideEffect = new Spry.Effect.Slide(element, {duration: duration, from: from, to: to, transition: transition, toggle: toggle});
};
FadeSlide.prototype = new Spry.Effect.Cluster();
FadeSlide.prototype.constructor = FadeSlide;
</script>

Note: In this situation, the options sent to the individual effect are the same. In some situations (for example, if you wanted to set different durations for different effects), the values for the defined effects need a more complex computation for each effect participating in the cluster.

Register the effects with the cluster by using one of the two methods made available by the original cluster class from the Spry effects library: addParallelEffect() and addNextEffect(). Using addParallelEffect() causes all of the registered effects to run in parallel.

The following is the complete code for a FadeSlide effect with the two animations registered in parallel:

<script type="text/javascript">
FadeSlide = function(element, options)
{
	Spry.Effect.Cluster.call(this, options);
	var duration = 1000;
	var from = 0;
	var to = 100;
	var transition = Spry.fifthTransition;
	if (options)
	{
		if (options.duration != null) duration = options.duration;
		if (options.from != null) from = options.from;
		if (options.to != null) to = options.to;
		if (options.transition != null) transition = options.transition;
	}
	var fadeEffect = new Spry.Effect.Fade(element, {duration: duration, from: from, to: to, transition: transition, toggle: toggle});
	var slideEffect = new Spry.Effect.Slide(element, {duration: duration, from: from, to: to, transition: transition, toggle: toggle});
	this.addParallelEffect(fadeEffect);
	this.addParallelEffect(slideEffect);
};
FadeSlide.prototype = new Spry.Effect.Cluster();
FadeSlide.prototype.constructor = FadeSlide;
</script>

Attach the new effect by adding an event and a script tag to your code:

<p><a onclick="myFadeSlide.start(); return false;" href="#">Click here to Fade and Slide the below paragraph.</a></p>
<div id="content">
	<div> Lorem ipsum dolor sit amet, consetetur 
sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
ut labore et dolore magna aliqit amet.</div>
</div>
<script type="text/javascript">
var myFadeSlide = new FadeSlide("content", {from: "100%", to: "0%", duration: 1500, toogle: true}
</script>