Reverse a timing function

README.md

@@ -12,12 +12,12 @@ Also read: [ideas](https://github.com/meduzen/easings/issues/1) for this package
 ## Summary
 
 - [Easings list](#easings-list)
-- [Installation](#installation)
+  - [Reversed easings curves](#reversed-easings-curves)
 - [Usage](#usage)
-- [Options](#options)
+  - [Custom easings](#custom-easings)
+- [Installation](#installation)
   - [Partial import (`$easings`)](#partial-import-easings)
   - [Legacy browsers (`$easings-legacy`)](#legacy-browsers-easings-legacy)
-- [Other easings](#other-easings)
 
 ## Easings list
 
@@ -47,29 +47,12 @@ Aliases for a shorter syntax (not available in Bourbon):
 | Circ | `$in-out-circ`  | `$in-circ`  | `$out-circ` |
 | Back | `$in-out-back`  | `$in-back`  | `$out-back` |
 
-## 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`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) level.
-
-This means the `@import` statement…
-```scss
-@import '~easings.scss';
-```
+### Reversed easings curves
 
-… already outputs:
+For each of these variables, a [reversed curve](https://css-tricks.com/reversing-an-easing-curve) is available by adding the `-r` suffix to the variable name (or its alias). Examples:
 
-```css
-: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);
-}
-```
+- `$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
 
@@ -98,14 +81,76 @@ These syntaxes all lead to the same CSS output:
 
 > 💡 If you use Bourbon, no code change is required. Make sure you `@import` _easings.scss_ **after** _Bourbon_, and you’re all set.
 
-## Options
+### Custom easings
+
+*easings.scss* also adds a `bezier()` function that alias the CSS `cubic-bezier()` one, allowing a shorter syntax for your custom easings.
+
+```scss
+// 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.
+
+```scss
+// 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`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) level.
+
+This means the `@import` statement…
+```scss
+@import '~easings.scss';
+```
+
+… already outputs:
+
+```css
+: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:
 
 ```scss
-$easings: 'in-out-quad', 'out-circ', 'in-out-back';
+$easings: 'in-out-quad', 'in-out-quad-r', 'out-circ', 'in-out-back';
 @import '~easings.scss;
 ```
 
@@ -114,16 +159,18 @@ This will only output the needed Custom Properties, instead of the 24 available:
 ```css
 :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);
 }
 ```
 
-All the 24 SCSS variables (and their aliases) remain available. In addition, the 24 `cubic-bezier` coordinates are also available with the `-value` suffix:
-
-```scss
-$in-out-cubic-value: 0.645, 0.045, 0.355, 1;
-```
+> 💡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:
+>
+> ```scss
+> $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`)
 
@@ -156,19 +203,3 @@ Generated CSS:
   transition: opacity 1.3s var(--in-out-circ);
 }
 ```
-
-## Other easings
-
-*easings.scss* also adds a `bezier()` function that alias the CSS `cubic-bezier()` one, allowing a shorter syntax for your custom easings.
-
-```scss
-// 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);
-}
-```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "easings.scss",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Easings (cubic-bezier timing functions) as custom properties and SCSS variables.",
   "main": "src/easings.scss",
   "scripts": {

src/easings.scss

@@ -1,4 +1,4 @@
-@import 'functions/bezier';
+@import 'functions/functions';
 @import 'easings/easings';
 
 /**

src/easings/_list-and-mapping.scss

@@ -0,0 +1,121 @@
+/**
+ * The value associated to each easing
+ */
+$easings-map: (
+  'in-sine': $in-sine-value,
+  'in-sine-r': $in-sine-r-value,
+  'out-sine': $out-sine-value,
+  'out-sine-r': $out-sine-r-value,
+  'in-out-sine': $in-out-sine-value,
+  'in-out-sine-r': $in-out-sine-r-value,
+
+  'in-quad': $in-quad-value,
+  'in-quad-r': $in-quad-r-value,
+  'out-quad': $out-quad-value,
+  'out-quad-r': $out-quad-r-value,
+  'in-out-quad': $in-out-quad-value,
+  'in-out-quad-r': $in-out-quad-r-value,
+
+  'in-cubic': $in-cubic-value,
+  'in-cubic-r': $in-cubic-r-value,
+  'out-cubic': $out-cubic-value,
+  'out-cubic-r': $out-cubic-r-value,
+  'in-out-cubic': $in-out-cubic-value,
+  'in-out-cubic-r': $in-out-cubic-r-value,
+
+  'in-quart': $in-quart-value,
+  'in-quart-r': $in-quart-r-value,
+  'out-quart': $out-quart-value,
+  'out-quart-r': $out-quart-r-value,
+  'in-out-quart': $in-out-quart-value,
+  'in-out-quart-r': $in-out-quart-r-value,
+
+  'in-quint': $in-quint-value,
+  'in-quint-r': $in-quint-r-value,
+  'out-quint': $out-quint-value,
+  'out-quint-r': $out-quint-r-value,
+  'in-out-quint': $in-out-quint-value,
+  'in-out-quint-r': $in-out-quint-r-value,
+
+  'in-expo': $in-expo-value,
+  'in-expo-r': $in-expo-r-value,
+  'out-expo': $out-expo-value,
+  'out-expo-r': $out-expo-r-value,
+  'in-out-expo': $in-out-expo-value,
+  'in-out-expo-r': $in-out-expo-r-value,
+
+  'in-circ': $in-circ-value,
+  'in-circ-r': $in-circ-r-value,
+  'out-circ': $out-circ-value,
+  'out-circ-r': $out-circ-r-value,
+  'in-out-circ': $in-out-circ-value,
+  'in-out-circ-r': $in-out-circ-r-value,
+
+  'in-back': $in-back-value,
+  'in-back-r': $in-back-r-value,
+  'out-back': $out-back-value,
+  'out-back-r': $out-back-r-value,
+  'in-out-back': $in-out-back-value,
+  'in-out-back-r': $in-out-back-r-value,
+);
+
+/**
+ * Available easings
+ */
+$easings-list: (
+  'in-sine',
+  'in-sine-r',
+  'out-sine',
+  'out-sine-r',
+  'in-out-sine',
+  'in-out-sine-r',
+
+  'in-quad',
+  'in-quad-r',
+  'out-quad',
+  'out-quad-r',
+  'in-out-quad',
+  'in-out-quad-r',
+
+  'in-cubic',
+  'in-cubic-r',
+  'out-cubic',
+  'out-cubic-r',
+  'in-out-cubic',
+  'in-out-cubic-r',
+
+  'in-quart',
+  'in-quart-r',
+  'out-quart',
+  'out-quart-r',
+  'in-out-quart',
+  'in-out-quart-r',
+
+  'in-quint',
+  'in-quint-r',
+  'out-quint',
+  'out-quint-r',
+  'in-out-quint',
+  'in-out-quint-r',
+
+  'in-expo',
+  'in-expo-r',
+  'out-expo',
+  'out-expo-r',
+  'in-out-expo',
+  'in-out-expo-r',
+
+  'in-circ',
+  'in-circ-r',
+  'out-circ',
+  'out-circ-r',
+  'in-out-circ',
+  'in-out-circ-r',
+
+  'in-back',
+  'in-back-r',
+  'out-back',
+  'out-back-r',
+  'in-out-back',
+  'in-out-back-r',
+);