Usage of jsMorph()

var myMorph = jsMorph(
  String/Object/Array obj, // Element, Array or elementCollection of elements that are rendered
  Object prop, // css properties of desired end position
  [Object params], // parameters that influence the motion (duration, speed, ...)
  [Function ease], // easing function (included in easing package)
  [Function onMorphInit], // callback function after initializing the morphing sequence
  [Function onMorph], // callback function with every step during rendering
  [Function onMorphEnd] // callback function at the end of the obj's morphing phase
).start();

or

var myMorph = new jsMorph();
myMorph.concat(obj, prop, [params], [ease], [onMorphInit], [onMorph], [onMorphEnd]);
myMorph.start();

There are three methods to fill jsMorph with information. Eather with creating the 'new' object or by first createing a new instance of jsMorph and fill it later with information by using '.concat()'. It's alsmost the same as '.reset()' besides that this method first empties jsMorph from all previous queued elements.

Methods

.concat( obj, prop, [params], [ease], [onMorphInit], [onMorph], [onMorphEnd] )

Description: Adds element(s) and it's morphing information to morphing sequence (queue)

Parameters: the same as with jsMorph( parameters )
obj String/Object/Array, HTML element, Array of elements or elementCollection that are rendered
prop Object, css properties that schould be set at the end of morphing sequence eg. {width: '120px', ...}
[params Object], parameters that influence the motion (duration, speed, ...)
[ease Function], easing function (included in easing package).
[onMorphInit Function], callback function after initializing the morph sequence
[onMorph Function], callback function with every single step during morphing sequence
[onMorphEnd Function], callback function at the end of the obj's morphing phase

prop: {width : '100px', ...}

Holds css end-properties of morphing sequence (in css style: border-width, etc...)
Any style with numeric attribute can be manipulated, even opacity, color (new in ver. 0.5.0) and some CSS3 attributes like border-radius, etc.
With opacity, only use standard-browser style like opacity: .5 (even for IE).
With color, use either short values like #4af or #44aaff or rgb(68, 170, 255).
Some declarations like 'border-width' or 'margin' etc. will be translated automatically.
Multiple values like 'margin: 12px 4px 12px 3px;' are not supported.
Also new in ver. 0.5.0 is support for relative positioning: add a '~' after the unit to add/subtract the value from the starting position, so with {width: '-25px~'} the element moves 25 pixels to the left from its original position.
 

params: {duration, delay, speed, doEnd}

duration Integer, duration of the element's motion sequence in milliseconds (default: 500)
delay Integer, delay of the element's motion sequence in milliseconds (default: 0)
speed Float, speed coeficient of the element's motion sequence (default: 1) 0-1: faster, >1: slower.
doEnd Boolean, Determine whether the end-style should change to its destination unit or stays in px mode
 

onMorphInit: function (initProp, dims) {...}

initProp Object, holds all the endposition values in pixels. For example:
If you set prop to {width: '120px', ...} initProp will have an object 'width' so initProp.width or initProp['width'].
The value can be read within .full, so initProp.width.full == 120.
You always get pixels with initProp.xy.full, even if you declared some other unit.
There is also initProp.speed that lets you calculate the frames/sec: fps = 1000/initProp.speed
dims Object, an object delivering pixels per units calculated for this element
(em, pt, pc, in, cm, mm, ex, exn, %font, %line, %outX, %outY) where exn is unit 'ex' in end position in case of fontSize change to the end of the sequence.
 

onMorph: function (obj, objStyle, time, frames, objSpeed, jsMorphSpeed, easeingFunction, objCssText) {...}

obj Object, reference to the element that gets rendered
objStyle String, cssText of element being rendered
time Float, elapsed rendering time in milliseconds
frames Float, Frames rendered so far
objSpeed Float, Calculated speed of current element
jsMorphSpeed Float, Globaly calculated rendering speed (differs if more than one element)
easeingFunction Function, returns the used easing function for this element
objCssText String, end position cssText of element
 

onMorphEnd: function (obj, time, frames, objSpeed, jsMorphSpeed, objCssText) {...}

obj Object, reference to the element that gets rendered
time Float, elapsed rendering time in milliseconds
frames Float, Frames rendered
objSpeed Float, Calculated speed of current element
jsMorphSpeed Float, Globaly calculated rendering speed (differs if more than one element)
objCssText String, end position cssText of element

.reset( obj, prop, [params], [ease], [onMorphInit], [onMorph], [onMorphEnd] )

Description: Clears queue of sequence by emptying the jsMorph object,
adds element(s) and it's morphing information to morphing sequence (queue) if parameters are set just like with .concat()

Parameters: no parameters just clears the object.
Same parameters as for .concat( ) above.

.start( obj, [obj], ... )

Description: Starts the morphing sequence.

Parameters: (none just triggers all elements in the queue)
[Object obj], HTML element, Array of elements or elementCollection that gets triggered for rendering (optional)

.stop( )

Description: Stops the morphing sequence.

.init( )

Description: Recalculates all elements in jsMorph from their current position (end positions stay the same).

.onMorphEnd( objs, time, frames, jsMorphSpeed )

Description: Callback function after jsMorph stops rendering timer.

Parameters:
objs Object, Array or ElementCollection, HTML elements that were rendered
time Number, time elapsed for the whole sequence
frames Number, amount of frames rendered
jsMorphSpeed Number, calculated overall speed.

Attributes

Not only jsMorph but also all used elements can have attributes.

jsMorph.speed

Description: Number (readonly) that stores the calculated overall speed of the sequence.

jsMorph.backwards

Description:Boolean (read/write) that makes all elements to be rendered forward (false) or backwards (true).

obj.backwards

Description: Boolean (read/write) that makes the element to be rendered forward (false) or backwards (true).

obj.initStyle

Description: String (readonly) that holds the initial inline style of the element.

 

For now (alpha release) you can use 'opacity' but only with none IE browsers. Full opacity and color support will be available in one of the next releases, when jsMorph leaves the alpha state.

Some methods might change then due to a massive change of the core... maybe not though. It will probably only effect the initProp of onMorphInit(), but we'll definitely document this in our next releases if it ever changes.