jsMorph is a pure javaScript animation framework that can manipulate almost any and multiple stylings of multiple HTML elements. It auto detects start positions, auto converts units, automatically adjusts rendering speed and corrects time leaks for smoother rendering experience. Even if used for queued multiple elemets, jsMorph can do single or grouped triggering as well as handling plenty of unique or overall callback functions. All methods within jsMorph are chainable. jsMorph can also be used for converting units to pixels or any other unit.
This page shows you all the 'methods' and 'attributes' available in 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.
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
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.
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)
Description: Stops the morphing sequence.
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.
Not only jsMorph but also all used elements can have attributes.
Description: Number (readonly) that stores the calculated overall speed of the sequence.
Description: Boolean (read/write) that makes the element be rendered forward (false) or backwards (true).
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.