max/gist:4374917

## gistfile1.html
<!doctype html>
<title>Simple Image Zooming for Viso</title>

<script src="http://www.framerjs.com/static/js/framer.js?123"></script>

<script>
  window.onload = function() {
    // Render a simple browser window
    browser = new ImageView({
      x: 20, y: 20,
      height: 916, width: 1226
    });
    browser.image = "http://cl.ly/image/2L3H0W0r1I3E/content";

    // Create a content aread
    content = new View({
      x: 57, y: 130,
      height: 707, width: 1112,
      superView: browser
    });

    // Render a sample logo
    logo = new ImageView({
      x: 533, y: 18,
      height: 48, width: 48,
      superView: content
    });
    logo.image = "http://cl.ly/image/383b1m2l3p0K/content";

    // Render a sample toolbar
    toolbar = new ImageView({
      x: 455, y: 639,
      height: 48, width: 200,
      superView: content
    });
    toolbar.image = "http://cl.ly/image/1E3Q1J2k0l3V/content";

    // Show a sample drop
    drop = new ImageView({
      x: 68, y: -31,
      height: 768, width: 975,
      superView: content
    });

    drop.image = "http://cl.ly/image/3b0d2P1b1Q2s/content";
    drop.scale = 0.7;

    zoomIn = function() {
      logo.animate({
        properties: {
          y: -100,
          opacity: 0
        }
      });

      toolbar.animate({
        properties: {
          y: 739,
          opacity: 0
        }
      });

      drop.animate({
        properties: {
          scale: 1.0
        },
        curve: "spring(60, 20, 100)"
      });
    }

    zoomOut = function() {
      logo.animate({
        properties: {
          y: 18,
          opacity: 1
        }
      });

      toolbar.animate({
        properties: {
          y: 639,
          opacity: 1
        }
      });

      drop.animate({
        properties: {
          scale: 0.7
        },
        curve: "spring(100, 20, 60)"
      });
    };

    // Zoom in and out on clicks
    toggler = utils.toggle(zoomOut, zoomIn);
    drop.on("click", function() {
      zoomer = toggler();
      zoomer();
    });
  };
</script>
	<!doctype html>
	<title>Simple Image Zooming for Viso</title>

	<script src="http://www.framerjs.com/static/js/framer.js?123"></script>

	<script>
	window.onload = function() {
	// Render a simple browser window
	browser = new ImageView({
	x: 20, y: 20,
	height: 916, width: 1226
	});
	browser.image = "http://cl.ly/image/2L3H0W0r1I3E/content";

	// Create a content aread
	content = new View({
	x: 57, y: 130,
	height: 707, width: 1112,
	superView: browser
	});

	// Render a sample logo
	logo = new ImageView({
	x: 533, y: 18,
	height: 48, width: 48,
	superView: content
	});
	logo.image = "http://cl.ly/image/383b1m2l3p0K/content";

	// Render a sample toolbar
	toolbar = new ImageView({
	x: 455, y: 639,
	height: 48, width: 200,
	superView: content
	});
	toolbar.image = "http://cl.ly/image/1E3Q1J2k0l3V/content";

	// Show a sample drop
	drop = new ImageView({
	x: 68, y: -31,
	height: 768, width: 975,
	superView: content
	});

	drop.image = "http://cl.ly/image/3b0d2P1b1Q2s/content";
	drop.scale = 0.7;

	zoomIn = function() {
	logo.animate({
	properties: {
	y: -100,
	opacity: 0
	}
	});

	toolbar.animate({
	properties: {
	y: 739,
	opacity: 0
	}
	});

	drop.animate({
	properties: {
	scale: 1.0
	},
	curve: "spring(60, 20, 100)"
	});
	}

	zoomOut = function() {
	logo.animate({
	properties: {
	y: 18,
	opacity: 1
	}
	});

	toolbar.animate({
	properties: {
	y: 639,
	opacity: 1
	}
	});

	drop.animate({
	properties: {
	scale: 0.7
	},
	curve: "spring(100, 20, 60)"
	});
	};

	// Zoom in and out on clicks
	toggler = utils.toggle(zoomOut, zoomIn);
	drop.on("click", function() {
	zoomer = toggler();
	zoomer();
	});
	};
	</script>