Sass Easing Function

index.haml

%section
  %h1
    Sass Easing Functions
  %h4 Bounce, Elastic & Spring
  //%pre $transformMap: (scale: 2, translateX: 100%, rotate: 90deg, "background-color": dodgerblue)

%section
  %input#bounce(type="checkbox" checked)
  %label(for="bounce")
    Bounce
    .box.box--bounce
  %pre @include bounce("bounce", $bounces: 8, $stiffness: 3, $transformMap: $transformMap)

%section
  %input#elastic(type="checkbox" checked)
  %label(for="elastic")
    Elastic
    .box.box--elastic
  %pre @include elastic("elastic", $elasticity: 100, $transformMap: $transformMap)
  
%section
  %input#spring(type="checkbox" checked)
  %label(for="spring")
    Spring
    .box.box--spring
  %pre @include spring("spring", $tension: 6, $springiness: 6.5, $transformMap: $transformMap)

Sass-Easing-Function.markdown

Sass Easing Function

Experimenting with using Sass to provide more complex easing functions like bounce, elastic and spring.

credits to: http://bouncejs.com/ http://julian.com/research/velocity/

A Pen by Che on CodePen.

License.

style.sass

// Play with me, please...
$transformMap: (scale: 2, translateX: 100%, rotateZ: 90deg, "background-color": dodgerblue)
  

body
  background-color: #F8F8F8
  color: #333
  font-family: 'Avenir', 'Helvetica Neue', 'Helvetica', sans-serif
  max-width: 800px
  margin: auto
  
h1
  line-height: 1
  margin-top: 2.5rem
  margin-bottom: .5rem
    
h4
  margin: 0
  padding: 0
  
label
  font-size: 2rem
  margin: .5em
  cursor: pointer
  font-weight: 400
    
pre
  white-space: normal
  padding: 1.5rem
  background-color: white

section
  margin-bottom: 3rem
  margin-left: 1.5rem
  margin-right: 1.5rem
    

      
      
.box
  margin-top: 5rem
  margin-bottom: 1.5rem
  width: 100px
  height: 100px
  background-color: #BE5353
  border-radius: 2px
    
#bounce:checked + label
  .box--bounce
    animation: 2s bounce forwards
      
#elastic:checked + label
  .box--elastic
    animation: 2s elastic forwards

#spring:checked + label
  .box--spring
    animation: 2s spring forwards

#spring:checked + label
  .box--sway
    animation: 2s sway forwards


  
@mixin scaled-transform($scaledRatio: 0, $keyframe: 0%, $transformMap: ())
  $transformString: null
  $normalAttributes: ()
  
  @each $attribute, $value in $transformMap

    @if index(scale scaleX scaleY scaleZ translate translateX translateY translateZ rotate rotateX rotateY rotateZ, $attribute)
      $scaledValue: "#{$attribute}(#{$value*$scaledRatio})"
      @if $attribute in (scale, scaleX, scaleY, scaleZ)
        $scaledValue: "#{$attribute}(#{$value*$scaledRatio})"
      $transformString: append($transformString, unquote($scaledValue))
      
    @else
      $scaledValue: $value*$scaledRatio
      $normalAttributes: map-merge($normalAttributes, ($attribute: $scaledValue))
        

  #{$keyframe}%
    transform: $transformString
    @each $attribute, $value in $normalAttributes
      #{$attribute}: $value
    
    
    
@mixin bounce($animation-name: "bounce", $frames: 100, $bounces: 4, $stiffness: 3, $transformMap: (scale: 2, translateX: 100%))
  $E: 2.718281828459045
  $alpha: ($stiffness/100)
  $threshold: 0.005/pow(10, $stiffness)
  $limit: floor(logarithm($threshold)/(-1*$alpha))
  $omega: $bounces * pi()/$limit

  @keyframes #{$animation-name}
    @for $i from 1 through $frames
      $time: ($i/$frames)*$limit
      $oscillation: cos($omega*$time)
      $exponent: pow($E, -$alpha*$time)
      $scaledRatio: (1 - $exponent * $oscillation)
      @include scaled-transform($scaledRatio, (100/$frames)*$i, $transformMap)
      
        
  
@mixin elastic($animation-name: "elastic", $frames: 100, $transformMap: (), $elasticity: 80)
  @keyframes #{$animation-name}
    @for $i from 1 through $frames
      $ratio: 1 - $i/$frames
      $scaledRatio: 1 - -1*pow(3, 8*($ratio - 1)) * sin((($ratio - 1) * $elasticity - 7.5) * pi() / 15)
      @include scaled-transform($scaledRatio, (100/$frames)*$i, $transformMap)
        


@mixin spring($animation-name: "spring", $frames: 100, $transformMap: (), $tension: 6, $springiness: 4.5)
  $E: 2.718281828459045
  @keyframes #{$animation-name}
    @for $i from 1 through $frames
      $ratio: $i/$frames
      $scaledRatio: 1 - (cos($ratio * $springiness * pi()) * pow($E, -$ratio * $tension))
      @include scaled-transform($scaledRatio, (100/$frames)*$i, $transformMap)
        
        

  
@include bounce("bounce", $bounces: 8, $stiffness: 3, $transformMap: $transformMap)
@include elastic("elastic", $elasticity: 100, $transformMap: $transformMap)
@include spring("spring", $tension: 6, $springiness: 6.5, $transformMap: $transformMap)