Repository files navigation

easings.scss adds a set of CSScubic-beziertiming functions (also namedeasings) asCustom Properties.

This library brings:

• a set of easings (and their reversed version!) as CSS custom properties and SASS variables;
• lighter generated CSS;
• ashortercubic-bezier() syntax;
• reversed bezier curves withreverse-bezier();
• code portability: same syntax as similar libraries.

⚠️easings.scss version1.x is compatible with Dart SASS while version0.x sticks tonode-sass. If you’re not sure about your environment, start with theinstallation section. The installation step is the only usage difference between both versions, but if you prefer to only read the documentation for0.x, seev0.3.1 documentation.

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

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

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

For each of these variables, areversed 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.

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

.my-class {// using a custom property…transition:opacity1.3svar(--in-out-circ);// … or a SCSS variable (Bourbon naming)transition:opacity1.3s$ease-in-out-circ;// … or a shorter SCSS variabletransition:opacity1.3s$in-out-circ;}

These syntaxes all lead to the same CSS output:

.my-class {transition: opacity1.3svar(--in-out-circ);}

💡 If you use Bourbon, no code change is required. Make sure you@importeasings.scssafterBourbon, and you’re all set.

easings.scss also adds abezier() function that alias the CSScubic-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 thereverse-bezier() function (or its aliasr-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);}

💡easings.scss supports both the old and the new (2020) SASS specification, but aside from the installation step, the usage of the library remains the same in both spec.

Dart SASS support starts at version 1.0.

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

1. npm install easings.scss@node-sass 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.

The sole@import or@use statement…

@use'easings.scss';// easings.scss 1.x@import'easings.scss';// easings.scss 0.x

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

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

// your minimal list of easings$easings:'in-out-quad','in-out-quad-r','out-circ','in-out-back';@use'easings.scss'with($easings:$easings);// easings.scss 1.x@import'easings.scss';// easings.scss 0.x

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 48cubic-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;

If you don’t want to output custom properties, set$easings-legacy totrue:

// easings.scss 1.x@use'easings.scss'with($easings-legacy: true);// easings.scss 0.x$easings-legacy: true;@import'easings.scss';

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

Example SCSS code:

.my-class {transition:opacity1.3s$ease-in-out-circ;}

Generated CSS:

/* with `$easings-legacy: true;` */.my-class {transition: opacity1.3scubic-bezier(0.785,0.135,0.15,0.86);}/* without `$easings-legacy` */.my-class {transition: opacity1.3svar(--in-out-circ);}