Improving the overall intro animation

website/source/javascripts/app/Engine.Polygon.js

@@ -9,15 +9,21 @@ Engine.Polygon = function(a, b, c, color){
 	this.c = c;
 
 	this.color = color;
-	this.maxS = this.color.s;
 	this.maxL = this.color.l;
+	this.strokeColor = {
+		h: this.color.h,
+		s: 0,
+		l: 100,
+		a: 1
+	};
 
 	// this.color.s = 0;
 	this.color.l = 0;
 
-	this.start = Date.now() / 1000;
-
 	this.fillStyle = this.hslaTemplate.substitute(this.color);
+	this.strokeStyle = this.hslaTemplate.substitute({
+
+	});
 
 	// this.up = !!Engine.getRandomInt(0,1);
 	// this.hueShiftSpeed = 15;
@@ -32,28 +38,33 @@ Engine.Polygon.prototype = {
 	hslaTemplate: 'hsla({h},{s}%,{l}%,{a})',
 
 	hueShiftSpeed: 20,
-	duration: 3,
-	delay: 2.5,
+	duration: 2,
+	delay: 0,
+	start: 0,
 
 	// Determine color fill?
 	update: function(engine){
 		var delta;
 
-		delta = engine.now - this.start;
+		this.start += engine.tick;
+
+		delta = this.start;
 
 		if (
 			delta > this.delay &&
 			delta < this.delay + this.duration + 1 &&
 			this.color.l < this.maxL
 		) {
-			// this.color.s = this.maxS * delta / this.duration;
 			this.color.l = this.maxL * (delta - this.delay) / this.duration;
 
+			this.strokeColor.s = this.color.s * (delta - this.delay) / this.duration;
+			this.strokeColor.l = (this.maxL - 100) * (delta - this.delay) / this.duration + 100;
+
 			if (this.color.l > this.maxL) {
-				// this.color.s = this.maxS;
 				this.color.l = this.maxL;
 			}
 
+			this.strokeStyle = this.hslaTemplate.substitute(this.strokeColor);
 			this.fillStyle = this.hslaTemplate.substitute(this.color);
 		}
 	},
@@ -75,7 +86,7 @@ Engine.Polygon.prototype = {
 		ctx.closePath();
 		ctx.fillStyle   = this.fillStyle;
 		ctx.lineWidth = 0.25 * scale;
-		ctx.strokeStyle = this.fillStyle;
+		ctx.strokeStyle = this.strokeStyle;
 		ctx.fill();
 		ctx.stroke();
 	}

website/source/javascripts/app/Engine.js

@@ -66,7 +66,6 @@ Engine = Base.extend({
 		image.style.webkitTransform = 'translate3d(0,0,0) scale(1)';
 		image.style.opacity = 1;
 
-
 		el = document.body;
 
 		setTimeout(function() {
@@ -119,21 +118,24 @@ Engine = Base.extend({
 	render: function(){
 		var tick;
 
-		this.context.clearRect(
-			0,
-			0,
-			this.width  * this.scale,
-			this.height * this.scale
-		);
+		if (window.scrollY > 700) {
+			window.requestAnimationFrame(this.render);
+			return;
+		}
+
+		// this.context.clearRect(
+		//     0,
+		//     0,
+		//     this.width  * this.scale,
+		//     this.height * this.scale
+		// );
+
+		// Potentially more performant than clearRect
+		this.canvas.width = this.width * this.scale;
+		this.canvas.height = 700 * this.scale;
 
 		this.now = Date.now() / 1000;
 
-		// if (this.slow) {
-		//     this.speed = Math.max(0.1, this.speed - this.accel);
-		// } else {
-		//     this.speed = Math.min(1, this.speed + this.accel);
-		// }
-
 		tick = Math.min(this.now - this.last, 0.017);
 		this.tick = this.speed * tick;
 
@@ -141,7 +143,6 @@ Engine = Base.extend({
 		this.tick = tick;
 
 		if (this.now - this.start > 3) {
-			// this.slow = true;
 			this.renderTessellation(this.now);
 		}
 
@@ -183,8 +184,6 @@ Engine = Base.extend({
 
 		this.canvas.width  = this.width  * this.scale;
 		this.canvas.height = this.height * this.scale;
-
-		window.scrollTo(0, 0);
 	},
 
 	renderStarfield: function(){

website/source/stylesheets/_jumbotron.less

@@ -27,6 +27,7 @@
     left:0;
     width:100%;
     height:100%;
+    /* background-color:#000; */
     opacity:0;
 
     -webkit-transition:opacity 2s ease-out;
@@ -109,16 +110,30 @@
   -webkit-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scaleX(1.26);
 }
 
+.state-one.state-two.state-three.state-four .white-block {
+  background-color:rgba(255,255,255,1);
+}
+
 .white-block {
   position:absolute;
   width:68px;
   height:68px;
-  background-color:rgba(255,0,0,0.3);
+
+  -webkit-box-sizing:border-box;
+     -moz-box-sizing:border-box;
+          box-sizing:border-box;
+
+  /* background-color:rgba(255,0,0,0.3); */
   background-color:#fff;
+  background-color:rgba(255,255,255,0);
+
+  border:1px solid #fff;
 }
 
 .state-one .white-block {
-  -webkit-transition:-webkit-transform 300ms ease-out;
+  -webkit-transition:
+    -webkit-transform 300ms ease-out,
+    background-color  300ms ease-out;
 }
 
 .block-one,
@@ -151,7 +166,7 @@
 
 .block-four {
   -webkit-transform-origin:0 0;
-  -webkit-transform:translate3d(73px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
+  -webkit-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
 }
 
 .state-one .block-one {

website/source/stylesheets/main.css

@@ -596,6 +596,7 @@ body.page-home #footer {
   left: 0;
   width: 100%;
   height: 100%;
+  /* background-color:#000; */
   opacity: 0;
   -webkit-transition: opacity 2s ease-out;
   -moz-transition: opacity 2s ease-out;
@@ -655,15 +656,23 @@ body.page-home #footer {
 .state-one.state-two.state-three.state-four .animated-logo {
   -webkit-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scaleX(1.26);
 }
+.state-one.state-two.state-three.state-four .white-block {
+  background-color: #ffffff;
+}
 .white-block {
   position: absolute;
   width: 68px;
   height: 68px;
-  background-color: rgba(255, 0, 0, 0.3);
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  /* background-color:rgba(255,0,0,0.3); */
   background-color: #fff;
+  background-color: rgba(255, 255, 255, 0);
+  border: 1px solid #fff;
 }
 .state-one .white-block {
-  -webkit-transition: -webkit-transform 300ms ease-out;
+  -webkit-transition: -webkit-transform 300ms ease-out, background-color 300ms ease-out;
 }
 .block-one,
 .block-two,
@@ -690,7 +699,7 @@ body.page-home #footer {
 }
 .block-four {
   -webkit-transform-origin: 0 0;
-  -webkit-transform: translate3d(73px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
+  -webkit-transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
 }
 .state-one .block-one {
   opacity: 1;