{"id":21594438,"url":"https://github.com/meduzen/easings","last_synced_at":"2025-04-10T23:41:58.407Z","repository":{"id":48177844,"uuid":"230822247","full_name":"meduzen/easings","owner":"meduzen","description":"Easings (cubic-bezier timing functions) as custom properties and SCSS variables.","archived":false,"fork":false,"pushed_at":"2022-11-25T22:49:13.000Z","size":78,"stargazers_count":13,"open_issues_count":5,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-24T20:37:53.366Z","etag":null,"topics":["css","css-custom-properties","cubic-bezier","easings","scss","scss-variables","timing-function"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"wtfpl","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/meduzen.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-30T00:51:51.000Z","updated_at":"2024-10-21T20:20:06.000Z","dependencies_parsed_at":"2022-09-10T19:11:49.453Z","dependency_job_id":null,"html_url":"https://github.com/meduzen/easings","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meduzen%2Feasings","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meduzen%2Feasings/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meduzen%2Feasings/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meduzen%2Feasings/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/meduzen","download_url":"https://codeload.github.com/meduzen/easings/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248148230,"owners_count":21055547,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-custom-properties","cubic-bezier","easings","scss","scss-variables","timing-function"],"created_at":"2024-11-24T17:18:21.857Z","updated_at":"2025-04-10T23:41:58.385Z","avatar_url":"https://github.com/meduzen.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# easings.scss\n\n_easings.scss_ adds a set of CSS [`cubic-bezier`](https://codepen.io/seanseansean/pen/GgxrXw) [timing functions](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) (also named _easings_) as [Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).\n\nThis library brings:\n- a set of easings (and their reversed version!) as CSS custom properties and SASS variables;\n- lighter generated CSS;\n- a [shorter `cubic-bezier()`](#custom-easings) syntax;\n- reversed bezier curves with [`reverse-bezier()`](#reverse-easings);\n- code portability: same syntax as similar libraries.\n\n⚠️ **`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](#installation).** 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](https://github.com/meduzen/easings/tree/v0.3.1#contents).\n\n## Summary\n\n- [Easings list](#easings-list)\n  - [Reversed easings curves](#reversed-easings-curves)\n- [Usage](#usage)\n  - [Custom easings](#custom-easings)\n  - [Reverse easings](#reverse-easings)\n- [Installation](#installation)\n- [Options](#options)\n  - [Partial import (`$easings`)](#partial-import-easings)\n  - [Legacy browsers (`$easings-legacy`)](#legacy-browsers-easings-legacy)\n\n## Easings list\n\nIf you’re familiar with [Bourbon](https://www.bourbon.io/docs/4/#timing-functions)’s easings, they are exactly the same. ([Other visualization](https://codepen.io/slavanossar/full/ERoaBx)).\n\n| easing | in-out | in | out |\n|--|--|--|--|\n| Sine | `$ease-in-out-sine`  | `$ease-in-sine`  | `$ease-out-sine` |\n| Quad | `$ease-in-out-quad`  | `$ease-in-quad`  | `$ease-out-quad` |\n| Cubic | `$ease-in-out-cubic`  | `$ease-in-cubic`  | `$ease-out-cubic` |\n| Quart | `$ease-in-out-quart`  | `$ease-in-quart`  | `$ease-out-quart` |\n| Quint | `$ease-in-out-quint`  | `$ease-in-quint`  | `$ease-out-quint` |\n| Expo | `$ease-in-out-expo`  | `$ease-in-expo`  | `$ease-out-expo` |\n| Circ | `$ease-in-out-circ`  | `$ease-in-circ`  | `$ease-out-circ` |\n| Back | `$ease-in-out-back`  | `$ease-in-back`  | `$ease-out-back` |\n\nAliases for a shorter syntax (not available in Bourbon):\n\n| easing | in-out | in | out |\n|--|--|--|--|\n| Sine | `$in-out-sine`  | `$in-sine`  | `$out-sine` |\n| Quad | `$in-out-quad`  | `$in-quad`  | `$out-quad` |\n| Cubic | `$in-out-cubic`  | `$in-cubic`  | `$out-cubic` |\n| Quart | `$in-out-quart`  | `$in-quart`  | `$out-quart` |\n| Quint | `$in-out-quint`  | `$in-quint`  | `$out-quint` |\n| Expo | `$in-out-expo`  | `$in-expo`  | `$out-expo` |\n| Circ | `$in-out-circ`  | `$in-circ`  | `$out-circ` |\n| Back | `$in-out-back`  | `$in-back`  | `$out-back` |\n\n### Reversed easings curves\n\nFor 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:\n\n- `$ease-in-out-quart-r` is the reversed curve of `$ease-in-out-quart`;\n- `$out-expo-r` is the reversed curve of `$out-expo`.\n\n## Usage\n\nWrite your timing functions powered by CSS Custom Properties the way you want:\n\n```scss\n.my-class {\n\n  // using a custom property…\n  transition: opacity 1.3s var(--in-out-circ);\n\n  // … or a SCSS variable (Bourbon naming)\n  transition: opacity 1.3s $ease-in-out-circ;\n\n  // … or a shorter SCSS variable\n  transition: opacity 1.3s $in-out-circ;\n}\n```\n\nThese syntaxes all lead to the same CSS output:\n```css\n.my-class {\n  transition: opacity 1.3s var(--in-out-circ);\n}\n```\n\n\u003e 💡 If you use Bourbon, no code change is required. Make sure you `@import` _easings.scss_ **after** _Bourbon_, and you’re all set.\n\n### Custom easings\n\n*easings.scss* also adds a `bezier()` function that alias the CSS `cubic-bezier()` one, allowing a shorter syntax for your custom easings.\n\n```scss\n// You can now write this…\n.my-class {\n  transition-timing-function: bezier(.1, .02, 1, .7);\n}\n\n// … instead of\n.my-class {\n  transition-timing-function: cubic-bezier(.1, .02, 1, .7);\n}\n```\n\n#### Reverse easings\n\nIf 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.\n\n```scss\n// 4 parameters\n\n.my-class {\n  transition-timing-function: reverse-bezier(.1, .02, 1, .7);\n}\n\n// 1 parameter\n\n$my-curve-not-reversed-yet: .1, .02, 1, .7;\n\n.my-class {\n  transition-timing-function: reverse-bezier($my-curve-not-reversed-yet);\n}\n\n// r-bezier alias\n\n.my-class {\n  transition-timing-function: r-bezier(.1, .02, 1, .7);\n}\n```\n\n## Installation\n\n💡 `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.\n\n\u003cdetails\u003e\n\n\u003csummary\u003eIf you’re not sure which one your project uses, this might help.\u003c/summary\u003e\n\n- 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**.\n- If the project uses Dart SASS (`sass`) **and** if you import SCSS files using `@use` or `@forward`, you are using **the new spec**.\n- 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.\n\n\u003c/details\u003e\n\n### Projects using Dart SASS\n\n**Dart SASS support starts at version 1.0.**\n\n- `npm install easings.scss` pulls the package into your project;\n- `@use 'easings.scss' as *;` 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.\n\n### Projects using `node-sass`\n\n1. `npm install easings.scss@node-sass` pulls the package into your project.\n2. `@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.\n\n### Full import\n\nThe sole `@import` or `@use` statement…\n\n```scss\n@use 'easings.scss'; // easings.scss 1.x\n@import 'easings.scss'; // easings.scss 0.x\n```\n\n… already outputs:\n\n```css\n:root {\n  --in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);\n  --out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);\n  --in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);\n  --in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);\n  /* all 18 other easings… */\n  --out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  --in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n```\n\n## Options\n\n### Partial import (`$easings`)\n\nIf you don’t want to import everything, write an `$easings` list before the `@use` (or `@import`) statement:\n\n```scss\n// your minimal list of easings\n$easings: 'in-out-quad', 'in-out-quad-r', 'out-circ', 'in-out-back';\n\n@use 'easings.scss' with($easings: $easings); // easings.scss 1.x\n@import 'easings.scss'; // easings.scss 0.x\n```\n\nThis will only output the needed Custom Properties, instead of the 24 available:\n\n```css\n:root {\n  --in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);\n  --in-out-quad-r: cubic-bezier(0.485, 0.045, 0.545, 0.97);\n  --out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);\n  --in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n```\n\n\u003e 💡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:\n\u003e\n\u003e ```scss\n\u003e $in-out-cubic-value: 0.645, 0.045, 0.355, 1;\n\u003e $in-out-cubic-r-value: 0.645, 0, 0.355, 0.955;\n\u003e ```\n\n### Legacy browsers (`$easings-legacy`)\n\nIf you don’t want to output custom properties, set `$easings-legacy` to `true`:\n\n```scss\n// easings.scss 1.x\n@use 'easings.scss' with($easings-legacy: true);\n\n// easings.scss 0.x\n$easings-legacy: true;\n@import 'easings.scss';\n```\n\nWith this legacy flag, no CSS will be generated in `:root`. SCSS variables will output a `cubic-bezier` function instead of a Custom Property:\n\nExample SCSS code:\n```scss\n.my-class {\n  transition: opacity 1.3s $ease-in-out-circ;\n}\n```\n\nGenerated CSS:\n\n```css\n/* with `$easings-legacy: true;` */\n.my-class {\n  transition: opacity 1.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n\n/* without `$easings-legacy` */\n.my-class {\n  transition: opacity 1.3s var(--in-out-circ);\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeduzen%2Feasings","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeduzen%2Feasings","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeduzen%2Feasings/lists"}