willbailey · August 29, 2015 14:16
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>Tap to Zoom</title>
  <!-- include rebound and the exported code -->
  <script type="text/javascript" src="http://facebook.github.io/rebound-js/rebound.min.js"></script>
  <script type="text/javascript" src="origami_code_export.js"></script>

  <!-- write some simple css to layout your layers -->
  <style type="text/css">
    #container {
      position: relative;
      width: 370px;
      height: 667px;
      background: #000;
      overflow:hidden;
      margin: auto;
    }

    #photo {
      position: absolute;
      height: 667px;
      width: 1000px;
      background-size: 1000px 667px;
      left: 50%;
      margin-left: -500px;
      background-image: url(Photo.jpg);
    }

    #chrome {
      position: absolute;
      width: 375px;
      height: 667px;
      background-size: 375px 667px;
      background-image: url(Chrome.png);
    }
  </style>

  <script type="text/javascript">
    // Plugin your html to the sample code when the document is loaded and add
    // your UI event handlers.
    document.addEventListener('DOMContentLoaded', function() {
      // hook up the elements in my sample html
      layers.photo.domElement = document.getElementById('photo');
      layers.chrome.domElement = document.getElementById('chrome');

      // add a click handler
      var isZoomedOut = false;
      document.getElementById('container').addEventListener(
        'click',
        function() {
          isZoomedOut = !isZoomedOut;
          photoIsZoomedOut(isZoomedOut);
        });
    })
  </script>

 </head>
 <body>
  <div id="container">
    <div id="photo"></div>
    <div id="chrome"></div>
  </div>
 </body>
 </html>
