[pull] dev from mrdoob:dev

editor/css/main.css

@@ -343,14 +343,56 @@ hr {
 	top: 36px;
 	left: 0;
 	right: 350px;
-	bottom: 0;
+	bottom: 36px;
 }
 
 	#viewport .Text {
 		text-shadow: 1px 1px 0 rgba(0,0,0,0.25);
 		pointer-events: none;
 	}
 
+#animation {
+	position: absolute;
+	left: 0;
+	right: 350px;
+	bottom: 0;
+	height: 36px;
+	background: #eee;
+	border-top: 1px solid #ccc;
+	display: none;
+	flex-direction: row;
+}
+
+	#animation .Panel {
+		color: #888;
+	}
+
+	#animation input[type="range"] {
+		accent-color: #08f;
+	}
+
+#animation-resizer {
+	position: absolute;
+	left: 0;
+	right: 350px;
+	bottom: 36px;
+	height: 5px;
+	transform: translateY(2.5px);
+	cursor: row-resize;
+	z-index: 2;
+}
+
+	#animation-resizer:hover {
+		background-color: #08f8;
+		transition-property: background-color;
+		transition-delay: 0.1s;
+		transition-duration: 0.2s;
+	}
+
+	#animation-resizer:active {
+		background-color: #08f;
+	}
+
 #script {
 	position: absolute;
 	top: 36px;
@@ -536,7 +578,7 @@ hr {
 	position: absolute;
 	left: calc(50% - 175px);
 	transform: translateX(-50%);
-	bottom: 20px;
+	bottom: 56px;
 	height: 32px;
 	background: #eee;
 	text-align: center;
@@ -621,6 +663,10 @@ hr {
 		display: none;
 	}
 
+	#animation-resizer {
+		display: none;
+	}
+
 	#menubar .menu .options {
 		max-height: calc(100% - 80px);
 	}
@@ -663,6 +709,10 @@ hr {
 		bottom: 330px;
 	}
 
+	#animation {
+		display: none !important;
+	}
+
 }
 
 /* DARK MODE */
@@ -740,6 +790,19 @@ hr {
 			border: solid 1px #5A5A5A;
 		}
 
+	#animation {
+		background-color: #111;
+		border-top: 1px solid #222;
+	}
+
+		#animation .Panel {
+			border-bottom: 1px solid #222;
+		}
+
+		#animation .timeline-container {
+			background: rgba(255, 255, 255, 0.05);
+		}
+
 	#tabs {
 		background-color: #1b1b1b;
 		border-top: 1px solid #222;

editor/index.html

@@ -69,6 +69,8 @@
 			import { Sidebar } from './js/Sidebar.js';
 			import { Menubar } from './js/Menubar.js';
 			import { Resizer } from './js/Resizer.js';
+			import { AnimationResizer } from './js/AnimationResizer.js';
+			import { Animation } from './js/Animation.js';
 
 			window.URL = window.URL || window.webkitURL;
 			window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
@@ -101,6 +103,35 @@
 			const resizer = new Resizer( editor );
 			document.body.appendChild( resizer.dom );
 
+			const animation = new Animation( editor );
+			document.body.appendChild( animation.dom );
+
+			const animationResizer = new AnimationResizer( editor );
+			document.body.appendChild( animationResizer.dom );
+
+			editor.signals.animationPanelChanged.add( function ( height ) {
+
+				const visible = height !== false;
+
+				viewport.dom.classList.toggle( 'with-animation', visible );
+				toolbar.dom.classList.toggle( 'with-animation', visible );
+
+				if ( visible ) {
+
+					viewport.dom.style.bottom = height + 'px';
+					toolbar.dom.style.bottom = ( height + 20 ) + 'px';
+
+				} else {
+
+					viewport.dom.style.bottom = '';
+					toolbar.dom.style.bottom = '';
+
+				}
+
+				editor.signals.windowResize.dispatch();
+
+			} );
+
 			//
 
 			editor.storage.init( function () {