Spry Grow Effect samples

The default Grow effect behaviour is to grow a given element centered from 0 to full size in 1 second.

Toggle/Multiple starting points

Toggle will reverse the effect on the second click. This sample also shows how multiple elements can start the same effect.

<script type="text/javascript">
	var second_example = new Spry.Effect.Grow('example2', {toggle:true});
</script>

From, to, duration usage

By passing options in the constructor, you can control the duration of the effect and also the beginning and ending sizes. The sizes are difined in percentage of the current values of the element to be animated. Duration is in milliseconds.

<script type="text/javascript">
 var third_example = new Spry.Effect.Grow('example3', {duration: 2000, from: '100%', to: '30%', toggle:true});
 </script>

Initially hidden element

The target animated element can initially be hidden. To hide an element ou can use one of two CSS properties: display and visibility. The difference between these two properties is the way the element while hidden will alter the flow of the page. While using the display: none; the element is completelly removed from page and the other elements will take its place the visibility: hidden will leave the element in the page flow with all the sizes and other behaviours unaltered but the element is simply not seen.

In the following sample we will use the visibility: none; to initially hide the element and using the Grow effect the element will appear in page.

<style type="text/css">
.hideInitially{
	visibility: hidden;
}
</style>
...

<div class="animationContainer">
	<div class="demoDiv hideInitially" id="example31">
	...
	</div>
</div>
...
<script type="text/javascript">
 var third1_example = new Spry.Effect.Grow('example31', {duration: 2000, from: '0%', to: '100%', toggle:true});
</script>

Not Centered

With an option in the constructor, you can tell Spry to Grow from the top left corner, rather than the center.

<script type="text/javascript">
 var fourth_example = new Spry.Effect.Grow('example4', {duration: 2000, from: '100%', to: '30%', toggle:true, growCenter:false});
 </script>

Box Model

By default, the Grow effect does not collapse the CSS box model (margin and padding) area. By passing 'useCSSBox:true' in the constructor, you can tell Spry to also shrink the Box model rules of the element.

<script type="text/javascript">
 var fifth_example = new Spry.Effect.Grow('example5', {duration: 1000, from: '100%', to: '0%', toggle:true, useCSSBox: true});
 </script>

Not Scaling Content

By default the Grow will automatically scale the content size with the animation. This behavior can be stopped using the scaleContent: option set to false.

<script type="text/javascript">
	var sixth_example = new Spry.Effect.Grow('example6', {toggle:true, from: '100%', to: '0%', scaleContent: false});
</script>

Setup and finish functions

Spry allows you to specify custom made JS functions that should run before the effect starts and after the effect finishes.

<script type="text/javascript">
	var animation_start = function(){
		var button = document.getElementById('animation_button');
		if (button){
			button.disabled = true;
			button.style.backgroundColor = '#FFF';
		}
	}

	var animation_stop = function(){
		var button = document.getElementById('animation_button');
		if (button){
			button.disabled = false;
			button.style.backgroundColor = '';
		}
	}
	var sixth_example = new Spry.Effect.Grow('example6', {toggle:true, setup: animation_start, finish: animation_stop});
</script>