MojoJS-Animation

Position - show code

                
    MojoJS.createAnimation("#target")
          .animate({left: 0, top: 0},                       0, {id      : "reset"})
          .animate({left: 500      }, false,             1000, {appendTo: "reset"})
          .animate({top: "-=40"    }, "linear",           100)
          .animate({top: "+=40"    }, "linear",           100)
          .animate({top: "-=40"    }, "linear",           150)
          .animate({top: "+=40"    }, "linear",           150)
          .animate({top: "-=10"    }, "linear",           100)
          .animate({top: "+=10"    }, "linear",           100)
          .animate({left: 0, top: 0}, "backInElasticOut", 600, {delay   : 500});

Size - show code

                
    MojoJS.createAnimation("#target")
          .animate({left:       -40,                                        }, 300, "backIn",  false)
          .animate({borderWidth:  1, height: "4em",  width: "4em"           }, 100)
          .animate({borderWidth: 20, height: "0px",  width: "0px"           }, 600, "bounceOut")
          .animate({borderWidth:  1, height: "4em",  width: "4em", left: 500}, 500)
          .animate({borderWidth: 20, height:     0,  width:     0, left:   0}, 800, "exponentialOut", {delay: 200});

Color - show code

                
    MojoJS.createAnimation("#target")
          .animate({left: 500, borderRadius: 50}, 1000)
          .animate({left:   0, borderRadius:  5}, 1000, {delay: 200})

    // start a new animation    
    MojoJS.createAnimation("#target")    
          .animate({width: "50px", height: "50px"}, 200)
          .animate({
              backgroundColor:  "#000",
              borderTopColor:   "#000",
              borderRightColor: "#000",
              borderLeftColor:  "#000",
              borderBottomColor:"#000",
          }, 400, "linear")		
          .animate({backgroundColor:  "rgb(63, 81, 181, 0)"}, 500)	
          .animate({width: 0,         height: 0            }, 200)			
          .animate({borderBottomColor:"#CC3399"            }, 200)
          .animate({borderLeftColor:  "#999900"            }, 200)
          .animate({borderTopColor:   "#FF9933"            }, 200)
          .animate({borderRightColor: "#339999"            }, 200)

Transform - show code

                
    MojoJS.createAnimation("#target")
          .animate({translateX: 100,     rotateX: 360})
          .animate({translateX: 200,     rotateY: 360})
          .animate({translateX: 300,     rotateZ: 360})
          .animate({translateX: "+=100", skewX:   40}, "backOut")
          .animate({translateX: "+=100", skewY:   40}, "backOut")
          .animate({
              translateX: 0, 
              rotateY:    0,
              rotateX:    0,
              rotateZ:    0,
              skewY:      0,
              skewX:      0,   
          }, 1000);

Queue - show code

                
    MojoJS.createAnimation("#target")
          .animate({translateX: "+=150"}, "bounceOut")
          .animate({translateY: "+=50" }, "bounceOut")
          .animate({translateX: "-=150"}, "bounceOut")
          .animate({translateY: "-=50" }, "bounceOut");

Delay - show code

                    
    MojoJS.createAnimation("#target0")
          .animate({translateX: "+=500"}, 500)
          .animate({translateY: "+=50" }, 250)
          .animate({translateX: "-=500"}, 500)
          .animate({translateY: "-=50" }, 250);

    MojoJS.createAnimation("#target1")
          .animate({translateX: "+=500"}, 500, {delay: 150})
          .animate({translateY: "+=50" }, 250)
          .animate({translateX: "-=500"}, 500)
          .animate({translateY: "-=50" }, 250);

    MojoJS.createAnimation("#target2")
          .animate({translateX: "+=500"}, 500, {delay: 300})
          .animate({translateY: "+=50" }, 250)
          .animate({translateX: "-=500"}, 500)
          .animate({translateY: "-=50" }, 250);

    MojoJS.createAnimation("#target3")
          .animate({translateX: "+=500"}, 500, {delay: 450})
          .animate({translateY: "+=50" }, 250)
          .animate({translateX: "-=500"}, 500)
          .animate({translateY: "-=50" }, 250);

Group - show code

                            
    MojoJS.createAnimation("#target0, #target1, #target2, #target3")
          .animate({translateY: "+=50"}, 500)
          .animate({translateY: "-=50"}, 500)
          .animate({translateY: "+=30"}, 400)
          .animate({translateY: "-=30"}, 400)
          .animate({translateY: "+=15"}, 300)
          .animate({translateY: "-=15"}, 300)

Complete - show code

                                
        MojoJS.createAnimation("#target")
              .animate({left: "+=400"}, function() {
                  this.animate({rotate:   "+=180", top   :  "+=50"}, function() {
                      this.animate({left: "-=400"                 }, {id      : "back"});
                      this.animate({top :  "-=50", rotate: "+=180"}, {appendTo: "back"});
                  });
              });