Spry Squish Effect Samples

This page will exemplify the Spry Squish Effect capabilities.

The Squish effect will collapse the target element to its top left corner in 1 second. This example demonstrate the Squish element default behaviour.

Toggle

The Squish effect after instantiation can be called in different situations by different elements in the page at different times. In this example we animate the same element when you click either a button or a link. The animation can be also started when the mouse is over an element, the page is loaded or on any other page events.

In this example each time the effect is started will toggle the image animation direction because we added "toggle:true" to the constructor.

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

Duration and Sizing

The duration and the initial/final size of the region to be animated can be controlled with specific options passed to the Slide Effect constructor. The "from" and "to" options represent the percentage size of the initial element size.

Duration is set in milliseconds.

<script type="text/javascript">
	var squish_example = new Spry.Effect.Squish('squish2', {from: '100%', to: '30%', duration: 2000, 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 Slide effect the element will appear in page.

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

<form method="get" action="squish_sample.html">
	<input type="button" onclick="squish_hidden.start();" value="Squish Example" />
</form>

<div class="animationContainer">
	<div class="demoDiv hideInitially" id="squish_hidden">
	...
	</div>
</div>
...

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

Not Scaling Content

By default the Squish 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 squish_scale = new Spry.Effect.Squish('scaleDiv', {toggle:true, from: '100%', to: '0%', scaleContent: false});
</script>

Box Model

By default, the Squish 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 animate the Box model rules of the element.

<script type="text/javascript">
	var squish_box = new Spry.Effect.Squish('squishbox', {from: '100%', to: '0%', toggle: true, useCSSBox: true});
</script>

Setup and Finish functions

Sometimes, when using the effects, you need to run some other JavaScript functions before or after the animation. In the constructor you have the possibility to pass two options: "setup" and "finish" with the callback functions which Slide will call automatically.

This example will disable the button while the animation run. The background color of the button will be white during this time.

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

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