--- layout : 'default' css : 'shape' title : 'Shape' description : 'A shape is a three dimensional object displayed on a two dimensional plane' type : 'UI Module' --- <%- @partial('header', { tabs: 'module' }) %>
Types States

Types

Shape

A standard shape

Using Shapes
  • A shape must have defined width and heights for each side or else text flow may change during animation
  • The module uses 3D transformations which are currently only supported in modern versions of Chrome, Safari, and Firefox.
This side starts visible.
This is yet another side
This is the last side

Cube

A cube shape is formatted so that each side is the face of a cube

Content must be included inside .content .center to display centered on a cube's side
1
2
3
4
5
6

Text

A text shape is formatted to allow for sides of text to be displayed

Did you know? This side starts visible.
Help, its another side!
This is the last side

Shape Types

Shapes do not have to be regular or have its sides match up in length and width to animate correctly.

Shape

Rectangle
Square
Irregular

Shape with Content

Any type of element can be used as a side of a shape.

Cute Dog

This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.

Silly Dog

Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.

5 days ago
Faithful Dog

Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.

Cute Dog

This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.

Silly Dog

Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.

5 days ago
Faithful Dog

Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.

$('.dog.shape') .eq(0) .shape('flip over') .end() .eq(1) .shape('flip back') ;

Getting Started

Initializing a shape

$('.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 next side', '.second.side') .shape('flip up') ;

Any internal method can be invoked programmatically

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

Behavior

All the following behaviors can be called using the syntax:

$('.your.element') .shape('behavior name', argumentOne, argumentTwo) ;
Behavior Description
flip up Flips the shape upward
flip down Flips the shape downward
flip right Flips the shape right
flip left Flips the shape left
flip over Flips the shape over clock-wise
flip back Flips the shape over counter-clockwise
set next side(selector) Set the next side to a specific selector
is animating Returns whether shape is currently animating
reset Removes all inline styles
queue(animation) Queues an animationtill after current animation
repaint Forces a reflow on element
set default side Set the next side to next sibling to active element
set stage size Sets shape to the content size of the next side
refresh Refreshes the selector cache for element sides
get transform down Returns translation for next side staged below
get transform left Returns translation for next side staged left
get transform right Returns translation for next side staged right
get transform up Returns translation for next side staged up
get transform down Returns translation for next side staged down

Shape Settings
Shape settings modify the shape's behavior

Setting Default Description
duration 700ms Duration of side change animation

Callbacks
Callbacks specify a function to occur after a specific behavior.

Setting Context Description
beforeChange Next Side Is called before side change
onChange Active Side Is called after visible side change

DOM Settings
DOM settings specify how this module should interface with the DOM

Setting Default Description
namespace shape Event namespace. Makes sure module teardown does not effect other events attached to an element.
selector
selector : { sides : '.sides', side : '.side' }
className
className : { animating : 'animating', hidden : 'hidden', loading : 'loading', active : 'active' }

Debug Settings
Debug settings controls debug output to the console

Setting Default Description
name Shape Name used in debug logs
debug True Provides standard debug output to console
performance True Provides standard debug output to console
verbose True Provides ancillary debug output to console
error
error: { side : 'You tried to switch to a side that does not exist.', method : 'The method you called is not defined' }