waypoints basic

waypoints-basic.scss

// Create a basic animation triggered by waypoints
// Defaults to fade-in-up type animation, but useful for simple fades or slides.
@mixin waypoint-basic(
    $y-start: 30px,
    $opacity-start: 0,
    $x-start: 0,
    $y-end: 0,
    $opacity-end: 1,
    $x-end: 0,
    $duration: .2s,
    $class-to-toggle: ('.resolved'),
    $easing: $ease-out-quad) {

  transform: translateY($y-start) translateX($x-start);
  transition: all $duration $easing;
  opacity: $opacity-start;

  &#{$class-to-toggle} {
  // $.resolved {
    opacity: $opacity-end;
    transform: translateY($y-end) translateX($x-end);
  }
}