A SASS mixin to slide an element in any cardinal direction, at any speed, for any distance.

slideMixin.scss

// example 1: @include slide(up, 125ms, 100%);
// example 2: No distance required for "off" @include slide(off, 125ms);

// example 3:
// div {
//   @include slide(up, 250ms, 100%);
//
//   &.is-visible {
//     @include slide(off, 125ms);
//   }
// }

@function slide($direction, $distance) {
  $slide: (
    down: translateY($distance),
    left: translateX(-$distance),
    off: translate(0, 0),
    right: translateX($distance),
    up: translateY(-$distance)
  );

  @return map-get($slide, $direction);
}

@mixin slide($direction, $speed, $distance: 0) {
  transform: slide($direction, $distance);
  transition: all $speed ease-in-out;
}