Scrolling Animtions

Css

.area {
  @for $i from 0 through 12 {
    li:nth-child(#{$i}) {
      @include transition(all 0.35s $ease-out-cubic ((0.45)+((0.15)*$i))+s);
    }
  }
}

.area-heading {
  @include transition(all 0.35s $ease-out-quart 0);
}

.area-text {
  @include transition(all 0.35s $ease-out-quart 0.25s);
}

.csstransitions {
  .area.is-hidden {
    .area-heading,
    .area-text,
    li {
      opacity: 0;
      @include transform(translateY(-25px));
    }
  }
}

Html

section.area.area--centered.js-screen.is-hidden
  .row
    .medium-8.medium-centered.column
      h1.area-heading Lorem ipsum dolor
      p.area-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet dolor vel velit laoreet, a venenatis nisi tempor. Praesent tincidunt arcu porttitor diam egestas varius.

  ul.small-block-grid-3
    li
      img(src="http://placehold.it/350x200")
      h2 Lorem ipsum
      p We like to think of ourselves as “techno Geeks” that love technology and love to explore new trends in technology just so we can find ways to make our customers more productive and profitable.
    li
      img(src="http://placehold.it/350x200")
      h2 Lorem ipsum
      p We like to think of ourselves as “techno Geeks” that love technology and love to explore new trends in technology just so we can find ways to make our customers more productive and profitable.
    li
      img(src="http://placehold.it/350x200")
      h2 Lorem ipsum
      p We like to think of ourselves as “techno Geeks” that love technology and love to explore new trends in technology just so we can find ways to make our customers more productive and profitable.

Js

var wH;

function resize() {
  wH = $(window).height();
}

function scrolling() {
  var st = $(this).scrollTop();

  $(".js-screen").each(function(){
    var offset = $(this).offset();

    if((st+(wH/1.5)) > offset.top) {
      $(this).removeClass('is-hidden');
    }
  });
}

resize();
scrolling();
$(window).bind('scroll', scrolling);
$(window).bind('resize', resize);