spring.scss: an attempt at making spring animations using only SASS. Still a work in progress.

spring.scss

@mixin spring($selector, $name, $duration, $delay, $location, $spring) {
  // Set Defaults
  $selector: ".spring" !default;
  $location: 0,0,0     !default;
  $name:     "spring"  !default;
  $duration: 1s        !default;
  $delay:    0s        !default;
  $spring:   0.1       !default;

  // Set selector to use animation
  #{$selector} { @include vendor-prefix(animation, $name $duration $delay); }

  // Set location
  $over:();
  @each $coord in $location {
    $coord: $coord * -1 * $spring;
    $over: append($over, $coord, comma);
  }
  $under:();
  @each $coord in $location {
    $coord: $coord * (1 * $spring);
    $under: append($under, $coord, comma);
  }

  // Setup animation
  @include keyframes($name) {
    0%         { @include vendor-prefix(transform, translate3d(#{$location})); }
    75%        { @include vendor-prefix(transform, translate3d(#{$over})); }
    85%        { @include vendor-prefix(transform, translate3d(#{$under})); }  
    50%, 100%  { @include vendor-prefix(transform, translate3d(0, 0, 0)); }  
  }
  
}