Better easing timing function in Sass

README.md

Usage

SCSS

@import "better-easing";

.foo {
  transition: all 1s easing(circOut);
}

Output CSS

.foo {
  transition: all 1s cubic-bezier(0, 0.56, 0.46, 1);
}

_better-easing.scss

@charset "utf-8";

/**
 * Based on the article by zz85
 * http://www.lab4games.net/zz85/blog/2014/12/26/better-cubic-bezier-approximations-for-robert-penner-easing-equations/
 */

$better-easing-funcs: (
	quadIn: ( 0.26, 0, 0.6, 0.2 ),
	quadOut: ( 0.4, 0.8, 0.74, 1 ),
	quadInOut: ( 0.48, 0.04, 0.52, 0.96 ),
	cuBicIn: ( 0.32, 0, 0.66, -0.02 ),
	cuBicOut: ( 0.34, 1.02, 0.68, 1 ),
	cuBicInOut: ( 0.62, -0.04, 0.38, 1.04 ),
	quartIn: ( 0.46, 0, 0.74, -0.04 ),
	quartOut: ( 0.26, 1.04, 0.54, 1 ),
	quartInOut: ( 0.7, -0.1, 0.3, 1.1 ),
	quintIn: ( 0.52, 0, 0.78, -0.1 ),
	quintOut: ( 0.22, 1.1, 0.48, 1 ),
	quintInOut: ( 0.76, -0.14, 0.24, 1.14 ),
	sineIn: ( 0.32, 0, 0.6, 0.36 ),
	sineOut: ( 0.4, 0.64, 0.68, 1 ),
	sineInOut: ( 0.36, 0, 0.64, 1 ),
	expoIn: ( 0.62, 0.02, 0.84, -0.08 ),
	expoOut: ( 0.16, 1.08, 0.38, 0.98 ),
	expoInOut: ( 0.84, -0.12, 0.16, 1.12 ),
	circIn: ( 0.54, 0, 1, 0.44 ),
	circOut: ( 0, 0.56, 0.46, 1 ),
	circInOut: ( 0.88, 0.14, 0.12, 0.86 )
);

@function easing($type) {
	$fn-value: map-get($better-easing-funcs, unquote($type));
	@return cubic-bezier($fn-value);
}