Hoistway doors are required

demo/index.html

@@ -92,6 +92,14 @@ <h1>Elevator.js</h1>
             </div>
         </div>
 
+        <div id="door-left" style="position: fixed; top: 0; bottom: 0; left: -52vw; width: 50vw; content-sizing: content-box; border: 3px solid #666; background-color: #aaa;">
+            <div style="position: absolute; top: 0; height: 100vh; left: 16vw; right: 16vw; border-left: 3px solid #666; border-right: 3px solid #666;">
+            </div>
+        </div>
+        <div id="door-right" style="position: fixed; top: 0; bottom:0; right: -52vw; width: 50vw; content-sizing: content-box; border: 3px solid #666; background-color: #aaa;">
+            <div style="position: absolute; top: 0; height: 100vh; left: 16vw; right: 16vw; border-left: 3px solid #666; border-right: 3px solid #666;">
+        </div>
+
         <a class="github-link" href="https://github.com/tholman/elevator.js" target="_blank">
             <img src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
         </a>
@@ -102,6 +110,7 @@ <h1>Elevator.js</h1>
             var elementButton = document.querySelector('.elevator');
             var elevator = new Elevator({
                 element: elementButton,
+                doors: [document.getElementById('door-left'), document.getElementById('door-right')],
                 mainAudio: './music/elevator.mp3', // Music from http://www.bensound.com/
                 endAudio:  './music/ding.mp3'
             });

elevator.js

@@ -14,10 +14,12 @@ var Elevator = function(options) {
 
     // Elements
     var body = null;
+    var doors = null;
 
     // Scroll vars
     var animation = null;
     var duration = null; // ms
+    var doorsDurationRatio = null;
     var customDuration = false;
     var startTime = null;
     var startPosition = null;
@@ -81,14 +83,49 @@ var Elevator = function(options) {
         }
 
         var timeSoFar = time - startTime;
-        var easedPosition = easeInOutQuad(
-            timeSoFar,
-            startPosition,
-            endPosition - startPosition,
-            duration
-        );
+
+        var easedPosition = startPosition, doorsPosition = -1;
+
+        if (!doors) {
+            // No doors - keep your limbs inside the car at all times!
+            easedPosition = easeInOutQuad(
+                timeSoFar,
+                startPosition,
+                endPosition - startPosition,
+                duration
+            );
+        } else if (timeSoFar < doorsDurationRatio * duration) {
+            // Close doors
+            doorsPosition = easeInOutQuad(
+                timeSoFar,
+                -52,
+                51,
+                doorsDurationRatio * duration
+            );
+        } else if(timeSoFar < (1 - doorsDurationRatio) * duration) {
+            // Safe operation, doors closed
+            easedPosition = easeInOutQuad(
+                timeSoFar - doorsDurationRatio * duration,
+                startPosition,
+                endPosition - startPosition,
+                duration * (1 - 2 * doorsDurationRatio)
+            );
+        } else {
+            // Open doors
+            easedPosition = endPosition;
+            doorsPosition = easeInOutQuad(
+                timeSoFar - (1 - doorsDurationRatio) * duration,
+                -1,
+                -51,
+                doorsDurationRatio * duration
+            );
+        }
 
         window.scrollTo(0, easedPosition);
+        if (doors) {
+            doors[0].style.left = doorsPosition + 'vw';
+            doors[1].style.right = doorsPosition + 'vw';
+        }
 
         if (timeSoFar < duration) {
             animation = requestAnimationFrame(animateLoop);
@@ -121,7 +158,8 @@ var Elevator = function(options) {
 
         // No custom duration set, so we travel at pixels per millisecond. (0.75px per ms)
         if (!customDuration) {
-            duration = Math.abs(endPosition - startPosition) * 1.5;
+            duration = Math.abs(endPosition - startPosition) * 1.5 + 1000;
+            doorsDurationRatio = 500 / duration;
         }
 
         requestAnimationFrame(animateLoop);
@@ -215,6 +253,7 @@ var Elevator = function(options) {
 
         var defaults = {
             duration: undefined,
+            doorsDurationRatio: 0.1,
             mainAudio: false,
             endAudio: false,
             preloadAudio: true,
@@ -229,6 +268,14 @@ var Elevator = function(options) {
             bindElevateToElement(_options.element);
         }
 
+        if (_options.doors) {
+            doors = _options.doors;
+        }
+
+        if (_options.doorsDurationRatio) {
+            doorsDurationRatio = _options.doorsDurationRatio;
+        }
+
         if (_options.duration) {
             customDuration = true;
             duration = _options.duration;