{"id":18757123,"url":"https://github.com/whatnickcodes/unocss-preset-tailwindcss-motion","last_synced_at":"2026-03-05T09:01:34.621Z","repository":{"id":258232532,"uuid":"869784070","full_name":"whatnickcodes/unocss-preset-tailwindcss-motion","owner":"whatnickcodes","description":"Port of the most beautiful animation Tailwind library tailwindcss-motion by @romboHQ.","archived":false,"fork":false,"pushed_at":"2025-10-30T16:45:07.000Z","size":2430,"stargazers_count":22,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-30T17:49:02.560Z","etag":null,"topics":["tailwind","unocss"],"latest_commit_sha":null,"homepage":"https://animations.tips.io/","language":"CSS","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/whatnickcodes.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,"zenodo":null}},"created_at":"2024-10-08T22:08:16.000Z","updated_at":"2025-10-30T16:45:11.000Z","dependencies_parsed_at":"2025-04-13T10:00:41.389Z","dependency_job_id":null,"html_url":"https://github.com/whatnickcodes/unocss-preset-tailwindcss-motion","commit_stats":null,"previous_names":["whatnickcodes/unocss-preset-tailwindcss-motion"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/whatnickcodes/unocss-preset-tailwindcss-motion","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whatnickcodes%2Funocss-preset-tailwindcss-motion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whatnickcodes%2Funocss-preset-tailwindcss-motion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whatnickcodes%2Funocss-preset-tailwindcss-motion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whatnickcodes%2Funocss-preset-tailwindcss-motion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/whatnickcodes","download_url":"https://codeload.github.com/whatnickcodes/unocss-preset-tailwindcss-motion/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whatnickcodes%2Funocss-preset-tailwindcss-motion/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30117477,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T08:19:04.902Z","status":"ssl_error","status_checked_at":"2026-03-05T08:17:37.148Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["tailwind","unocss"],"created_at":"2024-11-07T17:41:34.799Z","updated_at":"2026-03-05T09:01:34.130Z","avatar_url":"https://github.com/whatnickcodes.png","language":"CSS","funding_links":[],"categories":["CSS","Community"],"sub_categories":["Presets"],"readme":"# 😍 unocss-preset-tailwindcss-motion 😍 \n\n![Motion Animation Preview](https://github.com/whatnickcodes/unocss-preset-tailwindcss-motion/blob/HEAD/cover.png?raw=true)\n\nPort of the most beautiful animation Tailwind library [tailwindcss-motion](https://github.com/romboHQ/tailwindcss-motion) by @romboHQ.\n\n## Get Started\n\nThis is for UnoCSS folks but should be really easy if you are familiar. Simply add the preset to your UnoCSS config via our [NPM package](https://www.npmjs.com/package/unocss-preset-tailwindcss-motion).\n\n```bash\nnpm i -D unocss-preset-tailwindcss-motion\n```\n\n```js\nimport { presetTailwindMotion } from 'unocss-preset-tailwindcss-motion'\n\n\nexport default defineConfig({\n    presets: [\n        presetUno(),\n        presetTailwindMotion()\n    ],\n})\n```\n\n## Changelog\n\nIt is now updated to match `v4` of the Tailwind plugin.\n\n\n## Demo\n\n[Giant Test Page](https://animations.tips.io)\n\n\n## Why?\n\nI needed a solid animation library for my side project that is heavily UnoCSS dependent. UnoCSS is truly a work of art and so is this library. Now you can have both. More on side project soon.\n\n## Features\n\nPlease reference the [official plugin docs](https://github.com/romboHQ/tailwindcss-motion) for a better explanation. Basically it comes down to:\n\n```html\n\u003c!--\nPRESETS\nThese are easy perfectly built out-of-the-box animations.\n--\u003e\n\u003cdiv class=\"motion-preset-slide-up\"\u003e\u003c/div\u003e\n\u003cdiv class=\"motion-preset-bounce\"\u003e\u003c/div\u003e\n\u003cdiv class=\"motion-preset-confetti\"\u003e\u003c/div\u003e\nEtc...\n\n\n\u003c!--\nBASE ANIMATIONS\nThese are specific one-offs.\n--\u003e\n\u003cdiv class=\"motion-translate-y\"\u003eDefault\u003c/div\u003e\n\u003cdiv class=\"motion-translate-y-75\"\u003eCustom\u003c/div\u003e\n\u003cdiv class=\"motion-translate-y-[25px]\"\u003eJIT\u003c/div\u003e\n\n\u003cdiv class=\"motion-rotate-in\"\u003eDefault\u003c/div\u003e\n\u003cdiv class=\"motion-rotate-in-45\"\u003eCustom\u003c/div\u003e\n\u003cdiv class=\"motion-rotate-in-[69deg]\"\u003eJIT support\u003c/div\u003e\nEtc...\n\n\n\u003c!--\nCOMBINING ANIMATIONS\nThe real power comes in combining these\n--\u003e\n\u003cdiv class=\"motion-translate-y-in motion-rotate-in-45\"\u003e\u003c/div\u003e\n\n\n\u003c!-- \nMODIFIERS\nAdjust duration, spring, delay and loop modifiers\n--\u003e\n\u003cdiv class=\"motion-translate-y-in\"\u003eNormal\u003c/div\u003e\n\u003cdiv class=\"motion-translate-y-in motion-duration-2000\"\u003e2000ms speed\u003c/div\u003e\n\u003cdiv class=\"motion-translate-y-in motion-ease-spring-bouncy\"\u003eBouncy\u003c/div\u003e\n\u003cdiv class=\"motion-translate-y-in motion-delay-300\"\u003e300ms delay\u003c/div\u003e\n\u003cdiv class=\"motion-translate-y-loop-75 motion-loop-twice\"\u003eLoop 2x\u003c/div\u003e\n\u003cdiv class=\"motion-translate-y-in motion-duration-2000 motion-ease-spring-bouncy\"\u003e2000ms speed, bouncy\u003c/div\u003e\n\n```\n\nMaking sense? Easy, great! Check out the million options below:\n\n## Full Docs \u0026 Reference\n\n\n### Base Animations\n\n#### Scale\n```\nmotion-scale-\u003cin|out|loop\u003e\nmotion-scale-\u003cin|out|loop\u003e-[0|50|75|90|95|100|105|110|125|150]\nmotion-scale-\u003cin|out|loop\u003e-[value]\n\nmotion-scale-in\nmotion-scale-out\nmotion-scale-loop\nmotion-scale-in-75\nmotion-scale-out-150\nmotion-scale-loop-[1.337]\nmotion-scale-in-[0.5]\nmotion-scale-loop-75/mirror\nmotion-scale-loop-[1.5]/reset\n```\n\n#### Scale X/Y\n``` \nmotion-scale-\u003cx|y\u003e-\u003cin|out|loop\u003e\nmotion-scale-\u003cx|y\u003e-\u003cin|out|loop\u003e-[0|50|75|90|95|100|105|110|125|150]\nmotion-scale-\u003cx|y\u003e-\u003cin|out|loop\u003e-[value]\n\nmotion-scale-x-in\nmotion-scale-y-out\nmotion-scale-x-loop\nmotion-scale-x-in-75\nmotion-scale-y-out-150\nmotion-scale-x-loop-[0.82]\nmotion-scale-y-in-[1.25]\nmotion-scale-x-loop-75/mirror\nmotion-scale-y-loop-[1.5]/reset\n```\n\n#### Translate\n```\nmotion-translate-\u003cx|y\u003e-\u003cin|out|loop\u003e\nmotion-translate-\u003cx|y\u003e-\u003cin|out|loop\u003e-(0|25|50|75|100|150)\nmotion-translate-\u003cx|y\u003e-\u003cin|out|loop\u003e-[value]\n\nmotion-translate-x-in\nmotion-translate-y-out\nmotion-translate-x-loop\nmotion-translate-x-in-75\nmotion-translate-y-out-150\nmotion-translate-x-loop-[42px]\nmotion-translate-y-in-[-15rem]\nmotion-translate-x-loop-25/mirror\nmotion-translate-y-loop-[88vh]/reset\n```\n\n#### Rotate\n```\nmotion-rotate-\u003cin|out|loop\u003e\nmotion-rotate-\u003cin|out|loop\u003e-(0|1|2|3|6|12|45|90|180)\nmotion-rotate-\u003cin|out|loop\u003e-[value]\n\nmotion-rotate-in\nmotion-rotate-out-45\nmotion-rotate-loop\nmotion-rotate-in-[42deg]\nmotion-rotate-out-[-15deg]\nmotion-rotate-loop-90/mirror\nmotion-rotate-loop-[180deg]/reset\n```\n\n#### Opacity\n```\nmotion-opacity-\u003cin|out|loop\u003e\nmotion-opacity-\u003cin|out|loop\u003e-(0|25|50|75|100)\nmotion-opacity-\u003cin|out|loop\u003e-[value]\n\nmotion-opacity-in\nmotion-opacity-out-50\nmotion-opacity-loop\nmotion-opacity-in-[0.42]\nmotion-opacity-out-[33%]\nmotion-opacity-loop-75/mirror\nmotion-opacity-loop-[0.875]/reset\n```\n\n#### Blur\n```\nmotion-blur-\u003cin|out|loop\u003e\nmotion-blur-\u003cin|out|loop\u003e-(sm|md|lg|xl|2xl|3xl)\nmotion-blur-\u003cin|out|loop\u003e-[value]\n\nmotion-blur-in\nmotion-blur-out-lg\nmotion-blur-loop\nmotion-blur-in-[5px]\nmotion-blur-out-[10px]\nmotion-blur-loop-xl/mirror\nmotion-blur-loop-[15px]/reset\n```\n\n#### Text Color\n```\nmotion-text-\u003cin|out|loop\u003e\nmotion-text-\u003cin|out|loop\u003e-{color}\nmotion-text-\u003cin|out|loop\u003e-[value]\n\nmotion-text-in\nmotion-text-out-red-500\nmotion-text-loop-blue-500\nmotion-text-in-[#ff0000]\nmotion-text-out-purple-500\nmotion-text-loop-blue-500/mirror\nmotion-text-loop-[#0000ff]/reset\n```\n\n#### Background Color\n```\nmotion-bg-\u003cin|out|loop\u003e\nmotion-bg-\u003cin|out|loop\u003e-{color}\nmotion-bg-\u003cin|out|loop\u003e-[value]\n\nmotion-bg-in\nmotion-bg-out-red-500\nmotion-bg-loop-blue-500\nmotion-bg-in-[#ff0000]\nmotion-bg-out-purple-500\nmotion-bg-loop-blue-500/mirror\nmotion-bg-loop-[#0000ff]/reset\n```\n\n#### Grayscale\n```\nmotion-grayscale-\u003cin|out|loop\u003e\nmotion-grayscale-\u003cin|out|loop\u003e-(0|25|50|75|100)\nmotion-grayscale-\u003cin|out|loop\u003e-[value]\n\nmotion-grayscale-in\nmotion-grayscale-out-50\nmotion-grayscale-loop\nmotion-grayscale-in-[0.42]\nmotion-grayscale-out-[33%]\nmotion-grayscale-loop-75/mirror\nmotion-grayscale-loop-[0.875]/reset\n```\n\n#### Preset Animations\n\n##### Classics\n```\nmotion-preset-slide-\u003cright|left|up|down\u003e\nmotion-preset-slide-\u003cright|left|up|down\u003e-(sm|md|lg)\n\nmotion-preset-slide-\u003cup-right|up-left|down-left|down-right\u003e\nmotion-preset-slide-\u003cup-right|up-left|down-left|down-right\u003e-(sm|md|lg)\n\nmotion-preset-focus\nmotion-preset-focus-(sm|md|lg)\n\nmotion-preset-blur-\u003cright|left|up|down\u003e\nmotion-preset-blur-\u003cright|left|up|down\u003e-(sm|md|lg)\n\nmotion-preset-rebound\nmotion-preset-rebound-(right|left|up|down)\n\nmotion-preset-bounce\nmotion-preset-expand\nmotion-preset-shrink\nmotion-preset-pop\nmotion-preset-compress\nmotion-preset-shake\nmotion-preset-wiggle\n```\n\n##### Loops\n\n```\nmotion-preset-pulse\nmotion-preset-pulse-(sm|md|lg)\n\nmotion-preset-wobble\nmotion-preset-wobble-(sm|md|lg)\n\nmotion-preset-seesaw\nmotion-preset-seesaw-(sm|md|lg)\n\nmotion-preset-oscillate\nmotion-preset-oscillate-(sm|md|lg)\n\nmotion-preset-stretch\nmotion-preset-stretch-(sm|md|lg)\n\nmotion-preset-float\nmotion-preset-float-(sm|md|lg)\n\nmotion-preset-spin\n\nmotion-preset-blink\n```\n\n##### Fun\n```\nmotion-preset-typewriter-[\u003cnumber of letters\u003e]\n\nmotion-preset-confetti\n\nmotion-preset-flomoji-👉\nmotion-preset-flomoji-🚀\nmotion-preset-flomoji-👀\nmotion-preset-flomoji-👍\nmotion-preset-flomoji-[🎉]\nmotion-preset-flomoji-[🌟]\nmotion-preset-flomoji-[🎸]\nmotion-preset-flomoji-[Woah!]\n```\n\n### Modifiers\n\n#### Duration\n```\nmotion-duration\nmotion-duration-(75|100|150|200|300|500|700|1000|1500|2000)\nmotion-duration-(75|100|150|200|300|500|700|1000|1500|2000)/(scale|translate|rotate|blur|grayscale|opacity|background|text)\n```\n\n#### Delay\n```\nmotion-delay\nmotion-delay-(75|100|150|200|300|500|700|1000)\nmotion-delay-(75|100|150|200|300|500|700|1000)/(scale|translate|rotate|blur|grayscale|opacity|background|text)\n```\n\n#### Easing\n```\n// Basic easings\nmotion-ease-(linear|in|out|in-out)\n\n// Spring \u0026 bounce easings\nmotion-ease-(spring-smooth|spring-snappy|spring-bouncy|spring-bouncier|spring-bounciest|bounce)\n\n// Additional cubic-bezier easings\nmotion-ease-(in-quad|in-cubic|in-quart|in-back)\nmotion-ease-(out-quad|out-cubic|out-quart|out-back)\nmotion-ease-(in-out-quad|in-out-cubic|in-out-quart|in-out-back)\n\n// Per-property targeting\nmotion-ease-{any-of-above}/(scale|translate|rotate|blur|grayscale|opacity|background|text)\n```\n\n#### Loop\n```\nmotion-loop\nmotion-loop-infinite\nmotion-loop-[number]\nmotion-loop-(infinite|number)/(scale|translate|rotate|blur|grayscale|opacity|background|text)\n```\n\n#### Mirror and Reset\n- **Mirror**: Reverses the animation direction after completion.\n  - Example: `motion-scale-loop-50/mirror`\n- **Reset**: Resets the animation to its initial state after completion.\n  - Example: `motion-scale-loop-50/reset`\n\n### Combining Animations\n```\nmotion-scale-in-75 motion-translate-y-in-100 motion-rotate-in-90 motion-blur-in-md motion-opacity-in-0\nmotion-opacity-in-0 motion-translate-y-in-100 motion-scale-in-150 motion-rotate-in-180 motion-grayscale-in-75\nmotion-scale-in-75 motion-rotate-in-180 motion-translate-x-in-100 motion-blur-in-lg motion-bg-in-blue-500\nmotion-translate-x-in-100 motion-translate-y-in-50 motion-scale-in-125 motion-rotate-in-45 motion-text-in-purple-500\nmotion-preset-pop motion-preset-slide-up motion-preset-focus motion-delay-100\nmotion-preset-shake motion-preset-blur-right motion-preset-stretch motion-delay-200\nmotion-preset-wiggle motion-preset-slide-down motion-preset-blink motion-delay-150\nmotion-preset-pop motion-translate-y-loop-50 motion-scale-in-150 motion-rotate-in-360 motion-blur-in-xl\nmotion-preset-compress motion-translate-x-loop-75 motion-scale-loop-125 motion-rotate-loop-180 motion-delay-100\nmotion-preset-stretch motion-scale-in-[250%] motion-rotate-in-[720deg] motion-blur-in-[15px] motion-grayscale-in-100\nmotion-preset-oscillate motion-translate-x-in-[150%] motion-translate-y-in-[150%] motion-scale-in-[175%] motion-rotate-in-[1080deg]\nmotion-preset-slide-up motion-preset-blur-up motion-scale-in-[300%] motion-rotate-loop-[360deg] motion-delay-150\n```\n\n\n\n#### Animation State\n```\nmotion-paused\nmotion-running\n```\n\n### Smart Extras\n\nThese are not part of the original library, see \"What's Different\" below for more info:\n\n```css\n/* Short-hand pause */\n.pause\n\n/* Short-hand paly */\n.play\n\n/* Same as pause, but better name - meant to be used with JS to \"remove this class\" to trigger the animation */\n.wait\n\n/* Motion = 0, Completes the animations forcefully, this is technically different than pause */\n.still\n```\n\n\n## What's different?\n\nNot much. This should be near identical for 99% of purposes.\n\n\n\n### prefers-reduced-motion\n\nCurrently, tailwindcss-motion manually applies the `@media screen and (prefers-reduced-motion: no-preference)` on [various keyframes](https://github.com/romboHQ/tailwindcss-motion/blob/main/src/keyframes.js) that have basically big translates. It's also applied on some of [their custom one-off](https://github.com/romboHQ/tailwindcss-motion/blob/main/src/presets.js) more fun animations (Flomoji, Typewriter).\n\nRather than doing that, this library will automatically add the following for simplicity to your CSS:\n\n```css\n @media (prefers-reduced-motion: reduce) {\n    *, ::before, ::after {\n        --motion-duration: 0.01ms !important;\n        --motion-delay: 0ms !important;\n        animation-duration: 0.01ms !important;\n        animation-delay: 0ms !important;\n        transition-duration: 0.01ms !important;\n        transition-delay: 0ms !important;\n    }\n}\n```\n\n### ::backdrop\n\nTailwind compiles `:root {}` and `::backdrop {}` separately for variables since browsers treat them as distinct contexts. Unfortunately, you can't even do something like this `:root, ::backdrop {}` as that does not work.\n\nThat's a lot of bytes to do twice... So we skip `::backdrop`. It's rarely used anyway by people.\n\n### typewriter effect supports custom fonts\n\nUnlike the original library, this version doesn't set `font-family: monospace;` for the typewriter effect. This allows for greater flexibility in font choices and the animation, however it may require minor adjustments if spacing issues occur with various custom fonts. You can just do this instead:\n\n```\nmotion-preset-typewriter-[29] font-mono\n```\n\n### confetti doesn't set margin and block\n\nThe preset `motion-preset-confetti` normally applies `display: block` and `margin: 0;`. This makes a ton of sense but also can be annoying because it can mess the layout when applying these animations (which goal wise we ideally don't want layout to ever shift when applying an animation). You can instead do this if you want it back perfectly to original:\n\n```\nmotion-preset-confetti block m-0\n```\n\n### Flomoji is back and our version supports JIT\n\nFor maximum port, I decided to add Flomoji back and with JIT support:\n\n```\nmotion-preset-flomoji-👉\nmotion-preset-flomoji-🚀\nmotion-preset-flomoji-👀\nmotion-preset-flomoji-👍\nmotion-preset-flomoji-[🎉]\nmotion-preset-flomoji-[🌟]\nmotion-preset-flomoji-[🎸]\nmotion-preset-flomoji-[Woah!]\n```\n\n### Smart Classes\n\nThese are extra short-hands. Note that still and pause (or motion-pause) are different.\n\n```css\n.pause { animation-play-state: paused; }\n.play { animation-play-state: running; }\n\n/* You'll need to manually remove \"wait\" with JS to use this helper when you want the animation to start */\n/* This is excellent for when triggering when in viewport */\n/* Note: wait also applies to ::before and ::after pseudo-attributes */\n.wait, .wait * { animation-play-state: paused; }\n\n/* Note: still also applies to ::before and ::after pseudo-attributes */\n.still, .still * {\n    --motion-duration: 0.01ms !important;\n    --motion-delay: 0ms !important;\n    animation-duration: 0.01ms !important;\n    animation-delay: 0ms !important;\n    transition-duration: 0.01ms !important;\n    transition-delay: 0ms !important;\n}\n```\n\n## Contributing\n\n- The folder tailwind is for the tailwind styles, `tailwindcss-motion-reference` is detached just for easy file comparison and is not used.\n- To dev it up here... just run `npm run dev`\n- To see the test file, just run `npm run serve`\n- To build it all, just run `npm run build`\n- For more, reference `package.json`. This may get more sophisticated later but does have a 1 vs the other mode.\n\n## License\n\nIn honor of original library this is MIT.\n\n## More\n\n[Via x.com/@whatnicktweets](https://x.com/@whatnicktweets)\n\nhttps://www.npmjs.com/package/unocss-preset-tailwindcss-motion\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhatnickcodes%2Funocss-preset-tailwindcss-motion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwhatnickcodes%2Funocss-preset-tailwindcss-motion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhatnickcodes%2Funocss-preset-tailwindcss-motion/lists"}