diff --git a/README.md b/README.md index 6beeff3..d319517 100644 --- a/README.md +++ b/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); -} -``` diff --git a/package.json b/package.json index 742b1f4..a93476c 100644 --- a/package.json +++ b/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": { diff --git a/src/easings.scss b/src/easings.scss index 98cd60d..cdbe867 100644 --- a/src/easings.scss +++ b/src/easings.scss @@ -1,4 +1,4 @@ -@import 'functions/bezier'; +@import 'functions/functions'; @import 'easings/easings'; /** diff --git a/src/easings/_in-back.scss b/src/easings/_in-back.scss deleted file mode 100644 index e5c4352..0000000 --- a/src/easings/_in-back.scss +++ /dev/null @@ -1,3 +0,0 @@ -$in-back-value: .6, -.28, .735, .045; -$in-back: get-bezier('in-back', $in-back-value); -$ease-in-back: get-bezier('in-back', $in-back-value); diff --git a/src/easings/_in-circ.scss b/src/easings/_in-circ.scss deleted file mode 100644 index af89dd8..0000000 --- a/src/easings/_in-circ.scss +++ /dev/null @@ -1,3 +0,0 @@ -$in-circ-value: .6, .04, .98, .335; -$in-circ: get-bezier('in-circ', $in-circ-value); -$ease-in-circ: get-bezier('in-circ', $in-circ-value); diff --git a/src/easings/_in-cubic.scss b/src/easings/_in-cubic.scss deleted file mode 100644 index 38edf40..0000000 --- a/src/easings/_in-cubic.scss +++ /dev/null @@ -1,3 +0,0 @@ -$in-cubic-value: .55, .055, .675, .19; -$in-cubic: get-bezier('in-cubic', $in-cubic-value); -$ease-in-cubic: get-bezier('in-cubic', $in-cubic-value); diff --git a/src/easings/_in-expo.scss b/src/easings/_in-expo.scss deleted file mode 100644 index b40d4f2..0000000 --- a/src/easings/_in-expo.scss +++ /dev/null @@ -1,3 +0,0 @@ -$in-expo-value: .95, .05, .795, .035; -$in-expo: get-bezier('in-expo', $in-expo-value); -$ease-in-expo: get-bezier('in-expo', $in-expo-value); diff --git a/src/easings/_in-out-back.scss b/src/easings/_in-out-back.scss deleted file mode 100644 index 766a324..0000000 --- a/src/easings/_in-out-back.scss +++ /dev/null @@ -1,3 +0,0 @@ -$in-out-back-value: .68, -.55, .265, 1.55; -$in-out-back: get-bezier('in-out-back', $in-out-back-value); -$ease-in-out-back: get-bezier('in-out-back', $in-out-back-value); diff --git a/src/easings/_in-out-circ.scss b/src/easings/_in-out-circ.scss deleted file mode 100644 index 3debcbd..0000000 --- a/src/easings/_in-out-circ.scss +++ /dev/null @@ -1,3 +0,0 @@ -$in-out-circ-value: .785, .135, .15, .86; -$in-out-circ: get-bezier('in-out-circ', $in-out-circ-value); -$ease-in-out-circ: get-bezier('in-out-circ', $in-out-circ-value); diff --git a/src/easings/_in-out-cubic.scss b/src/easings/_in-out-cubic.scss deleted file mode 100644 index b13d203..0000000 --- a/src/easings/_in-out-cubic.scss +++ /dev/null @@ -1,3 +0,0 @@ -$in-out-cubic-value: .645, .045, .355, 1; -$in-out-cubic: get-bezier('in-out-cubic', $in-out-cubic-value); -$ease-in-out-cubic: get-bezier('in-out-cubic', $in-out-cubic-value); diff --git a/src/easings/_in-out-expo.scss b/src/easings/_in-out-expo.scss deleted file mode 100644 index 80e3fee..0000000 --- a/src/easings/_in-out-expo.scss +++ /dev/null @@ -1,3 +0,0 @@ -$in-out-expo-value: 1, 0, 0, 1; -$in-out-expo: get-bezier('in-out-expo', $in-out-expo-value); -$ease-in-out-expo: get-bezier('in-out-expo', $in-out-expo-value); diff --git a/src/easings/_in-out-quad.scss b/src/easings/_in-out-quad.scss deleted file mode 100644 index 36db9a1..0000000 --- a/src/easings/_in-out-quad.scss +++ /dev/null @@ -1,3 +0,0 @@ -$in-out-quad-value: .455, .03, .515, .955; -$in-out-quad: get-bezier('in-out-quad', $in-out-quad-value); -$ease-in-out-quad: get-bezier('in-out-quad', $in-out-quad-value); diff --git a/src/easings/_in-out-quart.scss b/src/easings/_in-out-quart.scss deleted file mode 100644 index e85c6a2..0000000 --- a/src/easings/_in-out-quart.scss +++ /dev/null @@ -1,3 +0,0 @@ -$in-out-quart-value: .77, 0, .175, 1; -$in-out-quart: get-bezier('in-out-quart', $in-out-quart-value); -$ease-in-out-quart: get-bezier('in-out-quart', $in-out-quart-value); diff --git a/src/easings/_in-out-quint.scss b/src/easings/_in-out-quint.scss deleted file mode 100644 index da6f359..0000000 --- a/src/easings/_in-out-quint.scss +++ /dev/null @@ -1,3 +0,0 @@ -$in-out-quint-value: .86, 0, .07, 1; -$in-out-quint: get-bezier('in-out-quint', $in-out-quint-value); -$ease-in-out-quint: get-bezier('in-out-quint', $in-out-quint-value); diff --git a/src/easings/_in-out-sine.scss b/src/easings/_in-out-sine.scss deleted file mode 100644 index 97ab151..0000000 --- a/src/easings/_in-out-sine.scss +++ /dev/null @@ -1,3 +0,0 @@ -$in-out-sine-value: .445, .05, .55, .95; -$in-out-sine: get-bezier('in-out-sine', $in-out-sine-value); -$ease-in-out-sine: get-bezier('in-out-sine', $in-out-sine-value); diff --git a/src/easings/_in-quad.scss b/src/easings/_in-quad.scss deleted file mode 100644 index 7bb89f8..0000000 --- a/src/easings/_in-quad.scss +++ /dev/null @@ -1,3 +0,0 @@ -$in-quad-value: .55, .085, .68, .53; -$in-quad: get-bezier('in-quad', $in-quad-value); -$ease-in-quad: get-bezier('in-quad', $in-quad-value); diff --git a/src/easings/_in-quart.scss b/src/easings/_in-quart.scss deleted file mode 100644 index 2ba6399..0000000 --- a/src/easings/_in-quart.scss +++ /dev/null @@ -1,3 +0,0 @@ -$in-quart-value: .895, .03, .685, .22; -$in-quart: get-bezier('in-quart', $in-quart-value); -$ease-in-quart: get-bezier('in-quart', $in-quart-value); diff --git a/src/easings/_in-quint.scss b/src/easings/_in-quint.scss deleted file mode 100644 index 3b70dc6..0000000 --- a/src/easings/_in-quint.scss +++ /dev/null @@ -1,3 +0,0 @@ -$in-quint-value: .755, .05, .855, .06; -$in-quint: get-bezier('in-quint', $in-quint-value); -$ease-in-quint: get-bezier('in-quint', $in-quint-value); diff --git a/src/easings/_in-sine.scss b/src/easings/_in-sine.scss deleted file mode 100644 index 1df4a32..0000000 --- a/src/easings/_in-sine.scss +++ /dev/null @@ -1,3 +0,0 @@ -$in-sine-value: .47, 0, .745, .715; -$in-sine: get-bezier('in-sine', $in-sine-value); -$ease-in-sine: get-bezier('in-sine', $in-sine-value); diff --git a/src/easings/_list-and-mapping.scss b/src/easings/_list-and-mapping.scss new file mode 100644 index 0000000..034624d --- /dev/null +++ b/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', +); diff --git a/src/easings/_out-back.scss b/src/easings/_out-back.scss deleted file mode 100644 index d878ba0..0000000 --- a/src/easings/_out-back.scss +++ /dev/null @@ -1,3 +0,0 @@ -$out-back-value: .175, .885, .32, 1.275; -$out-back: get-bezier('out-back', $out-back-value); -$ease-out-back: get-bezier('out-back', $out-back-value); diff --git a/src/easings/_out-circ.scss b/src/easings/_out-circ.scss deleted file mode 100644 index 9550b09..0000000 --- a/src/easings/_out-circ.scss +++ /dev/null @@ -1,3 +0,0 @@ -$out-circ-value: .075, .82, .165, 1; -$out-circ: get-bezier('out-circ', $out-circ-value); -$ease-out-circ: get-bezier('out-circ', $out-circ-value); diff --git a/src/easings/_out-cubic.scss b/src/easings/_out-cubic.scss deleted file mode 100644 index 9826ddc..0000000 --- a/src/easings/_out-cubic.scss +++ /dev/null @@ -1,3 +0,0 @@ -$out-cubic-value: .215, .61, .355, 1; -$out-cubic: get-bezier('out-cubic', $out-cubic-value); -$ease-out-cubic: get-bezier('out-cubic', $out-cubic-value); diff --git a/src/easings/_out-expo.scss b/src/easings/_out-expo.scss deleted file mode 100644 index 502600b..0000000 --- a/src/easings/_out-expo.scss +++ /dev/null @@ -1,3 +0,0 @@ -$out-expo-value: .19, 1, .22, 1; -$out-expo: get-bezier('out-expo', $out-expo-value); -$ease-out-expo: get-bezier('out-expo', $out-expo-value); diff --git a/src/easings/_out-quad.scss b/src/easings/_out-quad.scss deleted file mode 100644 index 555917f..0000000 --- a/src/easings/_out-quad.scss +++ /dev/null @@ -1,3 +0,0 @@ -$out-quad-value: .25, .46, .45, .94; -$out-quad: get-bezier('out-quad', $out-quad-value); -$ease-out-quad: get-bezier('out-quad', $out-quad-value); diff --git a/src/easings/_out-quart.scss b/src/easings/_out-quart.scss deleted file mode 100644 index 20a1490..0000000 --- a/src/easings/_out-quart.scss +++ /dev/null @@ -1,3 +0,0 @@ -$out-quart-value: .165, .84, .44, 1; -$out-quart: get-bezier('out-quart', $out-quart-value); -$ease-out-quart: get-bezier('out-quart', $out-quart-value); diff --git a/src/easings/_out-quint.scss b/src/easings/_out-quint.scss deleted file mode 100644 index 302206f..0000000 --- a/src/easings/_out-quint.scss +++ /dev/null @@ -1,3 +0,0 @@ -$out-quint-value: .23, 1, .32, 1; -$out-quint: get-bezier('out-quint', $out-quint-value); -$ease-out-quint: get-bezier('out-quint', $out-quint-value); diff --git a/src/easings/_out-sine.scss b/src/easings/_out-sine.scss deleted file mode 100644 index 2fc226f..0000000 --- a/src/easings/_out-sine.scss +++ /dev/null @@ -1,3 +0,0 @@ -$out-sine-value: .39, .575, .565, 1; -$out-sine: get-bezier('out-sine', $out-sine-value); -$ease-out-sine: get-bezier('out-sine', $out-sine-value); diff --git a/src/easings/_timings.scss b/src/easings/_timings.scss new file mode 100644 index 0000000..10ead73 --- /dev/null +++ b/src/easings/_timings.scss @@ -0,0 +1,36 @@ +/** + * The four esaings coordinates for each easing + */ +$easings-values: ( + 'in-sine': ('x1': .47, 'y1': 0, 'x2': .745, 'y2': .715), + 'out-sine': ('x1': .39, 'y1': .575, 'x2': .565, 'y2': 1), + 'in-out-sine': ('x1': .445, 'y1': .05, 'x2': .55, 'y2': .95), + + 'in-quad': ('x1': .55, 'y1': .085, 'x2': .68, 'y2': .53), + 'out-quad': ('x1': .25, 'y1': .46, 'x2': .45, 'y2': .94), + 'in-out-quad': ('x1': .455, 'y1': .03, 'x2': .515, 'y2': .955), + + 'in-cubic': ('x1': .55, 'y1': .055, 'x2': .675, 'y2': .19), + 'out-cubic': ('x1': .215, 'y1': .61, 'x2': .355, 'y2': 1), + 'in-out-cubic': ('x1': .645, 'y1': .045, 'x2': .355, 'y2': 1), + + 'in-quart': ('x1': .895, 'y1': .03, 'x2': .685, 'y2': .22), + 'out-quart': ('x1': .165, 'y1': .84, 'x2': .44, 'y2': 1), + 'in-out-quart': ('x1': .77, 'y1': 0, 'x2': .175, 'y2': 1), + + 'in-quint': ('x1': .755, 'y1': .05, 'x2': .855, 'y2': .06), + 'out-quint': ('x1': .23, 'y1': 1, 'x2': .32, 'y2': 1), + 'in-out-quint': ('x1': .86, 'y1': 0, 'x2': .07, 'y2': 1), + + 'in-expo': ('x1': .95, 'y1': .05, 'x2': .795, 'y2': .035), + 'out-expo': ('x1': .19, 'y1': 1, 'x2': .22, 'y2': 1), + 'in-out-expo': ('x1': 1, 'y1': 0, 'x2': 0, 'y2': 1), + + 'in-circ': ('x1': .6, 'y1': .04, 'x2': .98, 'y2': .335), + 'out-circ': ('x1': .075, 'y1': .82, 'x2': .165, 'y2': 1), + 'in-out-circ': ('x1': .785, 'y1': .135, 'x2': .15, 'y2': .86), + + 'in-back': ('x1': .6, 'y1': -.28, 'x2': .735, 'y2': .045), + 'out-back': ('x1': .175, 'y1': .885, 'x2': .32, 'y2': 1.275), + 'in-out-back': ('x1': .68, 'y1': -.55, 'x2': .265, 'y2': 1.55), +); diff --git a/src/easings/_variables.scss b/src/easings/_variables.scss new file mode 100644 index 0000000..b602f53 --- /dev/null +++ b/src/easings/_variables.scss @@ -0,0 +1,252 @@ +/** + * Available variables + * + * How it works: + * + * $in-[easingName]-value: coordinates (e.g, `.47, 0, .745, .715`). + * $in-[easingName]-r-value: coordinates for reversed easing. + * + * $in-[easingName]: see functions/helpers. + * $ease-in-[easingName]: alias for previous line. + * $in-[easingName]-r: reverse for previous line. + * $ease-in-[easingName]-r: alias for previous line. + */ + +// in-sine + +$in-sine-value: bezier-x1(in-sine), bezier-y1(in-sine), bezier-x2(in-sine), bezier-y2(in-sine); +$in-sine-r-value: reverse-bezier-value(in-sine); + +$in-sine: get-bezier('in-sine', $in-sine-value); +$ease-in-sine: $in-sine; +$in-sine-r: get-bezier('in-sine-r', $in-sine-r-value); +$ease-in-sine-r: $in-sine-r; + +// out-sine + +$out-sine-value: bezier-x1(out-sine), bezier-y1(out-sine), bezier-x2(out-sine), bezier-y2(out-sine); +$out-sine-r-value: reverse-bezier-value(out-sine); + +$out-sine: get-bezier('out-sine', $out-sine-value); +$ease-out-sine: $out-sine; +$out-sine-r: get-bezier('out-sine-r', $out-sine-r-value); +$ease-out-sine-r: $out-sine-r; + +// in-out-sine + +$in-out-sine-value: bezier-x1(in-out-sine), bezier-y1(in-out-sine), bezier-x2(in-out-sine), bezier-y2(in-out-sine); +$in-out-sine-r-value: reverse-bezier-value(in-out-sine); + +$in-out-sine: get-bezier('in-out-sine', $in-out-sine-value); +$ease-in-out-sine: $in-out-sine; +$in-out-sine-r: get-bezier('in-out-sine-r', $in-out-sine-r-value); +$ease-in-out-sine-r: $in-out-sine-r; + +// in-quad + +$in-quad-value: bezier-x1(in-quad), bezier-y1(in-quad), bezier-x2(in-quad), bezier-y2(in-quad); +$in-quad-r-value: reverse-bezier-value(in-quad); + +$in-quad: get-bezier('in-quad', $in-quad-value); +$ease-in-quad: $in-quad; +$in-quad-r: get-bezier('in-quad-r', $in-quad-r-value); +$ease-in-quad-r: $in-quad-r; + +// out-quad + +$out-quad-value: bezier-x1(out-quad), bezier-y1(out-quad), bezier-x2(out-quad), bezier-y2(out-quad); +$out-quad-r-value: reverse-bezier-value(out-quad); + +$out-quad: get-bezier('out-quad', $out-quad-value); +$ease-out-quad: $out-quad; +$out-quad-r: get-bezier('out-quad-r', $out-quad-r-value); +$ease-out-quad-r: $out-quad-r; + +// in-out-quad + +$in-out-quad-value: bezier-x1(in-out-quad), bezier-y1(in-out-quad), bezier-x2(in-out-quad), bezier-y2(in-out-quad); +$in-out-quad-r-value: reverse-bezier-value(in-out-quad); + +$in-out-quad: get-bezier('in-out-quad', $in-out-quad-value); +$ease-in-out-quad: $in-out-quad; +$in-out-quad-r: get-bezier('in-out-quad-r', $in-out-quad-r-value); +$ease-in-out-quad-r: $in-out-quad-r; + +// in-cubic + +$in-cubic-value: bezier-x1(in-cubic), bezier-y1(in-cubic), bezier-x2(in-cubic), bezier-y2(in-cubic); +$in-cubic-r-value: reverse-bezier-value(in-cubic); + +$in-cubic: get-bezier('in-cubic', $in-cubic-value); +$ease-in-cubic: $in-cubic; +$in-cubic-r: get-bezier('in-cubic-r', $in-cubic-r-value); +$ease-in-cubic-r: $in-cubic-r; + +// out-cubic + +$out-cubic-value: bezier-x1(out-cubic), bezier-y1(out-cubic), bezier-x2(out-cubic), bezier-y2(out-cubic); +$out-cubic-r-value: reverse-bezier-value(out-cubic); + +$out-cubic: get-bezier('out-cubic', $out-cubic-value); +$ease-out-cubic: $out-cubic; +$out-cubic-r: get-bezier('out-cubic-r', $out-cubic-r-value); +$ease-out-cubic-r: $out-cubic-r; + +// in-out-cubic + +$in-out-cubic-value: bezier-x1(in-out-cubic), bezier-y1(in-out-cubic), bezier-x2(in-out-cubic), bezier-y2(in-out-cubic); +$in-out-cubic-r-value: reverse-bezier-value(in-out-cubic); + +$in-out-cubic: get-bezier('in-out-cubic', $in-out-cubic-value); +$ease-in-out-cubic: $in-out-cubic; +$in-out-cubic-r: get-bezier('in-out-cubic-r', $in-out-cubic-r-value); +$ease-in-out-cubic-r: $in-out-cubic-r; + +// in-quart + +$in-quart-value: bezier-x1(in-quart), bezier-y1(in-quart), bezier-x2(in-quart), bezier-y2(in-quart); +$in-quart-r-value: reverse-bezier-value(in-quart); + +$in-quart: get-bezier('in-quart', $in-quart-value); +$ease-in-quart: $in-quart; +$in-quart-r: get-bezier('in-quart-r', $in-quart-r-value); +$ease-in-quart-r: $in-quart-r; + +// out-quart + +$out-quart-value: bezier-x1(out-quart), bezier-y1(out-quart), bezier-x2(out-quart), bezier-y2(out-quart); +$out-quart-r-value: reverse-bezier-value(out-quart); + +$out-quart: get-bezier('out-quart', $out-quart-value); +$ease-out-quart: $out-quart; +$out-quart-r: get-bezier('out-quart-r', $out-quart-r-value); +$ease-out-quart-r: $out-quart-r; + +// in-out-quart + +$in-out-quart-value: bezier-x1(in-out-quart), bezier-y1(in-out-quart), bezier-x2(in-out-quart), bezier-y2(in-out-quart); +$in-out-quart-r-value: reverse-bezier-value(in-out-quart); + +$in-out-quart: get-bezier('in-out-quart', $in-out-quart-value); +$ease-in-out-quart: $in-out-quart; +$in-out-quart-r: get-bezier('in-out-quart-r', $in-out-quart-r-value); +$ease-in-out-quart-r: $in-out-quart-r; + +// in-quint + +$in-quint-value: bezier-x1(in-quint), bezier-y1(in-quint), bezier-x2(in-quint), bezier-y2(in-quint); +$in-quint-r-value: reverse-bezier-value(in-quint); + +$in-quint: get-bezier('in-quint', $in-quint-value); +$ease-in-quint: $in-quint; +$in-quint-r: get-bezier('in-quint-r', $in-quint-r-value); +$ease-in-quint-r: $in-quint-r; + +// out-quint + +$out-quint-value: bezier-x1(out-quint), bezier-y1(out-quint), bezier-x2(out-quint), bezier-y2(out-quint); +$out-quint-r-value: reverse-bezier-value(out-quint); + +$out-quint: get-bezier('out-quint', $out-quint-value); +$ease-out-quint: $out-quint; +$out-quint-r: get-bezier('out-quint-r', $out-quint-r-value); +$ease-out-quint-r: $out-quint-r; + +// in-out-quint + +$in-out-quint-value: bezier-x1(in-out-quint), bezier-y1(in-out-quint), bezier-x2(in-out-quint), bezier-y2(in-out-quint); +$in-out-quint-r-value: reverse-bezier-value(in-out-quint); + +$in-out-quint: get-bezier('in-out-quint', $in-out-quint-value); +$ease-in-out-quint: $in-out-quint; +$in-out-quint-r: get-bezier('in-out-quint-r', $in-out-quint-r-value); +$ease-in-out-quint-r: $in-out-quint-r; + +// in-expo + +$in-expo-value: bezier-x1(in-expo), bezier-y1(in-expo), bezier-x2(in-expo), bezier-y2(in-expo); +$in-expo-r-value: reverse-bezier-value(in-expo); + +$in-expo: get-bezier('in-expo', $in-expo-value); +$ease-in-expo: $in-expo; +$in-expo-r: get-bezier('in-expo-r', $in-expo-r-value); +$ease-in-expo-r: $in-expo-r; + +// out-expo + +$out-expo-value: bezier-x1(out-expo), bezier-y1(out-expo), bezier-x2(out-expo), bezier-y2(out-expo); +$out-expo-r-value: reverse-bezier-value(out-expo); + +$out-expo: get-bezier('out-expo', $out-expo-value); +$ease-out-expo: $out-expo; +$out-expo-r: get-bezier('out-expo-r', $out-expo-r-value); +$ease-out-expo-r: $out-expo-r; + +// in-out-expo + +$in-out-expo-value: bezier-x1(in-out-expo), bezier-y1(in-out-expo), bezier-x2(in-out-expo), bezier-y2(in-out-expo); +$in-out-expo-r-value: reverse-bezier-value(in-out-expo); + +$in-out-expo: get-bezier('in-out-expo', $in-out-expo-value); +$ease-in-out-expo: $in-out-expo; +$in-out-expo-r: get-bezier('in-out-expo-r', $in-out-expo-r-value); +$ease-in-out-expo-r: $in-out-expo-r; + +// in-circ + +$in-circ-value: bezier-x1(in-circ), bezier-y1(in-circ), bezier-x2(in-circ), bezier-y2(in-circ); +$in-circ-r-value: reverse-bezier-value(in-circ); +$in-circ: get-bezier('in-circ', $in-circ-value); +$ease-in-circ: $in-circ; +$in-circ-r: get-bezier('in-circ-r', $in-circ-r-value); +$ease-in-circ-r: $in-circ-r; + +// out-circ + +$out-circ-value: bezier-x1(out-circ), bezier-y1(out-circ), bezier-x2(out-circ), bezier-y2(out-circ); +$out-circ-r-value: reverse-bezier-value(out-circ); + +$out-circ: get-bezier('out-circ', $out-circ-value); +$ease-out-circ: $out-circ; +$out-circ-r: get-bezier('out-circ-r', $out-circ-r-value); +$ease-out-circ-r: $out-circ-r; + +// in-out-circ + +$in-out-circ-value: bezier-x1(in-out-circ), bezier-y1(in-out-circ), bezier-x2(in-out-circ), bezier-y2(in-out-circ); +$in-out-circ-r-value: reverse-bezier-value(in-out-circ); + +$in-out-circ: get-bezier('in-out-circ', $in-out-circ-value); +$ease-in-out-circ: $in-out-circ; +$in-out-circ-r: get-bezier('in-out-circ-r', $in-out-circ-r-value); +$ease-in-out-circ-r: $in-out-circ-r; + +// in-back + +$in-back-value: bezier-x1(in-back), bezier-y1(in-back), bezier-x2(in-back), bezier-y2(in-back); +$in-back-r-value: reverse-bezier-value(in-back); + +$in-back: get-bezier('in-back', $in-back-value); +$ease-in-back: $in-back; +$in-back-r: get-bezier('in-back-r', $in-back-r-value); +$ease-in-back-r: $in-back-r; + +// out-back + +$out-back-value: bezier-x1(out-back), bezier-y1(out-back), bezier-x2(out-back), bezier-y2(out-back); +$out-back-r-value: reverse-bezier-value(out-back); + +$out-back: get-bezier('out-back', $out-back-value); +$ease-out-back: $out-back; +$out-back-r: get-bezier('out-back-r', $out-back-r-value); +$ease-out-back-r: $out-back-r; + +// in-out-back + +$in-out-back-value: bezier-x1(in-out-back), bezier-y1(in-out-back), bezier-x2(in-out-back), bezier-y2(in-out-back); +$in-out-back-r-value: reverse-bezier-value(in-out-back); + +$in-out-back: get-bezier('in-out-back', $in-out-back-value); +$ease-in-out-back: $in-out-back; +$in-out-back-r: get-bezier('in-out-back-r', $in-out-back-r-value); +$ease-in-out-back-r: $in-out-back-r; diff --git a/src/easings/easings.scss b/src/easings/easings.scss index ee8f02e..a47aabe 100644 --- a/src/easings/easings.scss +++ b/src/easings/easings.scss @@ -1,105 +1,3 @@ -@import 'in-sine'; -@import 'out-sine'; -@import 'in-out-sine'; - -@import 'in-quad'; -@import 'out-quad'; -@import 'in-out-quad'; - -@import 'in-cubic'; -@import 'out-cubic'; -@import 'in-out-cubic'; - -@import 'in-quart'; -@import 'out-quart'; -@import 'in-out-quart'; - -@import 'in-quint'; -@import 'out-quint'; -@import 'in-out-quint'; - -@import 'in-expo'; -@import 'out-expo'; -@import 'in-out-expo'; - -@import 'in-circ'; -@import 'out-circ'; -@import 'in-out-circ'; - -@import 'in-back'; -@import 'out-back'; -@import 'in-out-back'; - -/** - * The value associated to each easing - */ -$easings-map: ( - 'in-sine': $in-sine-value, - 'out-sine': $out-sine-value, - 'in-out-sine': $in-out-sine-value, - - 'in-quad': $in-quad-value, - 'out-quad': $out-quad-value, - 'in-out-quad': $in-out-quad-value, - - 'in-cubic': $in-cubic-value, - 'out-cubic': $out-cubic-value, - 'in-out-cubic': $in-out-cubic-value, - - 'in-quart': $in-quart-value, - 'out-quart': $out-quart-value, - 'in-out-quart': $in-out-quart-value, - - 'in-quint': $in-quint-value, - 'out-quint': $out-quint-value, - 'in-out-quint': $in-out-quint-value, - - 'in-expo': $in-expo-value, - 'out-expo': $out-expo-value, - 'in-out-expo': $in-out-expo-value, - - 'in-circ': $in-circ-value, - 'out-circ': $out-circ-value, - 'in-out-circ': $in-out-circ-value, - - 'in-back': $in-back-value, - 'out-back': $out-back-value, - 'in-out-back': $in-out-back-value, -); - -/** - * Available easings - */ -$easings-list: ( - 'in-sine', - 'out-sine', - 'in-out-sine', - - 'in-quad', - 'out-quad', - 'in-out-quad', - - 'in-cubic', - 'out-cubic', - 'in-out-cubic', - - 'in-quart', - 'out-quart', - 'in-out-quart', - - 'in-quint', - 'out-quint', - 'in-out-quint', - - 'in-expo', - 'out-expo', - 'in-out-expo', - - 'in-circ', - 'out-circ', - 'in-out-circ', - - 'in-back', - 'out-back', - 'in-out-back', -); +@import 'timings'; +@import 'variables'; +@import 'list-and-mapping'; diff --git a/src/functions/_bezier.scss b/src/functions/_bezier.scss new file mode 100644 index 0000000..4822f64 --- /dev/null +++ b/src/functions/_bezier.scss @@ -0,0 +1,42 @@ +/** + * ALIAS FOR THE CSS cubic-bezier FUNCTION + * + * Use: + * `transition-timing-function: bezier(.1, .02, 1, .7);` + */ +@function bezier($args...) { + @return #{'cubic-bezier(#{$args})'}; +} + +/** + * REVERSE A cubic-bezier TIMING FUNCTION + * + * Use: + * `transition-timing-function: reverse-bezier(.1, .02, 1, .7);` + * `transition-timing-function: reverse-bezier($in-out-quad-value);` + */ +@function reverse-bezier($args...) { + + // Turn single argument into 4 arguments + @if length($args) == 1 and length(nth($args, 1)) == 4 { + $args: nth($args, 1); + } + + $x1: nth($args, 1); + $y1: nth($args, 2); + $x2: nth($args, 3); + $y2: nth($args, 4); + + @return #{'cubic-bezier(#{1 - $x2}, #{1 - $y2}, #{1 - $x1}, #{1 - $y1})'}; +} + +/** + * ALIAS TO reverse-bezier + */ +@function r-bezier($args...) { + @if length($args) == 1 and length(nth($args, 1)) == 4 { + $args: nth($args, 1); + } + + @return reverse-bezier($args); +} diff --git a/src/functions/_helpers.scss b/src/functions/_helpers.scss new file mode 100644 index 0000000..31dfb1a --- /dev/null +++ b/src/functions/_helpers.scss @@ -0,0 +1,46 @@ +/** + * RETURNS A cubic bezier TIMING FUNCTION. + + * Modern browsers will get a custom property, legacy browsers will get a + * `cubic-bezier()` function. + */ +@function get-bezier($name, $value) { + @if variable-exists('easings-legacy') == false or $easings-legacy == false { + @return var(--#{$name}); + } @else { + @return cubic-bezier($value); + } +} + +/** + * RETURNS VALUE(S) FOR A NAMED TIMING FUNCTION. + */ + +@function bezier-value($name, $coordinate) { + @return map-get(map-get($easings-values, $name), $coordinate); +} + +@function reverse-bezier-value($name) { + $x1: bezier-x1($name); + $y1: bezier-y1($name); + $x2: bezier-x2($name); + $y2: bezier-y2($name); + + @return 1 - $x2, 1 - $y2, 1 - $x1, 1 - $y1; +} + +@function bezier-x1($name) { + @return bezier-value($name, 'x1'); +} + +@function bezier-y1($name) { + @return bezier-value($name, 'y1'); +} + +@function bezier-x2($name) { + @return bezier-value($name, 'x2'); +} + +@function bezier-y2($name) { + @return bezier-value($name, 'y2'); +} diff --git a/src/functions/bezier.scss b/src/functions/bezier.scss deleted file mode 100644 index f723e38..0000000 --- a/src/functions/bezier.scss +++ /dev/null @@ -1,23 +0,0 @@ -/** - * RETURNS A cubic bezier TIMING FUNCTION. - - * Modern browsers will get a custom property, legacy browsers will get a - * `cubic-bezier()` function. - */ -@function get-bezier($name, $value) { - @if variable-exists('easings-legacy') == false or $easings-legacy == false { - @return var(--#{$name}); - } @else { - @return cubic-bezier($value); - } -} - -/** - * ALIAS FOR THE CSS cubic-bezier FUNCTION - * - * Use: - * `transition-timing-function: bezier(.1, .02, 1, .7);` - */ -@function bezier($args...) { - @return #{'cubic-bezier(#{$args})'}; -} diff --git a/src/functions/functions.scss b/src/functions/functions.scss new file mode 100644 index 0000000..d1b096f --- /dev/null +++ b/src/functions/functions.scss @@ -0,0 +1,2 @@ +@import 'helpers'; +@import 'bezier';