{"id":14961369,"url":"https://github.com/ded/morpheus","last_synced_at":"2025-04-12T21:24:52.759Z","repository":{"id":1515730,"uuid":"1773844","full_name":"ded/morpheus","owner":"ded","description":"A Brilliant Animator","archived":false,"fork":false,"pushed_at":"2015-06-11T11:04:10.000Z","size":460,"stargazers_count":503,"open_issues_count":14,"forks_count":57,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-04-04T01:07:37.377Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ded.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2011-05-19T22:39:31.000Z","updated_at":"2025-02-16T23:20:56.000Z","dependencies_parsed_at":"2022-08-16T13:35:07.253Z","dependency_job_id":null,"html_url":"https://github.com/ded/morpheus","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ded%2Fmorpheus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ded%2Fmorpheus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ded%2Fmorpheus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ded%2Fmorpheus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ded","download_url":"https://codeload.github.com/ded/morpheus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248633178,"owners_count":21136821,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-24T13:24:54.850Z","updated_at":"2025-04-12T21:24:52.737Z","avatar_url":"https://github.com/ded.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"    _  _ ____ ____ ___  _  _ ____ _  _ ____\n    |\\/| |  | |__/ |__] |__| |___ |  | [__\n    |  | |__| |  \\ |    |  | |___ |__| ___]\n-----\nA Brilliant Animator.\n\nMorpheus 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](http://www.w3.org/TR/css3-2d-transforms/) (roate, scale, skew, \u0026 translate) -- all in a single high-performant loop utilizing the CPU-friendly [requestAnimationFrame](http://webstuff.nfshost.com/anim-timing/Overview.html) standard.\n\nIt looks like this:\n\n``` js\nvar anim = morpheus(elements, {\n  // CSS\n    left: -50\n  , top: 100\n  , width: '+=50'\n  , height: '-=50px'\n  , fontSize: '30px'\n  , color: '#f00'\n  , transform: 'rotate(30deg) scale(+=3)'\n  , \"background-color\": '#f00'\n\n    // API\n  , duration: 500\n  , easing: easings.easeOut\n  , bezier: [[100, 200], [200, 100]]\n  , complete: function () {\n      console.log('done')\n    }\n})\n\n// stop an animation\nanim.stop()\n\n// jump to the end of an animation and run 'complete' callback\nanim.stop(true)\n```\n\nGeneral Tweening\n------\n\n``` js\nmorpheus.tween(1000,\n  function (position) {\n    // do stuff with position...\n    // like for example, use bezier curve points :)\n    var xy = morpheus.bezier([[startX, startY], \u003c[n control points]\u003e, [endX, endY]], position)\n  },\n  function () {\n    console.log('done')\n  },\n  easings.bounce,\n  100, // start\n  300 // end\n)\n```\n\nAPI\n---\n\n``` js\n/**\n  * morpheus:\n  * @param element(s): HTMLElement(s)\n  * @param options: mixed bag between CSS Style properties \u0026 animation options\n  *  - {n} CSS properties|values\n  *     - value can be strings, integers,\n  *     - or callback function that receives element to be animated. method must return value to be tweened\n  *     - relative animations start with += or -= followed by integer\n  *  - duration: time in ms - defaults to 1000(ms)\n  *  - easing: a transition method - defaults to an 'easeOut' algorithm\n  *  - complete: a callback method for when all elements have finished\n  *  - bezier: array of arrays containing x|y coordinates that define the bezier points. defaults to none\n  *     - this may also be a function that receives element to be animated. it must return a value\n  * @return animation instance\n  */\n```\n\nSee the \u003ca href=\"http://ded.github.com/morpheus/\"\u003elive examples\u003c/a\u003e\n\nLanguage LTR - RTL support\n---------------\nFor those who run web services that support languages spanning from LTR to RTL, you can use the drop-in plugin filed called \u003ccode\u003ertltr.js\u003c/code\u003e found in the \u003ccode\u003esrc\u003c/code\u003e directory which will automatically mirror all animations without having to change your implementation. It's pretty rad.\n\nBrowser support\n-----------\nGrade A \u0026 C Browsers according to Yahoo's [Graded Browser Support](http://developer.yahoo.com/yui/articles/gbs/). CSS3 transforms are only supported in browsers that support the transform specification.\n\nEnder integration\n--------\nGot [Ender](http://ender.jit.su)? No? Get it.\n\n    $ npm install ender -g\n\nAdd Morpheus to your existing Ender build\n\n    $ ender add morpheus\n\nWrite code like a boss:\n\n``` js\n$('#content .boosh').animate({\n  left: 911,\n  complete: function () {\n    console.log('boosh')\n  }\n})\n```\n\nUsage Notes\n-----------\n\n\u003ch3\u003eColor\u003c/h3\u003e\nIf you're serious about *color animation*, there's a few precautions you'll need to take ahead of time. In order to morph *from* one color to another, you need to make sure the elements you're animating *have an inherited color style* to start with. Furthermore, those styles need to be represented in \u003ccode\u003ergb\u003c/code\u003e, or \u003ccode\u003ehex\u003c/code\u003e, and not a named color (like \u003ccode\u003ered\u003c/code\u003e, or \u003ccode\u003eorange\u003c/code\u003e) -- that is unless you want to write code to map the [color conversion](http://www.w3schools.com/css/css_colornames.asp) yourself.\n\nTherefore, at minimum, you need to set a color before animating.\n\n``` js\nelement.style.color = '#ff0';\nmorpheus(element, {\n  color: '#000'\n})\n```\n\nWith [Bonzo](https://github.com/ded/bonzo) installed in [Ender](http://ender.no.de).\n\n``` js\n$('div.things').css('color', '#ff0').animate({\n  color: '#000'\n})\n```\n\n\u003ch3\u003eUnits\u003c/h3\u003e\nIf you're considering animating by a CSS unit of measurement like \u003ccode\u003eem\u003c/code\u003e, \u003ccode\u003ept\u003c/code\u003e, or \u003ccode\u003e%\u003c/code\u003e, like-wise to color animation, you must set the size ahead of time before animating:\n\n``` js\n$('div.intro')\n  .css({\n      fontSize: '2em'\n    , width: '50%'\n  })\n  .animate({\n      fontSize: '+=1.5em'\n    , width: '100%'\n  })\n```\n\nYou also get two other fancy fading hooks\n\n``` js\n$('p').fadeIn(250, function () {\n  console.log('complete')\n})\n\n$('p').fadeOut(500, function () {\n  console.log('complete')\n})\n```\n\n\u003ch3\u003eTransforms\u003c/h3\u003e\nTransforms can be animated in browsers that support them (IE9, FF, Chrome, Safari, Opera). \u003ccode\u003emorpheus.transform\u003c/code\u003e 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:\n\n``` js\nelement.style[morpheus.transform] = 'rotate(30deg) scale(1)'\nmorpheus(element, {\n  transform: 'rotate(0deg) scale(+=3)'\n})\n```\n\nAMD Support\n----------\n\n``` js\nrequire('morpheus.js', function (morpheus) {\n  morpheus(elements, config)\n})\n\nor as usual with ender\n\nvar morpheus = require('morpheus')\n\n```\n\n## Developers\n\nIf you're looking to contribute. Add your changes to `src/morpheus.js` Then run the following\n\n``` sh\nnpm install .\nmake\nopen tests/tests.html\n```\n\nMorpheus (c) Dustin Diaz 2011 - License MIT\n\n**Happy Morphing!**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fded%2Fmorpheus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fded%2Fmorpheus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fded%2Fmorpheus/lists"}