Menu

Shape

Shape is a plugin for 3D transitioning elements.

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

Regular Shape

Shape

Square
Rectangle
Irregular

Flip

Left
Right
Up
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

Settings can be modified in three different ways.

  1. A settings object can be passed in when initializing the plugin
    $('.foo').shape({ moduleName: 'Godzilla'});
  2. Default settings for the module can be overridden by modifying $.fn.shape.settings.
    $.fn.shape.settings.moduleName = 'Godzilla';
  3. 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');

Settings can also be read programmatically: $('.foo').shape('setting', 'moduleName');

Setting Default Description
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.
Standard
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' } Object containing localized error messages.