diff --git a/origami_code_export.js b/origami_code_export.js
 var springSystem = new rebound.SpringSystem();

 springSystem.addListener({
  onAfterIntegrate: function(springSystem) {
    updateLayers();
  }
 });

 // photoIsZoomedOut transition

 var photoIsZoomedOutSpring = springSystem
  .createSpringWithBouncinessAndSpeed(5, 10)
  .addListener({
    onSpringUpdate: function(spring) {
      setPhotoIsZoomedOutProgress(spring.getCurrentValue());
    }
  });

 var photoIsZoomedOut = function(on) {
  photoIsZoomedOutSpring.setEndValue(on ? 1 : 0);
 };

 var setPhotoIsZoomedOutProgress = function(progress) {
  var scale = transition(progress, 1, 0.37);
  layers.photo.scale = scale;

  var opacity = transition(progress, 1, 0);
  layers.chrome.opacity = opacity;
 };

 // Hook up variables to dom elements here

 var layers = {
  photo: {
    domElement: null
  },

  chrome: {
    domElement: null
  }
 };

 // Utilities

 var transition = function(progress, startValue, endValue) {
  return rebound.MathUtil.mapValueInRange(progress, 0, 1, startValue, endValue);
 };

 var updateLayers = function() {
  for (var name in layers) {
    var layer = layers[name];
    var el = layer.domElement;
    el.style.width = layer.width + 'px';
    el.style.height = layer.height + 'px';
    el.style.opacity = layer.opacity;
    transform(el, layer.xPosition, layer.yPosition, layer.scale, layer.zRotation);
  }
 };

 var transform = function(el, xlatX, xlatY, scale, rot) {
  xlatX = typeof xlatX === 'undefined' ? 0 : xlatX;
  xlatY = typeof xlatY === 'undefined' ? 0 : xlatY;
  scale = typeof scale === 'undefined' ? 1 : scale;
  rot   = typeof rot === 'undefined' ? 0 : rot;
  var xfrm =
    'translate3d(' + xlatX + 'px, ' + xlatY + 'px, 0px) ' +
    'scale3d(' + scale + ', ' + scale + ', 1) ' +
    'rotate(' + rot + 'deg)';
  el.style.mozTransform = el.style.msTransform =
  el.style.webkitTransform = el.style.transform = xfrm;
 };
	<!DOCTYPE html>
	<html>
	<head>
	<title>Tap to Zoom</title>
	<!-- include rebound and the exported code -->
	<script type="text/javascript" src="http://facebook.github.io/rebound-js/rebound.min.js"></script>
	<script type="text/javascript" src="origami_code_export.js"></script>

	<!-- write some simple css to layout your layers -->
	<style type="text/css">
	#container {
	position: relative;
	width: 370px;
	height: 667px;
	background: #000;
	overflow:hidden;
	margin: auto;
	}

	#photo {
	position: absolute;
	height: 667px;
	width: 1000px;
	background-size: 1000px 667px;
	left: 50%;
	margin-left: -500px;
	background-image: url(Photo.jpg);
	}

	#chrome {
	position: absolute;
	width: 375px;
	height: 667px;
	background-size: 375px 667px;
	background-image: url(Chrome.png);
	}
	</style>

	<script type="text/javascript">
	// Plugin your html to the sample code when the document is loaded and add
	// your UI event handlers.
	document.addEventListener('DOMContentLoaded', function() {
	// hook up the elements in my sample html
	layers.photo.domElement = document.getElementById('photo');
	layers.chrome.domElement = document.getElementById('chrome');

	// add a click handler
	var isZoomedOut = false;
	document.getElementById('container').addEventListener(
	'click',
	function() {
	isZoomedOut = !isZoomedOut;
	photoIsZoomedOut(isZoomedOut);
	});
	})
	</script>

	</head>
	<body>
	<div id="container">
	<div id="photo"></div>
	<div id="chrome"></div>
	</div>
	</body>
	</html>
	var springSystem = new rebound.SpringSystem();

	springSystem.addListener({
	onAfterIntegrate: function(springSystem) {
	updateLayers();
	}
	});

	// photoIsZoomedOut transition

	var photoIsZoomedOutSpring = springSystem
	.createSpringWithBouncinessAndSpeed(5, 10)
	.addListener({
	onSpringUpdate: function(spring) {
	setPhotoIsZoomedOutProgress(spring.getCurrentValue());
	}
	});

	var photoIsZoomedOut = function(on) {
	photoIsZoomedOutSpring.setEndValue(on ? 1 : 0);
	};

	var setPhotoIsZoomedOutProgress = function(progress) {
	var scale = transition(progress, 1, 0.37);
	layers.photo.scale = scale;

	var opacity = transition(progress, 1, 0);
	layers.chrome.opacity = opacity;
	};

	// Hook up variables to dom elements here

	var layers = {
	photo: {
	domElement: null
	},

	chrome: {
	domElement: null
	}
	};

	// Utilities

	var transition = function(progress, startValue, endValue) {
	return rebound.MathUtil.mapValueInRange(progress, 0, 1, startValue, endValue);
	};

	var updateLayers = function() {
	for (var name in layers) {
	var layer = layers[name];
	var el = layer.domElement;
	el.style.width = layer.width + 'px';
	el.style.height = layer.height + 'px';
	el.style.opacity = layer.opacity;
	transform(el, layer.xPosition, layer.yPosition, layer.scale, layer.zRotation);
	}
	};

	var transform = function(el, xlatX, xlatY, scale, rot) {
	xlatX = typeof xlatX === 'undefined' ? 0 : xlatX;
	xlatY = typeof xlatY === 'undefined' ? 0 : xlatY;
	scale = typeof scale === 'undefined' ? 1 : scale;
	rot = typeof rot === 'undefined' ? 0 : rot;
	var xfrm =
	'translate3d(' + xlatX + 'px, ' + xlatY + 'px, 0px) ' +
	'scale3d(' + scale + ', ' + scale + ', 1) ' +
	'rotate(' + rot + 'deg)';
	el.style.mozTransform = el.style.msTransform =
	el.style.webkitTransform = el.style.transform = xfrm;
	};