Behavior Module: Shape
1 of 5
1. Introduction
2. Download
3. UI Library
4. UI Modules
5. Behavioral Modules
Menu

Shape

Shape is a plugin for 3D transitioning elements.

  • Examples
  • Usage
  • Settings

    • 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

    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

    Changing Settings

    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');

    Reading Settings

    Settings can also be read programmatically:

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

    Defaults

    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' }