Jasme Library

[Master_script_maker]

I have created a motion effects library and aptly named it Javascript Motion Effects Library or the Jasme Library. I created it mainly to allow me to tween as I can in flash. Jasme works in firefox 3, safari, IE 7, and most likely all other modern browsers. Jasme can tween almost all variables of an object* and is very easy to use. When multiple actions are placed on the object, Jasme goes through a queue. You may use the library as long as you keep the label intact.Example1 Example2 Example3

*I am working on color and background-color for version 0.9

Edit: Fixed a bug where the ease functions would last only half of the duration

Jasme:

function tweener(duration, id, end, what) {
  /******************************************/
  /*Javascript Motion Effects Library v. 0.85*/
  /********(c) Master Script Maker***********/
  /********www.masterscriptmaker.co.cc*******/
  /********Do not remove this label.*********/
  /******************************************/
    
  this.id=id;
  this.e=end;
  this.dur=duration;
  this.l=this.e/100;
  this.n=this.dur*1000/50;
  this.i=this.l*2.5/this.n/2;
  this.x=0;
  this.t=setTimeout(function() {return false;}, 10000);
  this.c=false;
  this.f=arguments[4]||function() {return false;};
  this.d=[];
  this.p=false;
  this.r=false;
  this.w=[];
  
  switch(what) {
    case "height":
    case "width":
    case "top":
    case "opacity":
    case "color":
    case "left":
      this.w[0]="style";
      break;
    default:
      this.w[0]=false;
  }
  this.w[1]=what;
}
tweener.prototype = {
  get: function() {
    if(!this.w[0]) {
      return document.getElementById(this.id);
    } else {
      return document.getElementById(this.id).style;
    }
  },
  
  changeDuration: function(d) {
    this.dur=d;
    this.n=this.dur*1000/50;
    this.i=this.l*2.5/this.n/2;
  },
  
  ease: function (h) {
    clearTimeout(this.t);
    if(h=="slide") {
      this.slide();
      return;
    }
    if(this.r) {
      var y;
      if(h=="in") {
        y=(100-(-16*Math.pow(2.5-this.x, 2)+80*(2.5-this.x)));
      } else {
        y=(-16*Math.pow(this.x, 2)+80*this.x);
      }
    } else {
      if(h=="in") {
        y=(-16*Math.pow(this.x, 2)+80*this.x);
      } else {
        y=(100-(-16*Math.pow(2.5-this.x, 2)+80*(2.5-this.x)));
      }
    }
    y*=this.l;
    if(this.w[1]=="opacity") {
      this.get().filter="alpha(opacity="+Math.round(y)+")";
      y=y/100;
    }
    if(this.w[1]=="color") {
      y=y>255?255:y;
      var j=Math.round(y).toString(16);
      j=j.length<2?"0"+j:j;
      y="#"+j+j+j;
    } 
    this.get()[this.w[1]]=y;
    if(this.r) {
      if(this.x>0) {
        this.x-=this.i;
        this.t=setTimeout((function(that) {return function() {that.ease(h);};})(this), 50);
        return;
      }
    } else {
      if(this.x<2.5) {
        this.x+=this.i;
        this.t=setTimeout((function(that) {return function() {that.ease(h);};})(this), 50);
        return;
      }
    }
    this.done();
  },
  
  slide: function() {
    clearTimeout(this.t);
    y=this.x*(this.l*100/this.n);
    if(this.r) {
      y=this.l*100-this.x*(this.l*100/this.n);
    }
    if(this.w[1]=="opacity") {
      this.get().filter="alpha(opacity="+y+")";
      y=y/100;
    }
    if(this.w[1]=="color") {
      y=y>255?255:y;
      var h=Math.round(y).toString(16);
      h=h.length<2?"0"+h:h;
      y="#"+h+h+h;
    } 
    this.get()[this.w[1]]=y;
    if(this.x<this.n) {
      this.x++;
      this.t=setTimeout((function(that) {return function() {that.slide();};})(this), 50);
    } else {
      this.done();
    }
  },
  
  go: function(how) {
    var a;
    switch(how) {
      case "in":
        a="in";
        break;
      case "out":
        a="out";
        break;
      case "none":
        a="slide";
        break;
    }
    var arg=arguments[1]||false;
    this.d.push([a, arg]);
    this.start();
  },
  
  stop: function() {
    clearTimeout(this.t);
    this.p=false;
  },
  
  start: function() {
    if(this.c) {
      this.p=true;
      this.ease(this.c);
    } else {
      if(this.d[0]&&!this.p) {
        this.r=this.d[0][1];
        this.c=this.d.shift()[0];
        if(this.r&&this.c!="slide") {
          this.x=2.5;
        }
        this.p=true;
        this.ease(this.c);
      }
    }
  },
  
  done: function() {
    this.f();
    this.p=false;
    this.x=0;
    this.c=false;
    this.r=false;
    this.t=setTimeout((function(that) {return function() {that.start();};})(this), 200);
  }
};

How to use:

var tween=new tweener(duration in seconds, id, end value, what to change(can be anything accessible by getElementById)[, function to run on completion]);

[magicyte]

Great job! How long had it taken you?

[Master_script_maker]

It took me about two days straight.

[magicyte]

Wow. When you say straight, you mean that you kept at it for 2 days, right? That's some pretty good code there.

[Master_script_maker]

Thanks. Yes, I do mean I kept at it for 2 days.

[Master_script_maker]

does anyone have any feedback?

[Nile]

I can't tell, does it go slower then get faster, then at the end get slower?

Also, make some more, maybe have divs fly across the screen?

[Master_script_maker]

Okay I added two more examples. Be sure to change the duration if you can't see the easing. Example2* Example3
*(Example2 uses EaseIn for both transitions)

[Master_script_maker]

Updated to version .85. Fixed a bug where ease function would last half of the specified duration.