Menu

Shape
A shape is a three dimensional object displayed on a two dimensional plane

Types

Shape

A shape is a three dimensional object including any flat content as a side.

Steve Jobes
Steve Jobes is a fictional character designed to resemble someone familiar to readers.
Joined in 2014 151 Friends
Stevie Feliciano
Joined in 2014
Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.

Cube

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

1
2
3
4
5
6

Text

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

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.
Did you know? This side starts visible.
Help, its another side!
This is the last side

Examples

Shape Types

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

Shape

Auto
Square
Irregular

Getting Started

Required Markup

Shapes can have any arbitrary content, just wrap each side in side

This side starts visible.
This is yet another side
This is the last side

Animating with Javascript

Animations use CSS3 transitions and Javascript to set-up the correct conditions.

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 animation 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
destroy Destroys instance and removes all events

Shape Settings
Shape settings modify the shape's behavior

Setting Default Description
duration 700ms Duration of side change animation
width
2.2
initial
When set to next will use the width of the next side during the shape's animation.
When set to initial it will use the width of the shape at initialization.
When set to a specific pixel height, will force the width to that height.
height
2.2
initial
When set to next will use the height of the next side during the shape's animation.
When set to initial it will use the height of the shape at initialization.
When set to a specific pixel height, will force the height to that height.

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

Setting Context Description
onBeforeChange 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
silent false Silences all console output including error messages, regardless of other debug settings.
debug false Provides standard debug output to console
performance true Provides standard debug output to console
verbose false 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' }

Dimmer Message
Dimmer sub-header