The following demos are not best practice examples, they should just show what you can do with jsMorph.
Most of the demos can be found in the Plugins section as real usable plugins.
This demo shows how easy it is to set up some iPhone like UI (works with Safari and Chrome).
This setup simulates the iPhone screen (kind of. 320x480)
Lorem ipsum dolor sit amet
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
var iPhone = document.getElementById('iPhone'),
leftScreen = document.getElementById('leftScreen'),
dets = leftScreen.getElementsByTagName('div'), detButtons = [],
rightScreen = document.getElementById('rightScreen'),
bottomScreen = document.getElementById('bottomScreen'),
bk = function(obj) {obj.backwards = obj.backwards ? false : true},
ease = function(n) {return -(--n*n*n*n-1)},
props = {duration:300},
myMorph = new jsMorph();
for (var n=dets.length, m=0; n--;)
if (dets[n].className.match(/list$/)) detButtons[m++] = dets[n];
myMorph.concat(bottomScreen,{top:'0%'},null,ease,null,null,bk).
concat(rightScreen,{left:'0%'},props,ease,null,null,bk).
concat(leftScreen,{left:'-100%'},props,ease,null,null,bk).
concat(detButtons,{height:'0px'},{duration:250},ease,null,null,bk);
// some triggers
myMorph.start(bottomScreen); // shows option screen
myMorph.start([leftScreen, rightScreen]); // shows details screen
myMorph.start(detButtons); // hides black lines
Here you see that the whole UI is packed inside one jsMorph object. The jsMorph setup is also quite easy and short.