Spry

Extend transitions

The current transition mechanism allows you to define your own transition functions and use them with Spry effects. Depending on the mathematical algorithm used, you can control the animation acceleration and deceleration periods.

 Define a new function that receives the following parameters: elapsed time (time), starting value (begin), the difference between the finish and the start values (change), and the total time duration of the effect (duration).
<script type="text/javascript">
function myTransition(time, begin, change, duration)
{ /* ... */}
</script>

The value that the function returns should be the current value for the time elapsed from the moment the transition begins.

You can now use the new transition function with any effect. Pass the name of your transition function as a value.

Sample code:

myTransition = function(time, begin, change, duration){
	if (time > duration) return (change+finish);
	return begin + Math.sqrt(time/duration) * change;
}
var effect = new Spry.Effect.Fade("targetID", {duration: 2000, transition: myTransition, toggle: true, from: 100, to: 0});
effect.start();