Velocity.js Loading Animation

index.html

<div class="container">
  <div class="title-box">
    <h1>Bradley Chee</h1>
    <div class="description">
      Design. Code. Hack.
    </div>
  </div>
</div>

script.js

// click "Run" to replay
var titleBox = document.querySelectorAll(".title-box");
var titleH = document.querySelectorAll(".title-box h1");
var desc = document.querySelectorAll(".title-box .description");

Velocity(titleBox, { rotateX: "88deg" }, 0);
Velocity(titleBox, { maxWidth : 0 }, 0);
Velocity(titleBox, { maxWidth : 600}, {
	delay: 1000,
	complete: function () {
    Velocity(titleBox, { rotateX: "0deg", backgroundColorAlpha: 0 }, 1000);
    Velocity(titleH ,{ opacity: 1 }, { duration: 200, delay: 300 });
    Velocity(desc ,{ opacity: 1 }, { duration: 200, delay: 300 });
	}
});

/*var load = [
	{ elements: titleBox, properties: { rotateX: "88deg" },  options: { duration: 0 }},
	{ elements: titleBox, properties: { maxWidth : 0 }, options: { duration: 0 }},
	{ elements: titleBox, properties: { maxWidth : "600px"},
		options: {
			delay: 1000,
			complete: function () {
        	Velocity(titleBox, { rotateX: "0deg", backgroundColorAlpha: 0 }, 1000);
				Velocity(titleH ,{ opacity: 1 }, { duration: 200, delay: 500 });
			}
		}
	}
];*/

style.scss

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat-Regular'), url(http://fonts.gstatic.com/s/montserrat/v6/zhcz-_WihjSQC0oHJ9TCYBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

body {
  font-family: 'Montserrat';
  margin: 0;
  background: #333;
  color: #eee;
  height: 100vh;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.container {
  @include vertical-align;
}

.title-box {
  margin: 0 auto;
  padding: 20px;
  max-width: 600px;
  text-align: center;
  border: 2px solid #fff;
  h1{
    margin: 0;
    opacity: 0;
  }
  .description {
    opacity: 0;
  }
  background: #fff;
}

Velocity.js-Loading-Animation.markdown

Velocity.js Loading Animation

Velocity.js without jquery experiment. Built this for my personal site.

A Pen by Bradley Chee on CodePen.

License.