_ _ ____ ____ ___ _ _ ____ _ _ ____
|\/| | | |__/ |__] |__| |___ | | [__
| | |__| | \ | | | |___ |__| ___]
A Brilliant Animator.
Morpheus lets you "tween anything" in parallel on multiple elements; from colors to integers of any unit (px, em, %, etc), with easing transitions and bezier curves, including CSS3 transforms (roate, scale, skew, & translate) -- all in a single high-performant loop utilizing the CPU-friendly requestAnimationFrame standard.
It looks like this:
var anim = morpheus(elements, { // CSS left: -50 , top: 100 , width: '+=50' , height: '-=50px' , fontSize: '30px' , color: '#f00' , transform: 'rotate(30deg) scale(+=3)' , "background-color": '#f00' // API , duration: 500 , easing: easings.easeOut , bezier: [[100, 200], [200, 100]] , complete: function () { console.log('done') } }) // stop an animation anim.stop() // jump to the end of an animation and run 'complete' callback anim.stop(true)
morpheus.tween(1000, function (position) { // do stuff with position... // like for example, use bezier curve points :) var xy = morpheus.bezier([[startX, startY], <[n control points]>, [endX, endY]], position) }, function () { console.log('done') }, easings.bounce, 100, // start 300 // end )
/** * morpheus: * @param element(s): HTMLElement(s) * @param options: mixed bag between CSS Style properties & animation options * - {n} CSS properties|values * - value can be strings, integers, * - or callback function that receives element to be animated. method must return value to be tweened * - relative animations start with += or -= followed by integer * - duration: time in ms - defaults to 1000(ms) * - easing: a transition method - defaults to an 'easeOut' algorithm * - complete: a callback method for when all elements have finished * - bezier: array of arrays containing x|y coordinates that define the bezier points. defaults to none * - this may also be a function that receives element to be animated. it must return a value * @return animation instance */
See the live examples
For those who run web services that support languages spanning from LTR to RTL, you can use the drop-in plugin filed called rtltr.js found in the src directory which will automatically mirror all animations without having to change your implementation. It's pretty rad.
Grade A & C Browsers according to Yahoo's Graded Browser Support. CSS3 transforms are only supported in browsers that support the transform specification.
Got Ender? No? Get it.
$ npm install ender -g
Add Morpheus to your existing Ender build
$ ender add morpheus
Write code like a boss:
$('#content .boosh').animate({ left: 911, complete: function () { console.log('boosh') } })
rgb, or hex, and not a named color (like red, or orange) -- that is unless you want to write code to map the [color conversion](http://www.w3schools.com/css/css_colornames.asp) yourself.
Therefore, at minimum, you need to set a color before animating.
element.style.color = '#ff0'; morpheus(element, { color: '#000' })
With Bonzo installed in Ender.
$('div.things').css('color', '#ff0').animate({ color: '#000' })
em, pt, or %, like-wise to color animation, you must set the size ahead of time before animating:
$('div.intro') .css({ fontSize: '2em' , width: '50%' }) .animate({ fontSize: '+=1.5em' , width: '100%' })
You also get two other fancy fading hooks
$('p').fadeIn(250, function () { console.log('complete') }) $('p').fadeOut(500, function () { console.log('complete') })
morpheus.transform provides a shortcut to the correct style property for the browser (webkitTransform, MozTransform, etc). Like animating on units or color, you must set the property ahead of time before animating:
element.style[morpheus.transform] = 'rotate(30deg) scale(1)' morpheus(element, { transform: 'rotate(0deg) scale(+=3)' })
require('morpheus.js', function (morpheus) { morpheus(elements, config) }) or as usual with ender var morpheus = require('morpheus')
If you're looking to contribute. Add your changes to src/morpheus.js Then run the following
npm install .
make
open tests/tests.htmlMorpheus (c) Dustin Diaz 2011 - License MIT
Happy Morphing!