jsMorph - tutorial page

Simple horizontal slide demo

In this demo we'll let the <div> simply slide from its initial position 200px to the right.
It started already right away...(click for restart):

new jsMorph('demo', {left:'200px'}).start();

The elements can be delivered as string (id of element), Array of elements (or strings), or as an elementCollection

Simple horizontal slide demo with some more parameters

The same as above in a smoother way and a trigger (click the <div> to start motion):

var demo = document.getElementById('demo'),
    myMorph = new jsMorph(demo,
      {left:'200px'},
      {duration:650},
      function(n) {return --n*n*n+1}
    );
demo.onclick = myMorph.start;

Here we increased the duration from the default value 500 to 650, added a nicer easing function (cubicEaseOut, default is linear) and triggert the motion with the onclick event. You'll find transition functions within the package... another resource saving point: you probably never use more than 2 different ones, so, why including more?

Queueing demo & unit change

In this demo we'll let the <div> go in two different directions in one sequence:

var demo = document.getElementById('demo'),
    myMorph = new jsMorph(demo,
      {left:'50%', height:'7em', width:'280px', 'border-width':'6px', 'margin-left':'-140px'},
      {duration:600},
      cubicEaseOut
    ).concat(demo,
      {top:'95px'},
      {delay:220},
      bounceEaseOut,
      null,
      null,
      function(obj) {obj.backwards = obj.backwards ? false : true}
    );
demo.onclick = myMorph.start;
window.onresize = myMorph.init;

Here we put the same element 'demo' twice in the cue of myMorph with a delay of 220ms and a different ease equation. Additionaly we defined the onMorphEnd callback function for the last sequence to set the attribute 'backwards' to the element that gets rendered last.
You might find it strange that the element goes back an other way, but it's just logical that the second element still has its delay. You can avoid that by setting the reverseDelays attribute like you'll see in a firther demo, or by defining a new jsMorph with a backwards sequence.

You can also see that we changed the type of unit. Initial left is set in pixels but it ends up with 50%. This way and with the negative margin it always ends up in the middle of the sceen, even if you resize the window (you have to set the window.onResize event to reinitialize the elements in jsMorph) but goes back to a fixed starting point. The same unit change happened with height: from pixels to em.

Multy element queueing demo with unique triggers & onMorph callback

In this demo we'll let many <div>s move the same way but being triggered uniquely:

var demo = document.getElementById('demoWrap').getElementsByTagName('div');
    myMorph = new jsMorph(demo,
      {bottom: '-44px', height:'70px~', 'border-top-width':'8px',
       'background-color':'#468', 'border-color':'#fff', opacity: .7},
      {duration:150},
      cubicEaseOut,
      function(obj, objStyle, time) {obj.firstChild.data = time},
      null,
      function(obj) {obj.backwards = obj.backwards ? false : true}
    ).concat(demo[demo.length-1],
      {left:'100px'},
      {duration:150},
      cubicEaseOut
    );
for (var n=demo.length; n--;) demo[n].onclick = function() {myMorph.start(this)}

Here we put an elementCollection 'demo' in the cue of myMorph (could also be an Array of elements) because all elements have to do the same thing. Additionaly we add the last element with a different attribute change to it and an onMorph callback function to all elements that shows the elapsed time.

You'll probably recognice that shorter durations for short distance motions look better.

All elements are triggered individually by adding the single elements as arguments to the methode start() inside the onclick event. See the 'menu demo' for a better event assignement (event delegation).

I added some other features to this tutorial to demonstrate new features of ver. 0.5.0:
- Relative animation: 'height:'70px~' adds 70px to the existing 30px... results in 100px
- Color support: 'background-color' : '#444' and 'border-color' : '#fff
- Support for opacity: opacity: .7 (even for IE)

Recycling, resetting & speed reducing jsMorph ('green' mode)

In this demo we'll feed jaMorph with the same object with new initial states and different end positions:

0 fps

var demo = document.getElementById('demo'),
    myMorph = new jsMorph(),
    recycle = function (myMorph, demo, width) {
      myMorph.reset(demo,
        {width: width+'px'},
        {duration:450, speed:3},
        cubicEaseOut
      ).start();
    };
window.setInterval(function(){recycle(myMorph, demo, Math.random()*600)}, 1000);

Here we reset all data in the same object. You can see how convenient it is to not having to put the initial values to the morphing object. With this option you can save a lot of memory.
See the 'charts demo' for a more practical demo for useing jsMorph.

The optimized rendering speed is also recalculated each time you feed it with new data (see fps). This way you'll use only resources that you need, to show a smooth motion. In this demo you got 'speed' set to 3 which reduces the framerate to an amount that is still (kind of ;o) fast enough to experience a smooth rendering but saves even more resources (defaul: 1). jsMorph reduces speed by default to the max by default, so, don't care too much ;o)

Converting units...

In this demo we'll only collect some CSS values of an element and change its units to pixels:

The starting units declared in the style sheet are mixed:

#unitDemo {
  width: 6em;
  height: 2ex;
  border: .4em solid #888;
  padding: 2%;
  margin-left: 1cm;
}

Now we set up the animation with all the attributes we want to know, without starting it, and read the units with the callback function onMorphInit():

var myMorph = new jsMorph('unitDemo',
  {width:'1px', height:'1px', 'border-width':'1px', padding:'1px', 'margin-left':'1px'},
  null,
  null,
  function(initProp, dims){
    var cons = document.getElementById('demo-console');
    for (n in initProp) if (n != 'speed') cons.innerHTML += n+': '+initProp[n].full+'px<br />';
  }
);

I'm the 'demo-console' DIV displaying the results from onMorphInit():

The object 'dims' used in the callback function holds all the units with its pixels per 1 unit. This can be used for more calculations even with other elements or simply to convert one unit to an other (% -> em)...
See more details in the Documentation section.

Conclusion

You probably noticed that even if situations get more complex, the code doesn't get very much longer or complex.
You mostly use only one object 'jsMorph' and can do a lot of variations, sequences, queueing, etc. So it's very 'green' for its recycleability, big variety and the fact that it's adjusting rendering speed depending on duration and motion distance.

It's also very straight forward because you don't have to know where to move from, just where you want to go,... so less calculations and trying to find out what you need to do.

javaScript motion framework - tutorial page