meduzen / easings

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

easings.scss

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

This library brings:

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

⚠️ easings.scss version 1.x is compatible with Dart SASS while version 0.x sticks to node-sass. If you’re not sure about your environment, start with the installation section. The installation step is the only usage difference between both versions, but if you prefer to only read the documentation for 0.x, see v0.3.1 documentation.

Summary

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

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

Reverse easings

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

💡 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.

If you’re not sure which one your project uses, this might help.

• If the project uses node-sass or if you import SCSS files using @import, there’s a high chance you are using the old spec.
• If the project uses Dart SASS (sass) and if you import SCSS files using @use or @forward, you are using the new spec.
• In the new spec, @import is deprecated and variables are not global. This is why easings.scss usage isn’t the same changes depending on the spec.

Projects using Dart SASS

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.

Projects using node-sass

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.

Full import

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

Options

Partial import ($easings)

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 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:

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

easings's Issues

(ideas) How to better write easings using CSS or SCSS?

How to better write easings using CSS or SCSS?

(Please note the question is not “How to write better timing functions”, but “How to better write [them]”).

I want to improve the way I write CSS cubic-bezier() timing functions. I’d like to request ideas and opinions 🙏, and share a few ideas. What does (or doesn’t) work for you, and why?

What I do now

What I’ve always done is using a variable coming from the SCSS library Bourbon:

.my-class {
  transition: transform .3s $ease-in-out-quad;
 }

which outputs:

.my-class {
  transition: transform .3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
 }

It’s rather straightforward, but I’d like to replace this by using something else, more modern/powerful/straightforward.

It can use SCSS, PostCSS, or both, but it has to be framework agnostic.

Three types of solutions

Existing ideas:

1. Same as SCSS variables, but with custom props declared at :root level.
2. A SCSS ease() function requiring to write transition: transform .3s ease(easeInOutQuad);.
3. postcss-easings, a PostCSS plugin allowing to write transition: transform .3s ease-in-out-quad; to transform it using the matching cubic-bezier value (camelCase also works: easeInOutQuad).

So, three types of solutions: custom properties, a SCSS function, and a PostCSS plugin.

There are various improvements that could be made to each. One of them is getting rid of the ease* prefix in order to shorten the syntax:

.my-class {
  transition: transform .3s $ease-in-out-quad; // SCSS variable
  transition: transform .3s $in-out-quad; // shortened SCSS variable

  transition: transform .3s var(--ease-in-out-quad); // custom prop
  transition: transform .3s var(--in-out-quad); // custom prop shortened
  transition: transform .3s ease-in-out-quad; // postcss-easings
  transition: transform .3s in-out-quad; // postcss-easings shortened
 }

Maybe one of the three type of solutions could fit as a good basis. But maybe shortening the syntax is only one part of the possible improvements and considerations that can be tackled.

More

(done ☑️) Reverse easings

See Reversing an easing curve. It’s powerful and important. I have not seen reversed easings in a library, yet, and I think it could easily be integrated in whatever solution.

(done ☑️) Pulling the package

Supposing a SCSS package, I’d probably want:

@import '~awesome-easings';

This single @import would output all the easings available, this way:

$in-out-quad: var(--in-out-quad);
$in-quad: var(--in-quad);
/* more easings… */

:root {
  --in-out-quad: cubic-bezier(.250, .460, .450, .940);
  --in-quad: cubic-bezier(.550, .085, .680, .530);
  /* more props… */
}

Alternatively, a partial import could be a solution:

@import '~awesome-easings/src/easings/in-out-quad';

(done ☑️) Custom props and backward compatibility

A flag could exclude/include legacy output. Example with SCSS:

$awesome-easings-legacy: true;
@import '~awesome-easings';

.my-class {
  transition: transform .3s $in-out-quad;
}

With $awesome-easing-legacy, the CSS output should be:

.my-class {
  transition: transform .3s cubic-bezier(.250, .460, .450, .940);
}

(Alternatively, postcss-preset-env is a better solution.)

