28th July, 2014

Custom Easing with Sass

patakk is an insanely talented GIF artist and on his tumblr blog he shared this simple yet amazing easing function:

The time variable goes from 0 to 1 and g adjusts the amount of easing.

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);
}

3D animation has this concept of baking an animation. The same idea can be extended to baking an easing effect with Sass. The easingGenerator generates keyframe animations using this custom easing function.

@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));
  }
}

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

See the Pen Sass Mixin for Generating a Custom Easing Function by Varun Vachhar (@winkerVSbecks) on CodePen.

patakk.tumblr.com