/*
 *  Element Scroll Fader
 *    Simple fade in animation that's activated when a user scrolls down far
 *    enough to see the element.
 *
 *  Dependencies:
 *    styles/settings/animation.scss
 *    styles/tools/_transform.scss
 *
 *  Version:
 *    1.0.0 - 2018/06/08
 */
$o-element-scroll-fader--speed: 0.75s;
$o-element-scroll-fader--amount: 15%;

.o-element-scroll-fader {
  opacity: 0;
  transition: all $o-element-scroll-fader--speed $s-animation--ease-out;
  will-change: transform;

  $amt: $o-element-scroll-fader--amount;//Shorthand
  &.from-top    { @include t-translate-y(-$amt); }
  &.from-bottom { @include t-translate-y( $amt); }
  &.from-left   { @include t-translate-x(-$amt); }
  &.from-right  { @include t-translate-x( $amt); }

  &.is-visible {
    opacity: 1;
    @include t-translate(0, 0);
  }
}