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;
}
}
}Questions, Comments or Suggestions? Open an Issue
Comments
Nothing yet. Say the first thing.
Sign in to join the conversation.