{"id":21241473,"url":"https://github.com/kevingrajeda/tailwindcss-spring","last_synced_at":"2025-11-01T22:30:38.429Z","repository":{"id":253022342,"uuid":"842221994","full_name":"KevinGrajeda/tailwindcss-spring","owner":"KevinGrajeda","description":"A plugin for Tailwind CSS that adds spring animations using linear(), define just two parameters and let the plugin do the rest.","archived":false,"fork":false,"pushed_at":"2024-08-15T17:37:41.000Z","size":163,"stargazers_count":69,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-10T16:50:26.094Z","etag":null,"topics":["animation","bounce","linear","spring","tailwind","tailwindcss","tailwindcss-plugin","transition"],"latest_commit_sha":null,"homepage":"https://tailwindcss-spring.kvin.me/","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/KevinGrajeda.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2024-08-13T23:22:39.000Z","updated_at":"2025-02-06T16:03:45.000Z","dependencies_parsed_at":"2024-12-03T10:19:17.351Z","dependency_job_id":null,"html_url":"https://github.com/KevinGrajeda/tailwindcss-spring","commit_stats":null,"previous_names":["kevingrajeda/tailwindcss-spring"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KevinGrajeda%2Ftailwindcss-spring","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KevinGrajeda%2Ftailwindcss-spring/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KevinGrajeda%2Ftailwindcss-spring/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KevinGrajeda%2Ftailwindcss-spring/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KevinGrajeda","download_url":"https://codeload.github.com/KevinGrajeda/tailwindcss-spring/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239340496,"owners_count":19622702,"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":["animation","bounce","linear","spring","tailwind","tailwindcss","tailwindcss-plugin","transition"],"created_at":"2024-11-21T00:55:51.131Z","updated_at":"2025-11-01T22:30:38.368Z","avatar_url":"https://github.com/KevinGrajeda.png","language":"TypeScript","readme":"# tailwindcss-spring\n\nA Tailwind CSS plugin that adds spring animations to your project using CSS linear().\nDefine just two parameters and let the plugin generate the easing curve and the animation duration.\n\nCheck out the the plugin in action on [this website](https://tailwindcss-spring.kvin.me/).\n\n## Parameters\n\n- `spring-bounce-*`\n- `spring-duration-*`\n\nExample:\n\n```html\n\u003cdiv class=\"spring-bounce-60 spring-duration-300 transition-transform hover:scale-150\"\n```\n\n## Installation\n\nInstall the plugin via npm:\n\n```bash\nnpm install tailwindcss-spring\n```\n\nThen, add the plugin to your `tailwind.config.js` file:\n\n```javascript\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    require(\"tailwindcss-spring\"),\n    // ...\n  ],\n};\n```\n\n## Usage\n\n### `spring-bounce-*`\n\nThis class defines the bounce (as a percentage), generates the easing curve, and applies it to the `transition-timing-function`.\n\n- I recommend using low bounce values for most animations unless you want a springy effect.\n\n### `spring-duration-*`\n\nThis class defines the perceptual duration of the animation in milliseconds.\n\n- The perceptual duration allows you to intuitively configure the animation, focusing on the most significant part of the motion.\n\n- Since spring easings often have long settling periods, the perceptual duration isn't used as the actual animation duration. Instead, the real duration is calculated based on the `spring-bounce-*` value.\n\n## More Info\n\nThis plugin was created by [Kevin Grajeda](https://x.com/k_grajeda). It's open source and available on [GitHub](https://github.com/KevinGrajeda/tailwindcss-spring).\n\nYou can also check out my [CSS spring easing generator](https://www.kvin.me/css-springs).\n\nA special thanks to [Jake Archibald](https://x.com/jaffathecake) for his work on the [linear easing generator](https://linear-easing-generator.netlify.app/). I used some of [his](https://github.com/jakearchibald/linear-easing-generator) code for spring calculations.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevingrajeda%2Ftailwindcss-spring","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkevingrajeda%2Ftailwindcss-spring","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevingrajeda%2Ftailwindcss-spring/lists"}