Attach a Move effect

The Move effect changes the target element position within the page. Many of the predefined effects use the Move effect: Grow, Slide, Shake, and Squish.

You can only attach this effect to the following HTML elements: address, dd, div, dl, dt, form, img, ol, ul, applet, center, dir, menu, or pre.

To link the SpryEffects.js file on your web page, add 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.

Make sure your target element has a unique ID. The target element is the element that changes when the user interacts with the page to cause the effect.

<div id="move1"><p>Lorem ipsum dolor sit amet, consetetur 
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
labore et dolore magna aliqt</p></div>

To create the effect, add a JavaScript event to trigger the effect, a script tag that creates the effect object, and positioning variables. For example, if you want the user to click on a sentence that causes another paragraph to change position, you might add the following code:
```
<p><a onclick="move_effect.start(); return false;" href="#">Click here to move the paragraph.</a></p>
. . .
<script type="text/javascript">
var fromPos = new Spry.Effect.Utils.Position();
fromPos.x = 0;
fromPos.y = 0;
var toPos = new Spry.Effect.Utils.Position();
toPos.x = 300;
toPos.y = 0;
Spry.Effect.makePositioned(document.getElementById("move1"));
var move_effect = new Spry.Effect.Move("move1", fromPos, toPos, {duration: 2000, toggle: true});
</script>
```
Note: It’s important that you add the script tag after the code for the target element. Otherwise the page will return a JavaScript error when you try to trigger the effect.

The first argument of the Spry.Effect.Move method is always the target element’s ID ("move1" in the preceding example).

The second argument is the position that represents the starting coordinates of the element. The default units of measure are pixels. You can change this value by using the units property of the position object: fromPos.units = 'em';

The third argument is the position that represents the ending coordinates of the element. The default units of measure are pixels. You can change this value by using the units property of the position object: toPos.units = 'em';

Note: The units for both starting and ending positions should be the same; otherwise the effect will not accept them as valid parameters.

Set the position CSS property for the target element to absolute or relative. The following code ensures that the element position property is correct and that the Move animation functions properly.
```
Spry.Effect.makePositioned(document.getElementById("move1"));
```
The complete code looks as follows:
```
<head>
. . .
<script src="../includes/SpryEffects.js" type="text/javascript"></script>
</head>
<body>
<p><a onclick="move_effect.start(); return false;" href="#">Click here to move the paragraph.</a></p>
<div id="move1"><p>Lorem ipsum dolor sit amet, consetetur 
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
labore et dolore magna aliqt</p></div>
<script type="text/javascript">
var fromPos = new Spry.Effect.Utils.Position();
fromPos.x = 0;
fromPos.y = 0;
var toPos = new Spry.Effect.Utils.Position();
toPos.x = 300;
toPos.y = 0;
Spry.Effect.makePositioned(document.getElementById("move1"));
var move_effect = new Spry.Effect.Move("move1", fromPos, toPos, {duration: 2000, toggle: true});
</script>
</body>
```

Move effect options

The following table lists available options for the Move effect.

Option	Description
duration	Duration of the effect in milliseconds. The default value is 1000.
toggle	Lets you create a toggle effect. The default value is `false`.
transition	Determines the type of transition. The default is `Spry.sinusoidalTransition`.
fps	Determines the number of frames per second (fps) of the animation. The default is 60.
setup	Lets you define a function that is called before the effect begins, e.g.,`setup:function (element,effect){/* ... */}`.
finish	Lets you define a function that is called after the effect finishes, e.g., `finish:function (element,effect){/* ... */}`.

Sample code:

var fromPos = new Spry.Effect.Utils.Position();
fromPos.x = 100;
fromPos.y = 100;
var toPos = new Spry.Effect.Utils.Position();
toPos.x = 300;
toPos.y = 300;
Spry.Effect.makePositioned(document.getElementById("targetID"));
var size_effect = new Spry.Effect.Move("targetID", fromPos, toPos, {duration: 2000, toggle: true, transition: Spry.fifthTransition});