Naming from the JS world

GSAP names easings differently:

• quad is Power1;
• cubic is Power2;
• quart is Power3;
• quint is Power4;

But the following names are shared: sine, expo, circ, back.

That’s interesting because PowerX are named according to the math behind their curves (minus 1), and such a naming is very convenient to shape the acceleration/deceleration power of their curves.

So maybe it could be a good idea to alias quad to power1, for example.

Splitted easings

At first I was thinking about taking advantage of GSAP naming to make a very short syntax. For example:

.my-class {
  transition: transform .3s e(4, io); // Power4.inOut, or $in-out-quint
}

But anything in that direction will likely cause readability issue.

Instead, a function could fit another purpose, like splitting an easing curve into several curves at specified breakpoints. This is inspired by split ease, a JavaScript function inserting a linear gap between the acceleration and the deceleration of an easing curve. So maybe this could give an idea for a useful function.

It could look like this:

/* Create 3 easing curves that are segments of $in-out-quad ranging:
   - from 0 to 33% of the curve;
   - from 33% to 80% of the curve;
   - from 80% to 100% of the curve.
*/
$splitted-easing: ease-split($in-out-quad, 0.33, 0.8);

// Apply each curve to its own element
.my-class {
  > :nth-child(1) {
    transition: transform .33s ease($splitted-easing, 1));
  }

  > :nth-child(2) {
    transition: transform .47s ease($splitted-easing, 2) .33s;
  }

  > :nth-child(3) {
    transition: transform .2s ease($splitted-easing, 3) .8s;
  }
}

Other idea: allowing easings to receive a cx (article).

CSS utility classes

<div class="in-out-quad">

I don’t have any interest or need, but who knows… Does someone have a good use case for this?

---

Of course, all of these shouldn’t prevent you to directly play with your custom easing curves using the dev tools.

Support for gradient easings

Resources:

• Spec.
• PostCSS plugin: it’s cool but has several issues. Maybe better to contribute to it for people familiar with PostCSS plugins.
• Easing gradients
• Easing linear gradients
• Making gradient smooth

Check if it can be done, or contribute to larsenwork/postcss-easing-gradients.

Mixin for animation-timing-function and transition-timing-function

It could be less cumbersome to write the CSS transition-timing-function and animation-timing-function rules. A mixin could be handy, but it has to be straightforward and intuitive.

So, in order to generate one of these lines of CSS:

.my-class {
  transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); /* = in-out-quad */
  transition-timing-function: var(--in-out-quad);
}

This SCSS could be written:

.my-class {
  // using current easings.scss version
  transition-timing-function: $in-out-quad;
  transition-timing-function: bezier(.455, .03, .515, .955);

  // straightforward,but is it for animation-timing-function or transtition-timing-function?
  @include timing('in-out-quad');
  @include timing(.455, .03, .515, .955);

  // a bit longer, but still shorter and more explicit than previous proposal
  @include transition-timing('in-out-quad');
  @include transition-timing(.455, .03, .515, .955);

  // alternative, but less explicit about what it generates
  @include transition-easing('in-out-quad');
  @include transition-easing(.455, .03, .515, .955);
}

It looks that for the easings already included in easings.scss, there’s no benefit. But for custom easing curves, it’s a 8 characters saving.

Waiting for feedbacks (and mine after using the library in real projects during a few months).

Reversed easings

Idea mentioned in #1.

See Reversing an easing curve. It’s powerful and important. I have not seen reversed easings in a library, yet.

• decide variables naming (e.g. in-out-quad-r or in-out-quad-reversed)
• reverse-bezier() function to reverse a x1, x2, y1, y2 easing curve

Staggering and interpolating easings

Very interesting use of custom properties for staggering/interpolating easings. Could something be created to improve the way it’s generated?

https://twitter.com/hexagoncircle/status/1285971735011946498
https://codepen.io/hexagoncircle/full/jOWXzrw

Improve file structure

Since support for Dart SASS has been added, the file structure of the project is a mess. It should be improved.