Shape

Shapes makes creating 3D tweens easier by taking care of the dirty business of calculating translations based on content sizing, which can be a confusing, frustrating task.

The module uses 3D transformations which are currently only supported in modern versions of Chrome, Safari, and Firefox.

Shapes is written using the semantic module specification. Semantic is a standard pattern for writing Javascript modules which intends to make understanding new code less confusing, and debugging errors less frustrating, by making coding decisions less arbitrary and more semantic.

Click here to read more about Semantic spec, and the upcoming library.

Examples

Standard

Square

Rectangle

Irregular

Flip

Left

Right

Down

Over

Usage

The plugin must be initialized once before methods can be accessed

$('.shape') .shape() ;

Transitions automatically assume next side is the next sibling (or first if last element)

$('.shape') .shape('flip.up') ;

To manually set the next side to appear use a selector or jQuery object

$('.shape') .shape('set.nextSide', '.second') .shape('flip.up') ;

Any internal method can be invoked programmatically

$('.shape') .shape('repaint') ;

Settings

Changing Settings

A settings object can be passed in when initializing the plugin

$('.foo') .shape({ moduleName: 'Godzilla' }) ;
Default settings for the module can be overridden by modifying $.fn.shape.settings.
$.fn.shape.settings.moduleName = 'Godzilla';
Settings can be changed after a module is initialized by calling the 'settings' method on the module with either a settings object or a name, value pair.
$('.foo').shape('setting', 'moduleName', 'Godzilla');

Reading Settings

Settings can also be read programmatically:

$('.foo').shape('setting', 'moduleName');

Defaults

Shape Settings
useCSS	True	Not currently supported. Will allow for use of javascript requestAnimationFrame transitions instead of css3 transitions.
duration	1000ms	Duration of animation (javascript only). To modify animation duration for css simply modify the css property transition-duration.
easing	easeInOutQuad	Easing equation for animation (javascript only). To modify the easing for css simply modify the css property transition-easing
selector	{ shape : '.shape', side : '.side' }	Object containing selectors used by module.
className	{ css : 'css', animating : 'animating', hidden : 'hidden', active : 'active' }	Object containing class names used by module.

Callbacks
beforeChange	None	Callback before side is changed. This context is the new side.
onChange	None	Callback after side is changed. This context is new side.

UI Module Settings
moduleName	Shape	Name used in debug logs
debug	True	Provides standard debug output to console
performance	False	Provides standard debug output to console
verbose	False	Provides ancillary debug output to console
namespace	shape	Event namespace. Makes sure module teardown does not effect other events attached to an element.
errors	{ side : 'You tried to switch to a side that does not exist.', method : 'The method you called is not defined' }