items animation mixin

anim.scss

// Add body.loaded after page loaded
// window.onload = function() { document.body.classList.add('.loaded'); };
// $(function() { $('body').addClass('loaded'); });
// or 
// Add .loaded for viewport area on page


//@include anim('.logo h1', 'translateY(20px)', 540ms );
@mixin anim($class, $transform, $animDelay:0.1s, $start: '.loaded', $transition: 'all 320ms ease-out' ) {
  #{$class} {
    opacity: 0;
    transition: #{$transition};
    transform: #{$transform};
    #{$start} & {
      opacity: 1;
      transform:none;
      transition-delay: #{$animDelay};
    }
  }
}

//@include anim-items('.navbar-nav li', 'translateX(-16px)', 300ms );
@mixin anim-items($class, $transform, $animDelay: 0.2s, $start: '.loaded', $transition: 'all 320ms ease-out', $n: 50) {
  @include anim($class, $transform);
  @for $i from 1 through $n {
    #{$start} #{$class}:nth-child(#{$i}) {
      transition-delay: ($animDelay + ($i - 1) * 0.1s);
    }
  }
}