A Pen by Varun Vachhar.

index.html

<h2>SASS Mixin for Generating a Custom Easing Function</h2>

<div class="ball-container">
  <p>g = 1</p>
  <div class="ball g-1"></div>
</div>

<div class="ball-container">
  <p>g = 2</p>
  <div class="ball g-2"></div>
</div>

<div class="ball-container">
  <p>g = 4</p>
  <div class="ball g-4"></div>
</div>

<div class="ball-container">
  <p>g = 8</p>
  <div class="ball g-8"></div>
</div>

<p class="padded ref"><a href="http://patakk.tumblr.com/post/88602945835/heres-a-simple-function-you-can-use-for-easing">&raquo; patakk.tumblr.com</a></p>
<blockquote>
<p class="padded">Here’s a simple function you can use for easing motions, just set your “time” variable to go from 0 to 1.</p>

<p class="padded">The ‘g’ adjusts the amount of easing.</p>

<p class="padded">In the animation above I used the function like this:</p>

<pre class="padded">
x = 300 * ease(time, g);

float ease(float p, float g){
  if (p < 0.5) 
    return 0.5 * pow(2*p, g);
  else
    return 1 - 0.5 * pow(2*(1 - p), g);
}
<pre>
</blockquote>

SASS-Mixin-for-Generating-a-Custom-Easing-Function.markdown

SASS Mixin for Generating a Custom Easing Function

From Patakk (http://patakk.tumblr.com/info):

Here’s a simple function you can use for easing motions, just set your “time” variable to go from 0 to 1. The ‘g’ adjusts the amount of easing.

In the animation above I used the function like this:

x = 300 * ease(time, g);

float ease(float p, float g){ if (p < 0.5) return 0.5 * pow(2p, g); else return 1 - 0.5 * pow(2(1 - p), g); }

Edit: the “if” statement was missing the part after ‘<’ because html ingored that character thinking it was a part of html :S

A Pen by Varun Vachhar on CodePen.

License.

style.scss

/* --------------------------------- 
  Mixins 
--------------------------------- */
@mixin animation($name, $time) {
  -webkit-animation: $name $time infinite 2s;
     -moz-animation: $name $time infinite 2s;
       -o-animation: $name $time infinite 2s;
          animation: $name $time infinite 2s;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content; 
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  } 
}

/* --------------------------------- 
  Math Power Function for SASS
  From:
  https://github.com/adambom/Sass-Math/blob/master/math.scss
--------------------------------- */
@function pow ($x, $n) {
  $ret: 1;
  @if $n >= 0 {
    @for $i from 1 through $n {
      $ret: $ret * $x;
    } 
  } @else {
    @for $i from $n to 0 {
      $ret: $ret / $x;
    }
  }
  @return $ret;
}

/* ---------------------------------
  The Custom Easing Function
  from:
  http://patakk.tumblr.com/post/88602945835/heres-a-simple-function-you-can-use-for-easing
--------------------------------- */
@function ease($time, $g) {
  @if $time < 50 {
    @return 0.5 * pow(2 * $time/100, $g);
  } @else {
    @return 1 - (0.5 * pow(2 * (1 - $time/100), $g));
  }
}

/* ---------------------------------
  Generate keyframes based
  on easing function
--------------------------------- */
@mixin easingGenerator($g) { 
  @for $i from 0 through 100 {
    // calculate 
    $percent: 0% + $i;
    $left: 0% + 100 * ease($i, $g);
    // set position
    #{$percent} { left: $left; }
  }
}


/* --------------------------------- 
  Main 
--------------------------------- */
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

$pink: #FF4C70;
$ball-size: 25px;

body {
  color: #1E4C6B;
  margin: 40px 0 0 0;
  padding: 0;
}
h2 { 
  font-family: sans-serif; 
  padding: 0 25px; 
  margin-bottom: 60px;
}
a { 
  color: #21B46E; 
  text-decoration: none; 
  font-weight: bold;
  font-family: sans-serif;
}
blockquote { border-left: 4px solid #1E758D; }
.padded { padding: 0 25px; }
.ref { margin-top: 60px; }

.ball-container {
  width: 100%;
  padding: 0 10%;
  margin-bottom: 20px;
  
  p { margin-top: 0; font-style: italic; }
  
  .ball {
    position: relative;
    display: inline-block;
    width: $ball-size;
    height: $ball-size;
    background-color: $pink;
    border-radius: $ball-size/2;
    left: 0%;
    -webkit-transform: translate3d(0px,0px,0px);
       -moz-transform: translate3d(0px,0px,0px);
            transform: translate3d(0px,0px,0px);
    
    &.g-1 { @include animation(move-1, 5s); }
    &.g-2 { @include animation(move-2, 5s); }
    &.g-4 { @include animation(move-4, 5s); }
    &.g-8 { @include animation(move-8, 5s); }
  }
}

@include keyframes(move-1) {
  @include easingGenerator(1);
}
@include keyframes(move-2) {
  @include easingGenerator(2);
}
@include keyframes(move-4) {
  @include easingGenerator(4);
}
@include keyframes(move-8) {
  @include easingGenerator(8);
}