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