easings.scss

Easings (cubic-bezier timing functions) as custom properties and SCSS variables.

Usage no npm install needed!

<script type="module">
  import easingsScss from 'https://cdn.skypack.dev/easings.scss';
</script>

README

easings.scss

easings.scss 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;
  • reverse any bezier curve with reverse-bezier();
  • code portability: same syntax as similar libraries.

Summary

Easings list

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

| easing | in-out | in | out | |--|--|--|--| | Sine | $ease-in-out-sine | $ease-in-sine | $ease-out-sine | | Quad | $ease-in-out-quad | $ease-in-quad | $ease-out-quad | | Cubic | $ease-in-out-cubic | $ease-in-cubic | $ease-out-cubic | | Quart | $ease-in-out-quart | $ease-in-quart | $ease-out-quart | | Quint | $ease-in-out-quint | $ease-in-quint | $ease-out-quint | | Expo | $ease-in-out-expo | $ease-in-expo | $ease-out-expo | | Circ | $ease-in-out-circ | $ease-in-circ | $ease-out-circ | | Back | $ease-in-out-back | $ease-in-back | $ease-out-back |

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

| easing | in-out | in | out | |--|--|--|--| | Sine | $in-out-sine | $in-sine | $out-sine | | Quad | $in-out-quad | $in-quad | $out-quad | | Cubic | $in-out-cubic | $in-cubic | $out-cubic | | Quart | $in-out-quart | $in-quart | $out-quart | | Quint | $in-out-quint | $in-quint | $out-quint | | Expo | $in-out-expo | $in-expo | $out-expo | | Circ | $in-out-circ | $in-circ | $out-circ | | Back | $in-out-back | $in-back | $out-back |

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-curve-not-reversed-yet: .1, .02, 1, .7;

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

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