dojo.fx.chain / dojo.fx.combine Examples

Authors:Peter Higgins, Nikolai Onken, Marcus Reimann, Jared Jurkiewicz

This page is a landing point for demonstrating complex animations of DOM nodes built on uses of the chain and combine functions to perform complex animations with a single call to ‘play().

Examples

Example 1: Demonstration of combining three chained animations

This animation changes position, size, opacity, and color in a single, combined, animation

dojo.require("dijit.form.Button");
dojo.require("dojo.fx");
dojo.require("dojo.fx.easing");
function basicCombine(){
   // Function linked to the button to trigger the effects.
   function combineIt(){

      // Fade the node out, then in
      var displayAnim = dojo.fx.chain([
        dojo.fadeOut({node: "basicNode1", duration: 1000}),
        dojo.fadeIn({node: "basicNode1", duration: 1000})
      ]);

      // Move the node while it's fading out and in.
      var moveAnim = dojo.fx.chain([
        dojo.animateProperty({node: "basicNode1",
          properties: {
            marginLeft: {start: 0, end: 400, unit: "px"}
          },
          duration: 1000,
          easing: dojo.fx.easing.backOut
        }),
        dojo.animateProperty({node: "basicNode1",
          properties: {
            marginLeft: {start: 400, end: 0, unit: "px"}
          },
          duration: 1000,
          easing: dojo.fx.easing.backOut
        })
      ]);

      // Resize and change color of the node as it moves too.
      var resizeColorAnim = dojo.fx.chain([
        dojo.animateProperty({node: "basicNode1",
          properties: {
            width: {start: 100, end: 200, unit: "px"},
            height: {start: 100, end: 200, unit: "px"},
            backgroundColor: {start: "red", end: "green"}
          },
          duration: 1000
        }),
        dojo.animateProperty({node: "basicNode1",
          properties: {
            width: {start: 200, end: 100, unit: "px"},
            height: {start: 200, end: 100, unit: "px"},
            backgroundColor: {start: "green", end: "red"}
          },
          duration: 1000
        })
      ]);


      // Combine the three sets of animations into one that runs in parallel.
      var combinedAnim = dojo.fx.combine([displayAnim, moveAnim, resizeColorAnim]);

      // Set it so that every time it ends, it runs again. (And connect the stop action to it!)
      var handle = dojo.connect(combinedAnim, "onEnd", function(){combineIt();});
      dojo.connect(dijit.byId("endButton"), "onClick", function(){dojo.disconnect(handle);});

      // Run it!
      combinedAnim.play();
   }
   dojo.connect(dijit.byId("startButton"), "onClick", combineIt);
}
dojo.ready(basicCombine);
<button data-dojo-type="dijit.form.Button" id="startButton">Start the complex loop!</button>
<button data-dojo-type="dijit.form.Button" id="endButton">End the complex loop!</button>
<div id="basicNode1" style="width: 100px; height: 100px; background-color: red;"></div>
Error in the documentation? Can’t find what you are looking for? Let us know!