Delayed CSS Animation Start

by Marius Jopen

HTML

<div class="content">
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
</div>

<div class="bar">
  <div class="level eighty">
  </div>
  <div class="level box">
  </div>
</div>

<div class="content">
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
  scroll<br/>
</div>

CSS

.bar {
  height: 50px;
  background: #cccccc;
  color: #f4f4f4;
  text-align: center;
  width: 100%;
}

.eighty {
  height: 20px;
  background: #aae0aa;
}

.eighty.start {
  width: 0px;
  margin-left: 0p;
  animation: eighty 1s ease-out forwards;
}

@-webkit-keyframes eighty {
  0% {
    width: 0px;
    margin-left: 0px;
  }
  100% {
    width: 100%;
    margin-left: 60px;
  }
}


.box {
  height: 50px;
  width: 50px;
  background: red;
}

.box.start {
  margin-left: 0p;
  animation: box 10s ease-out forwards;
}

@-webkit-keyframes box {
  0% {
    margin-top: 0px;
  }
  100% {
    margin-top: -600px;
  }
}

JavaScript

// Returns true if the specified element has been scrolled into the viewport.
function isElementInViewport(elem) {
  var $elem = $(elem);

  // Get the scroll position of the page.
  var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
  var viewportTop = $(scrollElem).scrollTop();
  var viewportBottom = viewportTop + $(window).height();

  // Get the position of the element on the page.
  var elemTop = Math.round($elem.offset().top);
  var elemBottom = elemTop + $elem.height();

  return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

// Check if it's time to start the animation.
function checkAnimation() {
  var $elem = $('.bar .level');

  // If the animation has already been started
  if ($elem.hasClass('start')) return;

  if (isElementInViewport($elem)) {
    // Start the animation
    $elem.addClass('start');
  }
}

// Capture scroll events
$(window).scroll(function() {
  checkAnimation();
});