teagles / wagon

/// Creates a hinge effect by rotating the element.
/// @param {Keyword} $state [in] - State to transition to.
/// @param {Keyword} $from [left] - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`.
/// @param {Keyword} $axis [edge] - Axis of the element to rotate on. Can be `edge` or `center`.
/// @param {Number} $perspective [2000px] - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced.
/// @param {Keyword} $turn-origin [from-back] - Side of the element to start the rotation from. Can be `from-back` or `from-front`.
@function hinge (
  $state: in,
  $from: left,
  $axis: edge,
  $perspective: 2000px,
  $turn-origin: from-back
) {
  // Rotation directions when hinging from back vs. front
  $rotation-amount: 90deg;
  $rotations-back: (
    top: rotateX($rotation-amount * -1),
    right: rotateY($rotation-amount * -1),
    bottom: rotateX($rotation-amount),
    left: rotateY($rotation-amount),
  );
  $rotations-from: (
    top: rotateX($rotation-amount),
    right: rotateY($rotation-amount),
    bottom: rotateX($rotation-amount * -1),
    left: rotateY($rotation-amount * -1),
  );

  // Rotation origin
  $rotation: '';
  @if $turn-origin == from-front {
    $rotation: map-get($rotations-from, $from);
  } @else if $turn-origin == from-back {
    $rotation: map-get($rotations-back, $from);
  } @else {
    @warn '$turn-origin must be either "from-back" or "from-front"';
  }

  // Start and end state
  $start: '';
  $end: '';
  @if $state == in {
    $start: perspective($perspective) $rotation;
    $end: perspective($perspective) rotate(0deg);
  } @else {
    $start: perspective($perspective) rotate(0deg);
    $end: perspective($perspective) $rotation;
  }

  // Turn axis
  $origin: '';
  @if $axis == edge {
    $origin: $from;
  } @else {
    $origin: center;
  }

  $keyframes: (
    name: 'hinge-#{$state}-#{$from}-#{$axis}-#{$turn-origin}',
    0: (transform: $start, transform-origin: $origin),
    100: (transform: $end),
  );

  @return $keyframes;
}