zabesangary/index.html

## index.html
<!doctype html>
<html>
  <body style='display: flex; flex-direction: row; width: 200vw; margin: 0; align-items: center; height: 100vh;'>
    <div id=panel-1 style='background: red; width: 100vw; height: 100px; font-size: 3em; color:
      white;'>1</div>
    <div id=panel-2 style='background: blue; width: 100vw; height: 100px; font-size: 3em; color:
      white;'>2</div>
    <script src=sideways.js></script>
  </body>
</html>

## sideways.js
!function() {
  'use strict';

  /**
  * horizontally scroll to an Element inside an iframe with a container holding its reference.
  *
  * @param {Element || String} target
  * @param {Object} options
  *
  *  options = {
  *    speed: 2000, // time in pixels per second
  *    easing: function(v) { return v; }, // easing equation function
  *    scrollableElement: '#scrolled-content-frame' // the element that limits the height and needs to be to scrolled
  *  }
  */
  function horizontallyScrollToEl(target, options) {
    // Defaults
    options = options || {};
    var easing = options.easing || function(v) { return v; };
    var speed = options.speed || 2000;
    var scrollableElement = window.document.body;

    // Get the right target
    target = typeof target === 'string' ? document.querySelector(target) : target;

    var currentTime = 0;
    // Where I am
    var scrollX = scrollableElement.scrollX || scrollableElement.scrollLeft;
    // Where the target is
    var scrollTargetX = target.offsetLeft || 0;
    if (scrollTargetX === 0) {
      scrollTargetX = target.getClientRects()[0].left;
    }

    var time = Math.max(.1, Math.min(Math.abs(scrollX - scrollTargetX) / speed, .8));

    function tick() {
      currentTime += 1 / 60;

      var p = currentTime / time;
      var t = easing(p);

      if (p < 1) {
        requestAnimationFrame(tick);
      }

      scrollableElement.scrollLeft = p < 1 ? scrollX + ((scrollTargetX - scrollX) * t) : scrollTargetX;
    }

    tick();
  }

  document.getElementById('panel-1').addEventListener('click', function(event) {
    horizontallyScrollToEl('#panel-2', {
      time: 500,
      easing: function(pos) {
        return -(Math.pow((pos - 1), 2) - 1);
      }
    });
  }, false);
}();
	<!doctype html>
	<html>
	<body style='display: flex; flex-direction: row; width: 200vw; margin: 0; align-items: center; height: 100vh;'>
	<div id=panel-1 style='background: red; width: 100vw; height: 100px; font-size: 3em; color:
	white;'>1</div>
	<div id=panel-2 style='background: blue; width: 100vw; height: 100px; font-size: 3em; color:
	white;'>2</div>
	<script src=sideways.js></script>
	</body>
	</html>
	!function() {
	'use strict';

	/**
	* horizontally scroll to an Element inside an iframe with a container holding its reference.
	*
	* @param {Element \|\| String} target
	* @param {Object} options
	*
	* options = {
	* speed: 2000, // time in pixels per second
	* easing: function(v) { return v; }, // easing equation function
	* scrollableElement: '#scrolled-content-frame' // the element that limits the height and needs to be to scrolled
	* }
	*/
	function horizontallyScrollToEl(target, options) {
	// Defaults
	options = options \|\| {};
	var easing = options.easing \|\| function(v) { return v; };
	var speed = options.speed \|\| 2000;
	var scrollableElement = window.document.body;

	// Get the right target
	target = typeof target === 'string' ? document.querySelector(target) : target;

	var currentTime = 0;
	// Where I am
	var scrollX = scrollableElement.scrollX \|\| scrollableElement.scrollLeft;
	// Where the target is
	var scrollTargetX = target.offsetLeft \|\| 0;
	if (scrollTargetX === 0) {
	scrollTargetX = target.getClientRects()[0].left;
	}

	var time = Math.max(.1, Math.min(Math.abs(scrollX - scrollTargetX) / speed, .8));

	function tick() {
	currentTime += 1 / 60;

	var p = currentTime / time;
	var t = easing(p);

	if (p < 1) {
	requestAnimationFrame(tick);
	}

	scrollableElement.scrollLeft = p < 1 ? scrollX + ((scrollTargetX - scrollX) * t) : scrollTargetX;
	}

	tick();
	}

	document.getElementById('panel-1').addEventListener('click', function(event) {
	horizontallyScrollToEl('#panel-2', {
	time: 500,
	easing: function(pos) {
	return -(Math.pow((pos - 1), 2) - 1);
	}
	});
	}, false);
	}();