easings.scss

This package adds a set of CSS cubic-bezier timing functions (also named easings) as Custom Properties.

Goals and benefits of the package:

• lighter generated CSS;
• shorter cubic-bezier() syntax;
• code portability: same syntax as similar libraries.

Also read: ideas for this package.

Summary

• Easings list
  • Reversed easings curves
• Usage
  • Custom easings
• Installation
  • Partial import ($easings)
  • Legacy browsers ($easings-legacy)

Easings list

If you’re familiar with Bourbon’s easings, they are exactly the same. (Other visualization).

Aliases for a shorter syntax (not available in Bourbon):

Reversed easings curves

For each of these variables, a reversed curve is available by adding the -r suffix to the variable name (or its alias). Examples:

• $ease-in-out-quart-r is the reversed curve of $ease-in-out-quart;
• $out-expo-r is the reversed curve of $out-expo.

Usage

Write your timing functions powered by CSS Custom Properties the way you want:

.my-class {

  // using a custom property…
  transition: opacity 1.3s var(--in-out-circ);

  // … or a SCSS variable (Bourbon naming)
  transition: opacity 1.3s $ease-in-out-circ;

  // … or a shorter SCSS variable
  transition: opacity 1.3s $in-out-circ;
}

These syntaxes all lead to the same CSS output:

.my-class {
  transition: opacity 1.3s var(--in-out-circ);
}

💡 If you use Bourbon, no code change is required. Make sure you @import easings.scss after Bourbon, and you’re all set.

Custom easings

easings.scss also adds a bezier() function that alias the CSS cubic-bezier() one, allowing a shorter syntax for your custom easings.

// You can now write this…
.my-class {
  transition-timing-function: bezier(.1, .02, 1, .7);
}

// … instead of
.my-class {
  transition-timing-function: cubic-bezier(.1, .02, 1, .7);
}

If you want to reverse a custom easing curve, you can use the reverse-bezier() function (or its alias r-bezier()), accepting 1 or 4 parameters.

// 4 parameters

.my-class {
  transition-timing-function: reverse-bezier(.1, .02, 1, .7);
}

// 1 parameter

$my-easing-not-yet-reversed: .1, .02, 1, .7;

.my-class {
  transition-timing-function: reverse-bezier($my-easing-not-yet-reversed);
}

// r-bezier alias

.my-class {
  transition-timing-function: r-bezier(.1, .02, 1, .7);
}

Installation

1. npm install easings.scss pulls the package into your project.
2. @import '~easings.scss'; in a SCSS file make all the easings available as SCSS variables in addition to adding them at :root level.

This means the @import statement…

@import '~easings.scss';

… already outputs:

:root {
  --in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
  --out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  /* all 18 other easings… */
  --out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

Partial import ($easings)

If you don’t want to import everything, write an $easings list before the @import statement:

$easings: 'in-out-quad', 'in-out-quad-r', 'out-circ', 'in-out-back';
@import '~easings.scss;

This will only output the needed Custom Properties, instead of the 24 available:

:root {
  --in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --in-out-quad-r: cubic-bezier(0.485, 0.045, 0.545, 0.97);
  --out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

💡Partial import is only impacting the generated custom properties, but all the 48 SCSS variables (and their aliases) remain available. In addition, the 48 cubic-bezier coordinates are also available with the -value suffix:

$in-out-cubic-value: 0.645, 0.045, 0.355, 1;
$in-out-cubic-r-value: 0.645, 0, 0.355, 0.955;

Legacy browsers ($easings-legacy)

If you don’t want to output custom properties, set $easings-legacy to true before the @import statement:

$easings-legacy: true;
@import '~easings.scss;

With this legacy flag, no CSS will be generated in :root. SCSS variables will output a cubic-bezier function instead of a Custom Property:

Example SCSS code:

.my-class {
  transition: opacity 1.3s $ease-in-out-circ;
}

Generated CSS:

/* with `$easings-legacy: true;` */
.my-class {
  transition: opacity 1.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

/* without `$easings-legacy` */
.my-class {
  transition: opacity 1.3s var(--in-out-circ);
}