Animation improvements, added Chainable

website/source/javascripts/app/Engine.js

@@ -1,6 +1,11 @@
 /* jshint unused: false */
 /* global console */
-(function(Base, Vector, Logo){
+(function(
+	Base,
+	Vector,
+	Logo,
+	Chainable
+){
 
 var sqrt, pow, Engine;
 
@@ -29,8 +34,7 @@ Engine = Base.extend({
 	_deferredParticles: [],
 	_deferredShapes: [],
 
-	constructor: function(canvas, bg){
+	constructor: function(canvas, image){
-		var image, el;
 		if (typeof canvas === 'string') {
 			this.canvas = document.getElementById(canvas);
 		} else {
@@ -47,7 +51,7 @@ Engine = Base.extend({
 		this.resize();
 		window.addEventListener('resize', this.resize, false);
 
-		this.setupStarfield(bg);
+		this.setupStarfield();
 		this.setupTessellation();
 
 		this.last = Date.now() / 1000;
@@ -59,24 +63,38 @@ Engine = Base.extend({
 
 		this.canvas.style.opacity = 1;
 
-		image = document.getElementById(bg);
+		this.cssAnimations(
+			document.getElementById(image)
+		);
+	},
+
+	cssAnimations: function(image){
+		var parent = this.canvas.parentNode;
+
 		image.style.webkitTransform = 'translate3d(0,0,0) scale(1)';
 		image.style.opacity = 1;
 
-		el = document.body;
+		new Chainable()
-
+			.wait(3000)
-		setTimeout(function() {
+			.then(function(){
-			el.className += ' state-one';
+				parent.className += ' state-one';
-			setTimeout(function() {
+			})
-				el.className += ' state-two';
+			.wait(150)
-				setTimeout(function() {
+			.then(function(){
-					el.className += ' state-three';
+				parent.className += ' state-two';
-					setTimeout(function() {
+			})
-						el.className += ' state-four';
+			.wait(150)
-					}, 550);
+			.then(function(){
-				}, 200);
+				parent.className += ' state-three';
-			}, 200);
+			})
-		}, 4000);
+			.wait(500)
+			.then(function(){
+				parent.className += ' state-four';
+			})
+			.wait(100)
+			.then(function(){
+				this.showShapes = true;
+			}, this);
 	},
 
 	setupStarfield: function(){
@@ -98,8 +116,7 @@ Engine = Base.extend({
 	},
 
 	render: function(){
-		var scale = this.scale,
+		var scale = this.scale;
-			tick;
 
 		if (window.scrollY > 700) {
 			window.requestAnimationFrame(this.render);
@@ -115,12 +132,11 @@ Engine = Base.extend({
 
 		this.now = Date.now() / 1000;
 
-		tick = Math.min(this.now - this.last, 0.017);
+		this.tick = Math.min(this.now - this.last, 0.017);
 
 		this.renderStarfield(this.now);
-		this.tick = tick;
 
-		if (this.now - this.start > 5) {
+		if (this.showShapes) {
 			this.renderTessellation(this.now);
 		}
 
@@ -222,4 +238,9 @@ Engine.clone = function(ref) {
 
 window.Engine = Engine;
 
-})(window.Base, window.Vector, window.Logo);
+})(
+	window.Base,
+	window.Vector,
+	window.Logo,
+	window.Chainable
+);

website/source/javascripts/lib/Chainable.js

@@ -0,0 +1,74 @@
+(function(){
+
+var Chainable = function(){
+	this._chain = [];
+	this._cycle = this._cycle.bind(this);
+};
+
+Chainable.prototype._running = false;
+
+Chainable.prototype.start = function(){
+	if (this._running || !this._chain.length) {
+		return this;
+	}
+	this._running = true;
+	return this._cycle();
+};
+
+Chainable.prototype.reset = function(){
+	if (!this._running) {
+		return this;
+	}
+	clearTimeout(this._timer);
+	this._timer = null;
+	this._chain.length = 0;
+	this._running = false;
+	return this;
+};
+
+Chainable.prototype._cycle = function(){
+	var current;
+	if (!this._chain.length) {
+		return this.reset();
+	}
+
+	current = this._chain.shift();
+
+	if (current.type === 'function') {
+		current.func.apply(current.scope, current.args);
+		current = null;
+		return this._cycle();
+	}
+	if (current.type === 'wait') {
+		clearTimeout(this._timer);
+		this._timer = setTimeout(this._cycle, current.time || 0);
+		current = null;
+	}
+
+	return this;
+};
+
+Chainable.prototype.then = Chainable.prototype.exec = function(func, scope, args){
+	this._chain.push({
+		type  : 'function',
+
+		func  : func,
+		scope : scope || window,
+		args  : args  || []
+	});
+
+	return this.start();
+};
+
+Chainable.prototype.wait = function(time){
+	this._chain.push({
+		type : 'wait',
+		time : time
+	});
+
+	return this.start();
+};
+
+window.Chainable = Chainable;
+
+})();

website/source/layouts/_footer.erb

@@ -25,6 +25,7 @@
 <script type="text/javascript" src="/javascripts/lib/Base.js"></script>
 <script type="text/javascript" src="/javascripts/lib/String.substitute.js"></script>
 <script type="text/javascript" src="/javascripts/lib/Vector.js"></script>
+<script type="text/javascript" src="/javascripts/lib/Chainable.js"></script>
 <script type="text/javascript" src="/javascripts/app/Logo.js"></script>
 <script type="text/javascript" src="/javascripts/app/Shapes.js"></script>
 <script type="text/javascript" src="/javascripts/app/Engine.js"></script>

website/source/stylesheets/_jumbotron.less

@@ -101,13 +101,19 @@
   opacity:1;
 
   -webkit-transition:-webkit-transform 300ms ease-in-out;
-  -webkit-transform-origin:100% 0;
+
+  -webkit-transform-origin:50% 50%;
   -webkit-transform-style:preserve-3d;
-  -webkit-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scaleX(1);
+  -webkit-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
+}
+
+.state-one .animated-logo {
+  -webkit-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
 }
 
 .state-one.state-two.state-three.state-four .animated-logo {
-  -webkit-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scaleX(1.26);
+  -webkit-transform-origin:100% 0;
+  -webkit-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
 }
 
 .state-one.state-two.state-three.state-four .white-block {
@@ -128,10 +134,9 @@
   background-color:rgba(255,255,255,0);
 
   border:1px solid #fff;
-}
 
-.state-one .white-block {
   -webkit-transition:
+    opacity           300ms ease-out,
     -webkit-transform 300ms ease-out,
     background-color  300ms ease-out;
 }
@@ -149,19 +154,21 @@
 
 .block-one {
   opacity:0;
+  -webkit-transform:translate3d(0,0,0) scale(0,0);
 }
 
 .block-two {
   opacity:0;
   top:0;
   left:0;
-  -webkit-transform:translate3d(0,0,0) scaleX(1);
+  -webkit-transform:translate3d(0,0,0) scale(0,0);
 }
 
 .block-three {
   opacity:0;
   top:72px;
-  -webkit-transform:translate3d(0,0,0) scaleY(1);
+  /* -webkit-transform:translate3d(0,-100px,0) scaleY(1); */
+  -webkit-transform:translate3d(0,0,0) scale(0,0);
 }
 
 .block-four {
@@ -169,22 +176,25 @@
   -webkit-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
 }
 
-.state-one .block-one {
+.state-one.state-two .block-one {
   opacity:1;
-  -webkit-animation:PopIn 300ms 1 ease-in;
+  -webkit-transform:translate3d(0,0,0) scale(1,1);
-  animation:PopIn 300ms 1 ease-in;
+  /* -webkit-animation:PopIn 300ms 1 ease-in; */
+  /* animation:PopIn 300ms 1 ease-in; */
 }
 
-.state-one.state-two .block-two {
+.state-one .block-two {
   opacity:1;
-  -webkit-animation:PopIn 300ms 1 ease-in;
+  -webkit-transform:translate3d(0,0,0) scale(1,1);
-  animation:PopIn 300ms 1 ease-in;
+  /* -webkit-animation:PopIn 300ms 1 ease-in; */
+  /* animation:PopIn 300ms 1 ease-in; */
 }
 
 .state-one.state-two.state-three .block-three {
   opacity:1;
-  -webkit-animation:PopIn 300ms 1 ease-in;
+  -webkit-transform:translate3d(0,0,0) scale(1,1);
-  animation:PopIn 300ms 1 ease-in;
+  /* -webkit-animation:PopIn 300ms 1 ease-in; */
+  /* animation:PopIn 300ms 1 ease-in; */
 }
 
 @-webkit-keyframes PopIn {

website/source/stylesheets/main.css

@@ -654,12 +654,16 @@ body.page-home #footer {
   margin: -28px 0 0 -115px;
   opacity: 1;
   -webkit-transition: -webkit-transform 300ms ease-in-out;
-  -webkit-transform-origin: 100% 0;
+  -webkit-transform-origin: 50% 50%;
   -webkit-transform-style: preserve-3d;
-  -webkit-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scaleX(1);
+  -webkit-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1);
+}
+.state-one .animated-logo {
+  -webkit-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1);
 }
 .state-one.state-two.state-three.state-four .animated-logo {
-  -webkit-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scaleX(1.26);
+  -webkit-transform-origin: 100% 0;
+  -webkit-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1);
 }
 .state-one.state-two.state-three.state-four .white-block {
   background-color: #ffffff;
@@ -675,9 +679,7 @@ body.page-home #footer {
   background-color: #fff;
   background-color: rgba(255, 255, 255, 0);
   border: 1px solid #fff;
-}
+  -webkit-transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out, background-color 300ms ease-out;
-.state-one .white-block {
-  -webkit-transition: -webkit-transform 300ms ease-out, background-color 300ms ease-out;
 }
 .block-one,
 .block-two,
@@ -690,36 +692,41 @@ body.page-home #footer {
 }
 .block-one {
   opacity: 0;
+  -webkit-transform: translate3d(0, 0, 0) scale(0, 0);
 }
 .block-two {
   opacity: 0;
   top: 0;
   left: 0;
-  -webkit-transform: translate3d(0, 0, 0) scaleX(1);
+  -webkit-transform: translate3d(0, 0, 0) scale(0, 0);
 }
 .block-three {
   opacity: 0;
   top: 72px;
-  -webkit-transform: translate3d(0, 0, 0) scaleY(1);
+  /* -webkit-transform:translate3d(0,-100px,0) scaleY(1); */
+  -webkit-transform: translate3d(0, 0, 0) scale(0, 0);
 }
 .block-four {
   -webkit-transform-origin: 0 0;
   -webkit-transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
 }
-.state-one .block-one {
+.state-one.state-two .block-one {
   opacity: 1;
-  -webkit-animation: PopIn 300ms 1 ease-in;
+  -webkit-transform: translate3d(0, 0, 0) scale(1, 1);
-  animation: PopIn 300ms 1 ease-in;
+  /* -webkit-animation:PopIn 300ms 1 ease-in; */
+  /* animation:PopIn 300ms 1 ease-in; */
 }
-.state-one.state-two .block-two {
+.state-one .block-two {
   opacity: 1;
-  -webkit-animation: PopIn 300ms 1 ease-in;
+  -webkit-transform: translate3d(0, 0, 0) scale(1, 1);
-  animation: PopIn 300ms 1 ease-in;
+  /* -webkit-animation:PopIn 300ms 1 ease-in; */
+  /* animation:PopIn 300ms 1 ease-in; */
 }
 .state-one.state-two.state-three .block-three {
   opacity: 1;
-  -webkit-animation: PopIn 300ms 1 ease-in;
+  -webkit-transform: translate3d(0, 0, 0) scale(1, 1);
-  animation: PopIn 300ms 1 ease-in;
+  /* -webkit-animation:PopIn 300ms 1 ease-in; */
+  /* animation:PopIn 300ms 1 ease-in; */
 }
 @-webkit-keyframes PopIn {
   0% {