{"id":14977599,"url":"https://github.com/okikio/postcss-spring-easing","last_synced_at":"2025-10-28T04:31:48.188Z","repository":{"id":165089470,"uuid":"640440360","full_name":"okikio/postcss-spring-easing","owner":"okikio","description":"PostCSS plugin to add that bounce and boogie that only springs can bring","archived":false,"fork":false,"pushed_at":"2023-06-09T07:45:09.000Z","size":7450,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-10-02T13:13:05.893Z","etag":null,"topics":["easings","linear","postcss","postcss-plugin","spring","spring-easing"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/okikio.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-14T05:03:09.000Z","updated_at":"2024-12-21T17:24:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"9cb219e1-1ba1-4b4d-a41d-18e557c112f1","html_url":"https://github.com/okikio/postcss-spring-easing","commit_stats":{"total_commits":24,"total_committers":3,"mean_commits":8.0,"dds":"0.29166666666666663","last_synced_commit":"6eeaa6ec74f03d774c4e1599ef9f86a9f9a37afe"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":"okikio/spring-easing","purl":"pkg:github/okikio/postcss-spring-easing","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/okikio%2Fpostcss-spring-easing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/okikio%2Fpostcss-spring-easing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/okikio%2Fpostcss-spring-easing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/okikio%2Fpostcss-spring-easing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/okikio","download_url":"https://codeload.github.com/okikio/postcss-spring-easing/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/okikio%2Fpostcss-spring-easing/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281386564,"owners_count":26492014,"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","status":"online","status_checked_at":"2025-10-28T02:00:06.022Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["easings","linear","postcss","postcss-plugin","spring","spring-easing"],"created_at":"2024-09-24T13:55:58.106Z","updated_at":"2025-10-28T04:31:46.462Z","avatar_url":"https://github.com/okikio.png","language":"TypeScript","readme":"# postcss-spring-easing\n\n[![Open Bundle](https://bundlejs.com/badge-light.svg)](https://bundlejs.com/?q=postcss-spring-easing\u0026bundle \"Check the total bundle size of postcss-spring-easing with whichever animation library you choose.\")\n\n\u003c!-- ![](https://deno.bundlejs.com/badge?q=postcss-spring-easing) --\u003e\n\n[NPM](https://www.npmjs.com/package/postcss-spring-easing) \u003cspan style=\"padding-inline: 1rem\"\u003e|\u003c/span\u003e [GitHub](https://github.com/okikio/postcss-spring-easing#readme) \u003cspan style=\"padding-inline: 1rem\"\u003e|\u003c/span\u003e  [Licence](./LICENSE)\n\nWant your CSS animations to bounce and boogie 🕺 ? You've come to the right place! \n\nThis PostCSS plugin gives your CSS the superpower to create \"spring\" animations, bringing your websites to life! Inspired by [postcss-easings](https://github.com/postcss/postcss-easings), it replaces `spring()` functions with a `linear()` easing function.\n\n\nHere's a glimpse of how you can use it in your CSS:\n\n```css\n.snake {\n  transition: all var(--spring-duration) spring-out;\n}\n.camel {\n  transition: all var(--spring-duration) springOut;\n}\n```\n\nAnd here's what it looks like once `postcss-spring-easing` works its magic:\n\n```css\n.snake {\n  --spring-duration: 1333.33ms; \n  transition: all var(--spring-duration) linear(0, -0.003 24.3%, 0.025 43.2%, 0.024, 0.004 54.1%, -0.016 56.8%, -0.132 67.6%, -0.155, -0.163, -0.149, -0.107, -0.029, 0.086, 0.239 86.5%, 0.801 94.6%, 0.943, 1); \n} \n.camel {\n  --spring-duration: 1333.33ms; \n  transition: all var(--spring-duration) linear(0, -0.003 24.3%, 0.025 43.2%, 0.024, 0.004 54.1%, -0.016 56.8%, -0.132 67.6%, -0.155, -0.163, -0.149, -0.107, -0.029, 0.086, 0.239 86.5%, 0.801 94.6%, 0.943, 1); \n}\n```\n\n\u003e _**Note**: all the easings [spring-easing](https://github.com/okikio/spring-easing) supports `postcss-spring-easing` supports as well._\n\n## Why use postcss-spring-easing? 🤔\n\nCSS is great for designing your websites, including adding animations. But there are certain animation types, like a \"spring\" animation (imagine a bouncy ball), which CSS alone can't pull off.\n\n\u003e **Fun fact**: \"spring\" animations are how Apple is able to create smooth animations for the iPhone. \n\n\n\u003c!-- \u003e You can also read the [blog post](https://blog.okikio.dev/postcss-spring-easing), created for it's launch. --\u003e\n\n\u003cimg src=\"media/assets/spring-easing-demo-video.gif\" width=\"1280\" loading=\"lazy\" alt=\"A demo of the various postcss-spring-easings available\" align=\"center\" style=\"border-radius: 1rem; aspect-ratio: auto 1280 / 920;\" /\u003e\n\n\n\u003c!-- https://github.com/okikio/postcss-spring-easing/assets/17222836/3813945f-b301-4399-8383-bbab227c3f68\n\n\u003cvideo controls autoplay align=\"center\" style=\"border-radius: 1rem; aspect-ratio: auto 1920 / 899;\"\u003e\n  \u003csource src=\"media/assets/postcss-spring-easing-demo-video.mp4\" type=\"video/mp4\"\u003e\n\u003c/video\u003e --\u003e\n\n\u003e _Check out more examples on [Codepen](https://codepen.io/okikio/pen/MWEMEgJ)._\n\n`postcss-spring-easing` comes to your rescue! It's a plugin for PostCSS, which enhances the capabilities of your CSS. This plugin helps you craft spring animations effortlessly.\n\nIn a nutshell, `postcss-spring-easing` is a simple and effective tool for creating bouncy animations with minimum fuss, making your web pages more dynamic and fun.\n\nLet's get coding! 🚀\n\n## Installation\n\n```bash\nnpm install postcss-spring-easing\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003eOthers\u003c/summary\u003e\n\n```bash\nyarn add postcss-spring-easing\n```\n\nor\n\n```bash\npnpm install postcss-spring-easing\n```\n\n\u003c/details\u003e\n\n## Setting up PostCSS\n\nTo use this plugin, you need to have PostCSS set up in your project. If you haven't already, follow these steps:\n\nFirst, install PostCSS:\n\n```bash\nnpm install postcss\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003eOthers\u003c/summary\u003e\n\n```bash\nyarn add postcss\n```\n\nor\n\n```bash\npnpm install postcss\n```\n\nCheck your project for an existing PostCSS config: `postcss.config.js` in the project root,`\"postcss\"` section in the `package.json` or `postcss` in your bundle config.\n\nAdd the plugin to plugins list:\n```diff\nmodule.exports = {\n  plugins: [\n+   require('postcss-spring-easing').default,\n    require('autoprefixer')\n  ]\n}\n```\n\nOr\n\n```ts\n// dependencies\nvar fs = require(\"fs\")\nvar postcss = require(\"postcss\")\nvar { springEasingPlugin } = require(\"postcss-spring-easing\")\n\n// css to be processed\nvar css = fs.readFileSync(\"input.css\", \"utf8\")\n\n// process css\nvar output = postcss()\n  .use(springEasingPlugin())\n  .process(css)\n  .css\n```\nCheckout [tests](./tests/) for more examples.\n\n\n## Usage\n\nTo create a spring animation, you just need to write your CSS transitions as usual, but replace the timing function with one of the following:\n\n* `spring`\n* `spring-in` \n* `spring-out` \n* `spring-in-out` \n* `spring-out-in` \n\nEach of these represents a different type of spring effect.\n\nFor example:\n\n```css\n.box {\n  transition: transform 1s spring-out;\n}\n```\n\nThis will give a spring effect to the transform transition of the `.box` element.\n\nThe `spring-out` function here means that the animation will start slowly and end quickly, like a spring being released. Similarly, `spring-in` would start quickly and end slowly, and `spring-in-out` would start and end slowly with a quick middle, resembling the movement of a bouncing spring.\n\nNow your animations are ready to bounce!\n\nHave questions? Or just wanna talk--leave a message on [GitHub Discussions](https://github.com/okikio/postcss-spring-easing/discussions/1)\n\n## Showcase\n\nA couple sites/projects that use `postcss-spring-easing`:\n\n- Your site/project here...\n\n## Options\n\n`postcss-spring-easing` has 4 options they are \n* `easing` (all the easings from [EasingFunctions](https://spring-easing.okikio.dev/types/typecsseasingoptions) are supported), \n* `easings` (list of extra custom easings to support),\n* `decimal` (the number of decimal places of the resulting values), and\n* `quality` (how detailed/smooth the spring easing should be)\n\n| Properties  | Default Value           |\n| ----------- | ----------------------- |\n| `easing`    | `spring(1, 100, 10, 0)` |\n| `easings`   | `{}`                    |\n| `decimal`   | `3`                     |\n| `quality`   | `0.85`                  |\n\n### `easing`\n\nBy default, spring easings are supported in the form,\n\n| constant | accelerate         | decelerate | accelerate-decelerate | decelerate-accelerate |\n| :------- | :----------------- | :--------- | :-------------------- | :-------------------- |\n|          | spring / spring-in | spring-out | spring-in-out         | spring-out-in         |\n\nAll **Spring** easing's can be configured using theses parameters,\n\n`spring-*(mass, stiffness, damping, velocity)`\n\nEach parameter comes with these defaults\n\n| Parameter | Default Value |\n| --------- | ------------- |\n| mass      | `1`           |\n| stiffness | `100`         |\n| damping   | `10`          |\n| velocity  | `0`           |\n\nTo understand what each of the parameters of `SpringEasing` mean and how they work I suggest looking through the [SpringEasing API Documentation](https://spring-easing.okikio.dev/functions/springeasing)\n\nFor a full understanding of what is happening in the `SpringEasing` library, pleace check out its [API site](https://spring-easing.okikio.dev/modules) for detailed API documentation.\n\n\n```css\na {\n  transition: all var(--spring-duration) spring(1, 100, 10, 0);\n}\n```\n\n### `easings`\n\nAllow to set custom easings:\n\n```js\nrequire('postcss-spring-easing').default({\n  easings: { \n    bounceOut: t =\u003e {\n      let pow2, b = 4;\n      while (t \u003c ((pow2 = Math.pow(2, --b)) - 1) / 11) { }\n      return 1 / Math.pow(4, 3 - b) - 7.5625 * Math.pow((pow2 * 3 - 2) / 22 - t, 2);\n    },\n  }\n})\n```\n\nThe plugin will convert custom easing name between camelCase and snake-case.\nSo the example above would work for `bounce-out` and `bounceOut` easings.\n\n\n## Browser Support\n\n| Chrome | Edge | Firefox | Safari | IE  |\n| ------ | ---- | ------- | ------ | --- |\n| 113+   | 113+ | 112+    | -      | -   |\n\n`postcss-spring-easing` is meant for browsers which have support for the `linear()` easing function, which as of right now is `Chrome \u0026 Edge 113` + `Firefox 112`, `Safari` doesn't support it yet.\n\n## Contributing\n\nI encourage you to use [pnpm](https://pnpm.io/configuring) to contribute to this repo, but you can also use [yarn](https://classic.yarnpkg.com/lang/en/) or [npm](https://npmjs.com) if you prefer.\n\nInstall all necessary packages\n\n```bash\nnpm install\n```\n\nThen run tests\n\n```bash\nnpm test\n```\n\nBuild project\n\n```bash\nnpm run build\n```\n\n\u003e _**Note**: this project uses [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) standard for commits, so, please format your commits using the rules it sets out._\n\n## Licence\n\nSee the [LICENSE](./LICENSE) file for license rights and limitations (MIT). \n\nThe `CSSSpringEasing`, `getOptimizedPoints` and `getLinearSyntax` functions from `spring-easing` which are used in `postcss-spring-easing` are based of the work done by [Jake Archibald](https://github.com/jakearchibald/linear-easing-generator) in his [Linear Easing Generator](https://linear-easing-generator.netlify.app/) \nand are thus licensed under the [Apache License 2.0](https://github.com/jakearchibald/linear-easing-generator/blob/main/LICENSE).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fokikio%2Fpostcss-spring-easing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fokikio%2Fpostcss-spring-easing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fokikio%2Fpostcss-spring-easing/lists"}