Skip to content

Instantly share code, notes, and snippets.

@milcktoast
Created February 12, 2013 22:09
Show Gist options
  • Select an option

  • Save milcktoast/4773900 to your computer and use it in GitHub Desktop.

Select an option

Save milcktoast/4773900 to your computer and use it in GitHub Desktop.
Easing functions for Sass/Compass
// Description:
// Easing functions
//
// Requires:
// - Sass
// - Compass
// Quadratic
@function ease-quadratic-in($k) {
@return $k * $k;
}
@function ease-quadratic-out($k) {
@return $k * ( 2 - $k );
}
@function ease-quadratic-in-out($k) {
$k: $k * 2;
@if ( $k < 1 ) {
@return 0.5 * $k * $k;
}
@return - 0.5 * ( -- $k * ( $k - 2 ) - 1 );
}
// Cubic
@function ease-cubic-out($k) {
@return 1 - ( -- $k * $k * $k * $k );
}
@function ease-cubic-in($k) {
@return $k * $k * $k;
}
@function ease-cubic-in-out($k) {
$k: $k * 2;
@if ( $k < 1 ) {
@return 0.5 * $k * $k * $k;
}
$k: $k - 2;
@return 0.5 * ( $k * $k * $k + 2 );
}
// Quartic
@function ease-quartic-in($k) {
@return $k * $k * $k * $k;
}
@function ease-quartic-out($k) {
@return 1 - ( -- $k * $k * $k * $k );
}
@function ease-quartic-in-out($k) {
$k: $k * 2;
@if ( $k < 1 ) {
@return 0.5 * $k * $k * $k * $k;
}
$k: $k - 2;
@return 0.5 * ( $k * $k * $k * $k + 2 );
}
// Quintic
@function ease-quintic-in($k) {
@return $k * $k * $k * $k * $k;
}
@function ease-quintic-out($k) {
@return 1 - ( -- $k * $k * $k * $k * $k );
}
@function ease-quintic-in-out($k) {
$k: $k * 2;
@if ( $k < 1 ) {
@return 0.5 * $k * $k * $k * $k * $k;
}
$k: $k - 2;
@return 0.5 * ( $k * $k * $k * $k * $k + 2 );
}
// Sinusoidal
@function ease-sinusoidal-in($k) {
@return 1 - cos( $k * pi() / 2 );
}
@function ease-sinusoidal-out($k) {
@return sin( $k * pi() / 2 );
}
@function ease-sinusoidal-in-out($k) {
@return 0.5 * ( 1 - cos( pi() * $k ) );
}
// Exponential
@function ease-exponential-in($k) {
@if ($k == 0) { @return 0; }
@return pow( 1024, $k - 1 );
}
@function ease-exponential-out($k) {
@if ($k == 1) { @return 1; }
@return 1 - pow( 2, - 10 * $k );
}
@function ease-exponential-in-out($k) {
@if ( $k == 0 ) { @return 0; }
@if ( $k == 1 ) { @return 1; }
$k: $k * 2;
@if ( $k < 1 ) { @return 0.5 * pow( 1024, $k - 1 ); }
@return 0.5 * ( - pow( 2, -10 * ( $k - 1 ) ) + 2 );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment