Usage of jsMorph()

var myMorph = jsMorph(
  Object obj, // HTML element, Array of elements or elementCollection that are rendered
  Object prop, // css properties of 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 of filling jsMorph with information. Eather right away while creating the 'new' object or you first create 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 Object, HTML element, Array of elements or elementCollection that are rendered
prop Object, css properties that schould show 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 step
[onMorphEnd Function], callback function at the end of the obj's morphing phase

params: {duration, delay, speed, doEnd}

duratio 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)
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.
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, jsMorphSspeed, 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
jsMorphSspeed Float, Globaly calculated rendering speed 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 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.

.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.

obj.backwards

Description: Boolean (read/write) that makes the element 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.