├── .gitignore ├── .npmignore ├── LICENSE ├── README-zh_CN.md ├── README.md ├── dist ├── bling │ ├── puffIn.d.ts │ ├── puffOut.d.ts │ ├── vanishIn.d.ts │ └── vanishOut.d.ts ├── boing │ ├── boingInUp.d.ts │ └── boingOutDown.d.ts ├── bomb │ ├── bombLeftOut.d.ts │ └── bombRightOut.d.ts ├── index.d.ts ├── index.js ├── index.js.map ├── magic │ ├── magic.d.ts │ ├── swap.d.ts │ ├── twisterInDown.d.ts │ └── twisterInUp.d.ts ├── math │ ├── foolishIn.d.ts │ ├── foolishOut.d.ts │ ├── holeIn.d.ts │ ├── holeOut.d.ts │ ├── swashIn.d.ts │ └── swashOut.d.ts ├── perspective │ ├── perspectiveDown.d.ts │ ├── perspectiveDownReturn.d.ts │ ├── perspectiveLeft.d.ts │ ├── perspectiveLeftReturn.d.ts │ ├── perspectiveRight.d.ts │ ├── perspectiveRightReturn.d.ts │ ├── perspectiveUp.d.ts │ └── perspectiveUpReturn.d.ts ├── rotate │ ├── rotateDownIn.d.ts │ ├── rotateDownOut.d.ts │ ├── rotateLeftIn.d.ts │ ├── rotateLeftOut.d.ts │ ├── rotateRightIn.d.ts │ ├── rotateRightOut.d.ts │ ├── rotateUpIn.d.ts │ └── rotateUpOut.d.ts ├── slide │ ├── slideDown.d.ts │ ├── slideDownReturn.d.ts │ ├── slideLeft.d.ts │ ├── slideLeftReturn.d.ts │ ├── slideRight.d.ts │ ├── slideRightReturn.d.ts │ ├── slideUp.d.ts │ └── slideUpReturn.d.ts ├── space │ ├── spaceInDown.d.ts │ ├── spaceInLeft.d.ts │ ├── spaceInRight.d.ts │ ├── spaceInUp.d.ts │ ├── spaceOutDown.d.ts │ ├── spaceOutLeft.d.ts │ ├── spaceOutRight.d.ts │ └── spaceOutUp.d.ts ├── staticEffects │ ├── openDownLeft.d.ts │ ├── openDownLeftReturn.d.ts │ ├── openDownRight.d.ts │ ├── openDownRightReturn.d.ts │ ├── openUpLeft.d.ts │ ├── openUpLeftReturn.d.ts │ ├── openUpRight.d.ts │ └── openUpRightReturn.d.ts ├── staticEffectsOut │ ├── openDownLeftOut.d.ts │ ├── openDownRightOut.d.ts │ ├── openUpLeftOut.d.ts │ └── openUpRightOut.d.ts ├── tin │ ├── tinDownIn.d.ts │ ├── tinDownOut.d.ts │ ├── tinLeftIn.d.ts │ ├── tinLeftOut.d.ts │ ├── tinRightIn.d.ts │ ├── tinRightOut.d.ts │ ├── tinUpIn.d.ts │ └── tinUpOut.d.ts └── utils │ ├── config.d.ts │ ├── index.d.ts │ └── types.d.ts ├── example ├── .eslintrc.json ├── .gitignore ├── README.md ├── next.config.js ├── package.json ├── pages │ ├── _app.js │ ├── api │ │ └── hello.js │ └── index.js ├── postcss.config.js ├── public │ ├── favicon.ico │ └── vercel.svg ├── styles │ ├── Home.module.css │ └── globals.css ├── tailwind.config.js └── yarn.lock ├── jest.config.js ├── package.json ├── rollup.config.js ├── src ├── bling │ ├── puffIn.ts │ ├── puffOut.ts │ ├── vanishIn.ts │ └── vanishOut.ts ├── boing │ ├── boingInUp.ts │ └── boingOutDown.ts ├── bomb │ ├── bombLeftOut.ts │ └── bombRightOut.ts ├── index.ts ├── magic │ ├── magic.ts │ ├── swap.ts │ ├── twisterInDown.ts │ └── twisterInUp.ts ├── math │ ├── foolishIn.ts │ ├── foolishOut.ts │ ├── holeIn.ts │ ├── holeOut.ts │ ├── swashIn.ts │ └── swashOut.ts ├── perspective │ ├── perspectiveDown.ts │ ├── perspectiveDownReturn.ts │ ├── perspectiveLeft.ts │ ├── perspectiveLeftReturn.ts │ ├── perspectiveRight.ts │ ├── perspectiveRightReturn.ts │ ├── perspectiveUp.ts │ └── perspectiveUpReturn.ts ├── rotate │ ├── rotateDownIn.ts │ ├── rotateDownOut.ts │ ├── rotateLeftIn.ts │ ├── rotateLeftOut.ts │ ├── rotateRightIn.ts │ ├── rotateRightOut.ts │ ├── rotateUpIn.ts │ └── rotateUpOut.ts ├── slide │ ├── slideDown.ts │ ├── slideDownReturn.ts │ ├── slideLeft.ts │ ├── slideLeftReturn.ts │ ├── slideRight.ts │ ├── slideRightReturn.ts │ ├── slideUp.ts │ └── slideUpReturn.ts ├── space │ ├── spaceInDown.ts │ ├── spaceInLeft.ts │ ├── spaceInRight.ts │ ├── spaceInUp.ts │ ├── spaceOutDown.ts │ ├── spaceOutLeft.ts │ ├── spaceOutRight.ts │ └── spaceOutUp.ts ├── staticEffects │ ├── openDownLeft.ts │ ├── openDownLeftReturn.ts │ ├── openDownRight.ts │ ├── openDownRightReturn.ts │ ├── openUpLeft.ts │ ├── openUpLeftReturn.ts │ ├── openUpRight.ts │ └── openUpRightReturn.ts ├── staticEffectsOut │ ├── openDownLeftOut.ts │ ├── openDownRightOut.ts │ ├── openUpLeftOut.ts │ └── openUpRightOut.ts ├── tin │ ├── tinDownIn.ts │ ├── tinDownOut.ts │ ├── tinLeftIn.ts │ ├── tinLeftOut.ts │ ├── tinRightIn.ts │ ├── tinRightOut.ts │ ├── tinUpIn.ts │ └── tinUpOut.ts └── utils │ ├── config.ts │ ├── index.ts │ └── types.ts ├── test └── utils │ └── index.test.ts └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | .project 4 | 5 | # Windows: 6 | Thumbs.db 7 | ehthumbs.db 8 | Desktop.ini 9 | 10 | # node 11 | /node_modules 12 | /npm-debug.log* 13 | /yarn-error.log 14 | 15 | /example/node_modules 16 | 17 | # vim 18 | *.swp 19 | 20 | # webstorm 21 | .idea 22 | 23 | # vscode 24 | .vscode 25 | jsconfig.json 26 | 27 | # macos 28 | .DS_Store 29 | 30 | # elint 31 | /.commitlintrc.js 32 | /.eslintrc.js 33 | /.huskyrc.js 34 | /.stylelintrc.js 35 | 36 | # production 37 | /public 38 | 39 | # coverage 40 | /coverage 41 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | ~* -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 little forest 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README-zh_CN.md: -------------------------------------------------------------------------------- 1 | # tailwindcss-magic 2 | 3 | [English](./README.md) | 简体中文 4 | 5 | 一组适用于 [tailwindcss](https://tailwindcss.com/) 的神奇动画库,使用 [tailwindcss plugin](https://tailwindcss.com/docs/plugins) 的方式接入。[查看 DEMO](https://stackblitz.com/edit/nextjs-ktaxda?file=data%2Findex.js) 6 | 7 | > 大部分动画效果基于 [magic](https://github.com/miniMAC/magic) 实现。 8 | 9 |
10 | 11 |
12 | 13 | ## 使用方法 14 | 15 | ### install 16 | 17 | ```sh 18 | npm i tailwindcss-magic 19 | 20 | or 21 | 22 | yarn add tailwindcss-magic 23 | ``` 24 | 25 | ### 引入插件 26 | 27 | 编辑 `tailwind.config.js` 文件 28 | 29 | ```js 30 | module.exports = { 31 | // ... 32 | plugins: [require("tailwindcss-magic")], 33 | }; 34 | ``` 35 | 36 | > 经过 tailwindcss 打包之后，最终代码中只会包含 已经使用的动画，不会全部包含进去，放轻松 ... 37 | 38 | ### 在 HTML 元素中使用 39 | 40 | ```html 41 |
42 | ``` 43 | 44 | ### 在 Hover, Focus 等状态中使用 45 | 46 | ```html 47 |
48 |

Hello World

49 |
50 | ``` 51 | 52 | ### 自定义 animation property 53 | 54 | 默认 `animation-duration:1s`,可借助 [tailwindcss-animation](TODO) 插件修改其他的动画属性: `animation-duration`, `animation-timing-function`, `animation-delay`, `animation-iteration-count`, `animation-direction`, `animation-fill-mode`。 55 | 56 | ## 动画名称 57 | 58 | 所有的动画名称均以 `magic` 开头，然后下划线之后是“真正的”动画名称(`magic-puffIn`, `magic-openDownLeft`...)，全部的动画名称列表如下： 59 | 60 | ``` 61 | . 62 | ├── magic 63 | │ |── magic 64 | │ |── twisterInDown 65 | │ |── twisterInUp 66 | │ └── swap 67 | ├── bling 68 | │ |── puffIn 69 | │ |── puffOut 70 | │ |── vanishIn 71 | │ └── vanishOut 72 | ├── staticEffects 73 | │ |── openDownLeft 74 | │ |── openDownLeftReturn 75 | │ |── openDownRight 76 | │ |── openDownRightReturn 77 | │ |── openUpLeft 78 | │ |── openUpLeftReturn 79 | │ |── openUpRight 80 | │ └── openUpRightReturn 81 | ├── staticEffectsOut 82 | │ |── openDownLeftOut 83 | │ |── openDownRightOut 84 | │ |── openUpLeftOut 85 | │ └── openUpRightOut 86 | ├── perspective 87 | │ |── perspectiveDown 88 | │ |── perspectiveDownReturn 89 | │ |── perspectiveLeft 90 | │ |── perspectiveLeftReturn 91 | │ |── perspectiveRight 92 | │ |── perspectiveRightReturn 93 | │ |── perspectiveUp 94 | │ └── perspectiveUpReturn 95 | ├── rotate 96 | │ |── rotateDownIn 97 | │ |── rotateDownOut 98 | │ |── rotateLeftIn 99 | │ |── rotateLeftOut 100 | │ |── rotateRightIn 101 | │ |── rotateRightOut 102 | │ |── rotateUpIn 103 | │ └── rotateUpOut 104 | ├── slide 105 | │ |── slideDown 106 | │ |── slideDownReturn 107 | │ |── slideLeft 108 | │ |── slideLeftReturn 109 | │ |── slideRight 110 | │ |── slideRightReturn 111 | │ |── slideUp 112 | │ └── slideUpReturn 113 | ├── math 114 | │ |── foolishIn 115 | │ |── foolishOut 116 | │ |── holeIn 117 | │ |── holeOut 118 | │ |── swashIn 119 | │ └── swashOut 120 | ├── tin 121 | │ |── tinDownIn 122 | │ |── tinDownOut 123 | │ |── tinLeftIn 124 | │ |── tinLeftOut 125 | │ |── tinRightIn 126 | │ |── tinRightOut 127 | │ |── tinUpIn 128 | │ └── tinUpOut 129 | ├── bomb 130 | │ |── bombLeftOut 131 | │ └── bombRightOut 132 | ├── boing 133 | │ |── boingInUp 134 | │ └── boingOutDown 135 | ├── space 136 | │ |── spaceInDown 137 | │ |── spaceInLeft 138 | │ |── spaceInRight 139 | │ |── spaceInUp 140 | │ |── spaceOutDown 141 | │ |── spaceOutLeft 142 | │ |── spaceOutRight 143 | │ └── spaceOutUp 144 | ``` 145 | 146 | ### 开发与测试 147 | 148 | - 📦 打包 149 | 150 | ``` 151 | yarn 152 | yarn build 153 | ``` 154 | 155 | - 单元测试 156 | 157 | ``` 158 | npm run test 159 | ``` 160 | 161 | ## TODO 162 | 163 | - 添加线上 DEMO 164 | 165 | ## License 166 | 167 | [MIT](./LICENSE) 168 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # tailwindcss-magic 2 | 3 | English | [简体中文](./README-zh_CN.md) 4 | 5 | A set of magical animation libraries for [tailwindcss](https://tailwindcss.com/), accessed using the [tailwindcss plugin](https://tailwindcss.com/docs/plugins). 6 | 7 | Preview the example live on CodeSandbox: [Open in CodeSandbox](https://codesandbox.io/s/fancy-glade-3197y8?file=/pages/index.js) 8 | 9 | > How to customize the animation properties？ Try [tailwindcss-animation-property](https://github.com/Sylvenas/tailwindcss-animation-property). 10 | 11 |
12 | 13 |
14 | 15 | ## Usage 16 | 17 | ### install 18 | 19 | ```sh 20 | npm i tailwindcss-magic 21 | 22 | or 23 | 24 | yarn add tailwindcss-magic 25 | ``` 26 | 27 | ### import plugin 28 | 29 | Edit the `tailwind.config.js` file 30 | 31 | ```js 32 | module.exports = { 33 | // ... 34 | plugins: [require("tailwindcss-magic")], 35 | }; 36 | ``` 37 | 38 | > After the code has been wrapped by tailwindcss, only the animations which are already used will be included in the final code, so be relax ... 39 | 40 | ### Used in HTML element 41 | 42 | ```html 43 |
44 | ``` 45 | 46 | ### Used with @apply 47 | 48 | ```css 49 | @layer components { 50 | .animation-magic-repeat-2 { 51 | @apply magic-magic animate-iteration-2; 52 | } 53 | } 54 | ``` 55 | 56 | ```html 57 |
58 | ``` 59 | 60 | ### Used in states such as Hover, Focus, etc. 61 | 62 | ```html 63 |
64 |

Hello World

65 |
66 | ``` 67 | 68 | ### Customized animation property 69 | 70 | The default animation property setting is `animation-duration:1s`. 71 | 72 | You can use the [tailwindcss-animation-property](https://github.com/Sylvenas/tailwindcss-animation-property) to modify the other animation properties: `animation-duration`, `animation-timing-function`, `animation-delay`, `animation-iteration-count`, `animation-direction`, `animation-fill-mode`. 73 | 74 | ## Animation 75 | 76 | All animation names are composed of `magic` and a name follows the underscore (`magic-puffIn`, `magic-openDownLeft`...). 77 | 78 | The full list of animation titles is as follows： 79 | 80 | ``` 81 | . 82 | ├── magic 83 | │ |── magic 84 | │ |── twisterInDown 85 | │ |── twisterInUp 86 | │ └── swap 87 | ├── bling 88 | │ |── puffIn 89 | │ |── puffOut 90 | │ |── vanishIn 91 | │ └── vanishOut 92 | ├── staticEffects 93 | │ |── openDownLeft 94 | │ |── openDownLeftReturn 95 | │ |── openDownRight 96 | │ |── openDownRightReturn 97 | │ |── openUpLeft 98 | │ |── openUpLeftReturn 99 | │ |── openUpRight 100 | │ └── openUpRightReturn 101 | ├── staticEffectsOut 102 | │ |── openDownLeftOut 103 | │ |── openDownRightOut 104 | │ |── openUpLeftOut 105 | │ └── openUpRightOut 106 | ├── perspective 107 | │ |── perspectiveDown 108 | │ |── perspectiveDownReturn 109 | │ |── perspectiveLeft 110 | │ |── perspectiveLeftReturn 111 | │ |── perspectiveRight 112 | │ |── perspectiveRightReturn 113 | │ |── perspectiveUp 114 | │ └── perspectiveUpReturn 115 | ├── rotate 116 | │ |── rotateDownIn 117 | │ |── rotateDownOut 118 | │ |── rotateLeftIn 119 | │ |── rotateLeftOut 120 | │ |── rotateRightIn 121 | │ |── rotateRightOut 122 | │ |── rotateUpIn 123 | │ └── rotateUpOut 124 | ├── slide 125 | │ |── slideDown 126 | │ |── slideDownReturn 127 | │ |── slideLeft 128 | │ |── slideLeftReturn 129 | │ |── slideRight 130 | │ |── slideRightReturn 131 | │ |── slideUp 132 | │ └── slideUpReturn 133 | ├── math 134 | │ |── foolishIn 135 | │ |── foolishOut 136 | │ |── holeIn 137 | │ |── holeOut 138 | │ |── swashIn 139 | │ └── swashOut 140 | ├── tin 141 | │ |── tinDownIn 142 | │ |── tinDownOut 143 | │ |── tinLeftIn 144 | │ |── tinLeftOut 145 | │ |── tinRightIn 146 | │ |── tinRightOut 147 | │ |── tinUpIn 148 | │ └── tinUpOut 149 | ├── bomb 150 | │ |── bombLeftOut 151 | │ └── bombRightOut 152 | ├── boing 153 | │ |── boingInUp 154 | │ └── boingOutDown 155 | ├── space 156 | │ |── spaceInDown 157 | │ |── spaceInLeft 158 | │ |── spaceInRight 159 | │ |── spaceInUp 160 | │ |── spaceOutDown 161 | │ |── spaceOutLeft 162 | │ |── spaceOutRight 163 | │ └── spaceOutUp 164 | ``` 165 | 166 | ## FAQ 167 | 168 | - **How do I remember so many animation names:** Tailwinds-magic and [Tailwind Intellisense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) work well together, so take it easy! 169 | 170 | ## Contribute 171 | 172 | Make your own magical animation and create a Pull Request! I'd like to see what you've made ;) 173 | 174 | ## Run 175 | 176 | - Locally example 177 | 178 | ``` 179 | cd example 180 | yarn dev 181 | ``` 182 | 183 | - 📦 Package 184 | 185 | ``` 186 | yarn 187 | yarn build 188 | ``` 189 | 190 | - Unit test 191 | 192 | ``` 193 | npm run test 194 | ``` 195 | 196 | ## TODO 197 | 198 | - add the online DEMO 199 | 200 | ## License 201 | 202 | [MIT](./LICENSE) 203 | 204 | > Most of the animation effects are based on [magic](https://github.com/miniMAC/magic). 205 | -------------------------------------------------------------------------------- /dist/bling/puffIn.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const puffIn: Animation; 3 | export default puffIn; 4 | -------------------------------------------------------------------------------- /dist/bling/puffOut.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const puffOut: Animation; 3 | export default puffOut; 4 | -------------------------------------------------------------------------------- /dist/bling/vanishIn.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const vanishIn: Animation; 3 | export default vanishIn; 4 | -------------------------------------------------------------------------------- /dist/bling/vanishOut.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const vanishOut: Animation; 3 | export default vanishOut; 4 | -------------------------------------------------------------------------------- /dist/boing/boingInUp.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const boingInUp: Animation; 3 | export default boingInUp; 4 | -------------------------------------------------------------------------------- /dist/boing/boingOutDown.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const boingOutDown: Animation; 3 | export default boingOutDown; 4 | -------------------------------------------------------------------------------- /dist/bomb/bombLeftOut.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const bombLeftOut: Animation; 3 | export default bombLeftOut; 4 | -------------------------------------------------------------------------------- /dist/bomb/bombRightOut.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const bombRightOut: Animation; 3 | export default bombRightOut; 4 | -------------------------------------------------------------------------------- /dist/index.d.ts: -------------------------------------------------------------------------------- 1 | declare const magicAnimation: any; 2 | export default magicAnimation; 3 | -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function createPlugin(plugin, config) { 4 | return { 5 | handler: plugin, 6 | config, 7 | } 8 | } 9 | 10 | createPlugin.withOptions = function (pluginFunction, configFunction = () => ({})) { 11 | const optionsFunction = function (options) { 12 | return { 13 | __options: options, 14 | handler: pluginFunction(options), 15 | config: configFunction(options), 16 | } 17 | }; 18 | 19 | optionsFunction.__isOptionsFunction = true; 20 | 21 | // Expose plugin dependencies so that `object-hash` returns a different 22 | // value if anything here changes, to ensure a rebuild is triggered. 23 | optionsFunction.__pluginFunction = pluginFunction; 24 | optionsFunction.__configFunction = configFunction; 25 | 26 | return optionsFunction 27 | }; 28 | 29 | /** 30 | * Composes a variable number of CSS helper functions. 31 | * Returns a function that accepts all the original arguments 32 | * of the functions it composed. If the original function 33 | * accepted multiple arguments, they must be passed as 34 | * an array. 35 | 36 | * @example 37 | * const translateXandRotateY = compose(translateX, rotateY); 38 | * const cssValue = translateXandRotateY('-5px', '30deg'); 39 | */ 40 | var compose = function () { 41 | var funcs = []; 42 | for (var _i = 0; _i < arguments.length; _i++) { 43 | funcs[_i] = arguments[_i]; 44 | } 45 | return function () { 46 | var styleArgs = []; 47 | for (var _i = 0; _i < arguments.length; _i++) { 48 | styleArgs[_i] = arguments[_i]; 49 | } 50 | var result = funcs.reduce(function (acc, func, i) { 51 | var arg = styleArgs[i]; 52 | return acc + " " + (Array.isArray(arg) ? func.apply(void 0, arg) : func(arg)); 53 | }, ""); 54 | return result.trim(); 55 | }; 56 | }; 57 | var translateX = function (a) { return "translateX(" + a + ")"; }; 58 | var scale = function (a) { return "scale(" + a + ")"; }; 59 | var rotateY = function (a) { return "rotateY(" + a + "deg)"; }; 60 | var perspective = function (a) { return "perspective(" + a + ")"; }; 61 | var translateY = function (a) { return "translateY(" + a + ")"; }; 62 | var translateZ = function (a) { return "translateZ(" + a + ")"; }; 63 | var translateXY = function (a, b) { 64 | return "translate(" + a + "," + b + ")"; 65 | }; 66 | var rotate = function (a) { return "rotate(" + a + "deg)"; }; 67 | var rotateX = function (a) { return "rotateX(" + a + "deg)"; }; 68 | var blur = function (a) { return "blur(" + a + ")"; }; 69 | 70 | var scaleAndRotate = compose(scale, rotate); 71 | var magic = { 72 | "0%": { 73 | opacity: 0, 74 | transformOrigin: "200% 500%", 75 | transform: scaleAndRotate([0], [270]), 76 | }, 77 | "100%": { 78 | opacity: 1, 79 | transformOrigin: "100% 200%", 80 | transform: scaleAndRotate([1], [0]), 81 | }, 82 | }; 83 | 84 | var scaleAndtranslateXY = compose(scale, translateXY); 85 | var swap = { 86 | "0%": { 87 | opacity: 0, 88 | transformOrigin: "0 100%", 89 | transform: scaleAndtranslateXY([0], ["-700px", "0px"]), 90 | }, 91 | "100%": { 92 | opacity: 1, 93 | transformOrigin: "100% 100%", 94 | transform: scaleAndtranslateXY([1], ["0px", "0px"]), 95 | }, 96 | }; 97 | 98 | var scaleRotateTranslateY = compose(scale, rotate, translateY); 99 | var twisterInUp = { 100 | "0%": { 101 | opacity: 0, 102 | transformOrigin: "100% 0", 103 | transform: scaleRotateTranslateY([0], [360], ["100%"]), 104 | }, 105 | "30%": { 106 | transformOrigin: "100% 0", 107 | transform: scaleRotateTranslateY([0], [360], ["100%"]), 108 | }, 109 | "100%": { 110 | opacity: 1, 111 | transformOrigin: "0 0", 112 | transform: scaleRotateTranslateY([1], [0], ["0"]), 113 | }, 114 | }; 115 | 116 | var scaleRotateTranslateY$1 = compose(scale, rotate, translateY); 117 | var twisterInUp$1 = { 118 | "0%": { 119 | opacity: 0, 120 | transformOrigin: "0 100%", 121 | transform: scaleRotateTranslateY$1([0], [360], ["-100%"]), 122 | }, 123 | "30%": { 124 | transformOrigin: "0 100%", 125 | transform: scaleRotateTranslateY$1([0], [360], ["-100%"]), 126 | }, 127 | "100%": { 128 | opacity: 1, 129 | transformOrigin: "100% 100%", 130 | transform: scaleRotateTranslateY$1([1], [0], ["0%"]), 131 | }, 132 | }; 133 | 134 | var puffIn = { 135 | "0%": { 136 | opacity: 0, 137 | transformOrigin: "50% 50%", 138 | transform: scale(2), 139 | filter: blur("2px"), 140 | }, 141 | "100%": { 142 | opacity: 1, 143 | transformOrigin: "50% 50%", 144 | transform: scale(1), 145 | filter: blur("0px"), 146 | }, 147 | }; 148 | 149 | var puffOut = { 150 | "0%": { 151 | opacity: 1, 152 | transformOrigin: "50% 50%", 153 | transform: scale(1), 154 | filter: blur("0px"), 155 | }, 156 | "100%": { 157 | opacity: 0, 158 | transformOrigin: "50% 50%", 159 | transform: scale(2), 160 | filter: blur("2px"), 161 | }, 162 | }; 163 | 164 | var vanishIn = { 165 | "0%": { 166 | opacity: 0, 167 | transformOrigin: "50% 50%", 168 | transform: scale(2), 169 | filter: blur("90px"), 170 | }, 171 | "100%": { 172 | opacity: 1, 173 | transformOrigin: "50% 50%", 174 | transform: scale(1), 175 | filter: blur("0px"), 176 | }, 177 | }; 178 | 179 | var vanishOut = { 180 | "0%": { 181 | opacity: 1, 182 | transformOrigin: "50% 50%", 183 | transform: scale(1), 184 | filter: blur("0px"), 185 | }, 186 | "100%": { 187 | opacity: 0, 188 | transformOrigin: "50% 50%", 189 | transform: scale(2), 190 | filter: blur("20px"), 191 | }, 192 | }; 193 | 194 | var openDownLeft = { 195 | "0%": { 196 | transformOrigin: "bottom left", 197 | transform: rotate(0), 198 | animationTimingFunction: "ease-out", 199 | }, 200 | "100%": { 201 | transformOrigin: "bottom left", 202 | transform: rotate(-110), 203 | animationTimingFunction: "ease-in-out", 204 | }, 205 | }; 206 | 207 | var openDownLeftReturn = { 208 | "0%": { 209 | transformOrigin: "bottom left", 210 | transform: rotate(-110), 211 | animationTimingFunction: "ease-in-out", 212 | }, 213 | "100%": { 214 | transformOrigin: "bottom left", 215 | transform: rotate(0), 216 | animationTimingFunction: "ease-out", 217 | }, 218 | }; 219 | 220 | var openDownRight = { 221 | "0%": { 222 | transformOrigin: "bottom right", 223 | transform: rotate(0), 224 | animationTimingFunction: "ease-out", 225 | }, 226 | "100%": { 227 | transformOrigin: "bottom right", 228 | transform: rotate(110), 229 | animationTimingFunction: "ease-in-out", 230 | }, 231 | }; 232 | 233 | var openDownRightReturn = { 234 | "0%": { 235 | transformOrigin: "bottom right", 236 | transform: rotate(110), 237 | animationTimingFunction: "ease-in-out", 238 | }, 239 | "100%": { 240 | transformOrigin: "bottom right", 241 | transform: rotate(0), 242 | animationTimingFunction: "ease-out", 243 | }, 244 | }; 245 | 246 | var openUpLeft = { 247 | "0%": { 248 | transformOrigin: "top left", 249 | transform: rotate(0), 250 | animationTimingFunction: "ease-out", 251 | }, 252 | "100%": { 253 | transformOrigin: "top left", 254 | transform: rotate(110), 255 | animationTimingFunction: "ease-in-out", 256 | }, 257 | }; 258 | 259 | var openUpLeftReturn = { 260 | "0%": { 261 | transformOrigin: "top left", 262 | transform: rotate(110), 263 | animationTimingFunction: "ease-in-out", 264 | }, 265 | "100%": { 266 | transformOrigin: "top left", 267 | transform: rotate(0), 268 | animationTimingFunction: "ease-out", 269 | }, 270 | }; 271 | 272 | var openUpRight = { 273 | "0%": { 274 | transformOrigin: "top right", 275 | transform: rotate(0), 276 | animationTimingFunction: "ease-out", 277 | }, 278 | "100%": { 279 | transformOrigin: "top right", 280 | transform: rotate(-110), 281 | animationTimingFunction: "ease-in-out", 282 | }, 283 | }; 284 | 285 | var openUpRightReturn = { 286 | "0%": { 287 | transformOrigin: "top right", 288 | transform: rotate(-110), 289 | animationTimingFunction: "ease-in-out", 290 | }, 291 | "100%": { 292 | transformOrigin: "top right", 293 | transform: rotate(0), 294 | animationTimingFunction: "ease-out", 295 | }, 296 | }; 297 | 298 | var openDownLeftOut = { 299 | "0%": { 300 | opacity: 1, 301 | transformOrigin: "bottom left", 302 | transform: rotate(0), 303 | animationTimingFunction: "ease-out", 304 | }, 305 | "100%": { 306 | opacity: 0, 307 | transformOrigin: "bottom left", 308 | transform: rotate(-110), 309 | animationTimingFunction: "ease-in-out", 310 | }, 311 | }; 312 | 313 | var openDownRightOut = { 314 | "0%": { 315 | opacity: 1, 316 | transformOrigin: "bottom right", 317 | transform: rotate(0), 318 | animationTimingFunction: "ease-out", 319 | }, 320 | "100%": { 321 | opacity: 0, 322 | transformOrigin: "bottom right", 323 | transform: rotate(110), 324 | animationTimingFunction: "ease-in-out", 325 | }, 326 | }; 327 | 328 | var openUpLeftOut = { 329 | "0%": { 330 | opacity: 1, 331 | transformOrigin: "top left", 332 | transform: rotate(0), 333 | animationTimingFunction: "ease-out", 334 | }, 335 | "100%": { 336 | opacity: 0, 337 | transformOrigin: "top left", 338 | transform: rotate(110), 339 | animationTimingFunction: "ease-in-out", 340 | }, 341 | }; 342 | 343 | var openUpRightOut = { 344 | "0%": { 345 | opacity: 1, 346 | transformOrigin: "top right", 347 | transform: rotate(0), 348 | animationTimingFunction: "ease-out", 349 | }, 350 | "100%": { 351 | opacity: 0, 352 | transformOrigin: "top right", 353 | transform: rotate(-110), 354 | animationTimingFunction: "ease-in-out", 355 | }, 356 | }; 357 | 358 | var perspectiveRotateX = compose(perspective, rotateX); 359 | var perspectiveDown = { 360 | "0%": { 361 | transformOrigin: "0 100%", 362 | transform: perspectiveRotateX(["800px"], [0]), 363 | }, 364 | "100%": { 365 | transformOrigin: "0 100%", 366 | transform: perspectiveRotateX(["800px"], [-180]), 367 | }, 368 | }; 369 | 370 | var perspectiveRotateX$1 = compose(perspective, rotateX); 371 | var perspectiveDownReturn = { 372 | "0%": { 373 | transformOrigin: "0 100%", 374 | transform: perspectiveRotateX$1(["800px"], [-180]), 375 | }, 376 | "100%": { 377 | transformOrigin: "0 100%", 378 | transform: perspectiveRotateX$1(["800px"], [0]), 379 | }, 380 | }; 381 | 382 | var perspectiveRotateY = compose(perspective, rotateY); 383 | var perspectiveLeft = { 384 | "0%": { 385 | transformOrigin: "0 0", 386 | transform: perspectiveRotateY(["800px"], [0]), 387 | }, 388 | "100%": { 389 | transformOrigin: "0 0", 390 | transform: perspectiveRotateY(["800px"], [-180]), 391 | }, 392 | }; 393 | 394 | var perspectiveRotateY$1 = compose(perspective, rotateY); 395 | var perspectiveLeftReturn = { 396 | "0%": { 397 | transformOrigin: "0 0", 398 | transform: perspectiveRotateY$1(["800px"], [-180]), 399 | }, 400 | "100%": { 401 | transformOrigin: "0 0", 402 | transform: perspectiveRotateY$1(["800px"], [0]), 403 | }, 404 | }; 405 | 406 | var perspectiveRotateY$2 = compose(perspective, rotateY); 407 | var perspectiveRight = { 408 | "0%": { 409 | transformOrigin: "100% 0", 410 | transform: perspectiveRotateY$2(["800px"], [0]), 411 | }, 412 | "100%": { 413 | transformOrigin: "100% 0", 414 | transform: perspectiveRotateY$2(["800px"], [180]), 415 | }, 416 | }; 417 | 418 | var perspectiveRotateY$3 = compose(perspective, rotateY); 419 | var perspectiveRightReturn = { 420 | "0%": { 421 | transformOrigin: "100% 0", 422 | transform: perspectiveRotateY$3(["800px"], [180]), 423 | }, 424 | "100%": { 425 | transformOrigin: "100% 0", 426 | transform: perspectiveRotateY$3(["800px"], [0]), 427 | }, 428 | }; 429 | 430 | var perspectiveRotateX$2 = compose(perspective, rotateX); 431 | var perspectiveUp = { 432 | "0%": { 433 | transformOrigin: "0 0", 434 | transform: perspectiveRotateX$2(["800px"], [0]), 435 | }, 436 | "100%": { 437 | transformOrigin: "0 0", 438 | transform: perspectiveRotateX$2(["800px"], [180]), 439 | }, 440 | }; 441 | 442 | var perspectiveRotateX$3 = compose(perspective, rotateX); 443 | var perspectiveUpReturn = { 444 | "0%": { 445 | transformOrigin: "0 0", 446 | transform: perspectiveRotateX$3(["800px"], [180]), 447 | }, 448 | "100%": { 449 | transformOrigin: "0 0", 450 | transform: perspectiveRotateX$3(["800px"], [0]), 451 | }, 452 | }; 453 | 454 | var perspectiveRotateXTranslateZ = compose(perspective, rotateX, translateZ); 455 | var rotateDownIn = { 456 | "0%": { 457 | opacity: 0, 458 | transformOrigin: "50% 100%", 459 | transform: perspectiveRotateXTranslateZ(["800px"], [-180], ["300px"]), 460 | }, 461 | "100%": { 462 | opacity: 1, 463 | transformOrigin: "0 0", 464 | transform: perspectiveRotateXTranslateZ(["800px"], [0], ["0px"]), 465 | }, 466 | }; 467 | 468 | var perspectiveRotateXTranslateZ$1 = compose(perspective, rotateX, translateZ); 469 | var rotateDownOut = { 470 | "0%": { 471 | opacity: 1, 472 | transformOrigin: "0 0", 473 | transform: perspectiveRotateXTranslateZ$1(["800px"], [0], ["0px"]), 474 | }, 475 | "100%": { 476 | opacity: 0, 477 | transformOrigin: "50% 100%", 478 | transform: perspectiveRotateXTranslateZ$1(["800px"], [-180], ["300px"]), 479 | }, 480 | }; 481 | 482 | var perspectiveRotateYTranslateZ = compose(perspective, rotateY, translateZ); 483 | var rotateLeftIn = { 484 | "0%": { 485 | opacity: 0, 486 | transformOrigin: "50% 0", 487 | transform: perspectiveRotateYTranslateZ(["800px"], [-180], ["300px"]), 488 | }, 489 | "100%": { 490 | opacity: 1, 491 | transformOrigin: "0 0", 492 | transform: perspectiveRotateYTranslateZ(["800px"], [0], ["0px"]), 493 | }, 494 | }; 495 | 496 | var perspectiveRotateYTranslateZ$1 = compose(perspective, rotateY, translateZ); 497 | var rotateLeftOut = { 498 | "0%": { 499 | opacity: 1, 500 | transformOrigin: "0 0", 501 | transform: perspectiveRotateYTranslateZ$1(["800px"], [0], ["0px"]), 502 | }, 503 | "100%": { 504 | opacity: 0, 505 | transformOrigin: "50% 0", 506 | transform: perspectiveRotateYTranslateZ$1(["800px"], [-180], ["300px"]), 507 | }, 508 | }; 509 | 510 | var perspectiveRotateYTranslateZ$2 = compose(perspective, rotateY, translateZ); 511 | var rotateRightIn = { 512 | "0%": { 513 | opacity: 0, 514 | transformOrigin: "50% 0", 515 | transform: perspectiveRotateYTranslateZ$2(["800px"], [180], ["300px"]), 516 | }, 517 | "100%": { 518 | opacity: 1, 519 | transformOrigin: "0 0", 520 | transform: perspectiveRotateYTranslateZ$2(["800px"], [0], ["0px"]), 521 | }, 522 | }; 523 | 524 | var perspectiveRotateYTranslateZ$3 = compose(perspective, rotateY, translateZ); 525 | var rotateRightOut = { 526 | "0%": { 527 | opacity: 1, 528 | transformOrigin: "0 0", 529 | transform: perspectiveRotateYTranslateZ$3(["800px"], [0], ["0px"]), 530 | }, 531 | "100%": { 532 | opacity: 0, 533 | transformOrigin: "50% 0", 534 | transform: perspectiveRotateYTranslateZ$3(["800px"], [180], ["300px"]), 535 | }, 536 | }; 537 | 538 | var perspectiveRotateXTranslateZ$2 = compose(perspective, rotateX, translateZ); 539 | var rotateUpIn = { 540 | "0%": { 541 | opacity: 0, 542 | transformOrigin: "50% 0", 543 | transform: perspectiveRotateXTranslateZ$2(["800px"], [180], ["100px"]), 544 | }, 545 | "100%": { 546 | opacity: 1, 547 | transformOrigin: "0 0", 548 | transform: perspectiveRotateXTranslateZ$2(["800px"], [0], ["0px"]), 549 | }, 550 | }; 551 | 552 | var perspectiveRotateXTranslateZ$3 = compose(perspective, rotateX, translateZ); 553 | var rotateUpOut = { 554 | "0%": { 555 | opacity: 1, 556 | transformOrigin: "0 0", 557 | transform: perspectiveRotateXTranslateZ$3(["800px"], [0], ["0px"]), 558 | }, 559 | "100%": { 560 | opacity: 0, 561 | transformOrigin: "50% 0", 562 | transform: perspectiveRotateXTranslateZ$3(["800px"], [180], ["100px"]), 563 | }, 564 | }; 565 | 566 | var slideDown = { 567 | "0%": { 568 | transformOrigin: "0 0", 569 | transform: translateY("0%"), 570 | }, 571 | "100%": { 572 | transformOrigin: "0 0", 573 | transform: translateY("100%"), 574 | }, 575 | }; 576 | 577 | var slideDownReturn = { 578 | "0%": { 579 | transformOrigin: "0 0", 580 | transform: translateY("100%"), 581 | }, 582 | "100%": { 583 | transformOrigin: "0 0", 584 | transform: translateY("0%"), 585 | }, 586 | }; 587 | 588 | var slideLeft = { 589 | "0%": { 590 | transformOrigin: "0 0", 591 | transform: translateX("0%"), 592 | }, 593 | "100%": { 594 | transformOrigin: "0 0", 595 | transform: translateX("-100%"), 596 | }, 597 | }; 598 | 599 | var slideLeftReturn = { 600 | "0%": { 601 | transformOrigin: "0 0", 602 | transform: translateX("-100%"), 603 | }, 604 | "100%": { 605 | transformOrigin: "0 0", 606 | transform: translateX("0%"), 607 | }, 608 | }; 609 | 610 | var slideRight = { 611 | "0%": { 612 | transformOrigin: "0 0", 613 | transform: translateX("0%"), 614 | }, 615 | "100%": { 616 | transformOrigin: "0 0", 617 | transform: translateX("100%"), 618 | }, 619 | }; 620 | 621 | var slideRightReturn = { 622 | "0%": { 623 | transformOrigin: "0 0", 624 | transform: translateX("100%"), 625 | }, 626 | "100%": { 627 | transformOrigin: "0 0", 628 | transform: translateX("0%"), 629 | }, 630 | }; 631 | 632 | var slideUp = { 633 | "0%": { 634 | transformOrigin: "0 0", 635 | transform: translateY("0%"), 636 | }, 637 | "100%": { 638 | transformOrigin: "0 0", 639 | transform: translateY("-100%"), 640 | }, 641 | }; 642 | 643 | var slideUpReturn = { 644 | "0%": { 645 | transformOrigin: "0 0", 646 | transform: translateY("-100%"), 647 | }, 648 | "100%": { 649 | transformOrigin: "0 0", 650 | transform: translateY("0%"), 651 | }, 652 | }; 653 | 654 | var scaleRotate = compose(scale, rotate); 655 | var foolishIn = { 656 | "0%": { 657 | opacity: 0, 658 | transformOrigin: "50% 50%", 659 | transform: scaleRotate([0], [360]), 660 | }, 661 | "20%": { 662 | opacity: 1, 663 | transformOrigin: "0% 100%", 664 | transform: scaleRotate([0.5], [0]), 665 | }, 666 | "40%": { 667 | opacity: 1, 668 | transformOrigin: "100% 100%", 669 | transform: scaleRotate([0.5], [0]), 670 | }, 671 | "60%": { 672 | opacity: 1, 673 | transformOrigin: "0% 50%", 674 | transform: scaleRotate([0.5], [0]), 675 | }, 676 | "80%": { 677 | opacity: 1, 678 | transformOrigin: "0% 0%", 679 | transform: scaleRotate([0.5], [0]), 680 | }, 681 | "100%": { 682 | opacity: 1, 683 | transformOrigin: "50% 50%", 684 | transform: scaleRotate([1], [0]), 685 | }, 686 | }; 687 | 688 | var scaleRotate$1 = compose(scale, rotate); 689 | var foolishOut = { 690 | "0%": { 691 | opacity: 1, 692 | transformOrigin: "50% 50%", 693 | transform: scaleRotate$1([1], [360]), 694 | }, 695 | "20%": { 696 | opacity: 1, 697 | transformOrigin: "0% 0%", 698 | transform: scaleRotate$1([0.5], [0]), 699 | }, 700 | "40%": { 701 | opacity: 1, 702 | transformOrigin: "100% 0%", 703 | transform: scaleRotate$1([0.5], [0]), 704 | }, 705 | "60%": { 706 | opacity: 1, 707 | transformOrigin: "0% 0%", 708 | transform: scaleRotate$1([0.5], [0]), 709 | }, 710 | "80%": { 711 | opacity: 1, 712 | transformOrigin: "0% 100%", 713 | transform: scaleRotate$1([0.5], [0]), 714 | }, 715 | "100%": { 716 | opacity: 0, 717 | transformOrigin: "50% 50%", 718 | transform: scaleRotate$1([0], [0]), 719 | }, 720 | }; 721 | 722 | var scaleRotateY = compose(scale, rotateY); 723 | var holeIn = { 724 | "0%": { 725 | opacity: 0, 726 | transformOrigin: "50% 50%", 727 | transform: scaleRotateY([0], [180]), 728 | }, 729 | "100%": { 730 | opacity: 1, 731 | transformOrigin: "50% 50%", 732 | transform: scaleRotateY([1], [0]), 733 | }, 734 | }; 735 | 736 | var scaleRotateY$1 = compose(scale, rotateY); 737 | var holeOut = { 738 | "0%": { 739 | opacity: 1, 740 | transformOrigin: "50% 50%", 741 | transform: scaleRotateY$1([1], [0]), 742 | }, 743 | "100%": { 744 | opacity: 0, 745 | transformOrigin: "50% 50%", 746 | transform: scaleRotateY$1([0], [180]), 747 | }, 748 | }; 749 | 750 | var swashIn = { 751 | "0%": { 752 | opacity: 0, 753 | transformOrigin: "50% 50%", 754 | transform: scale(0), 755 | }, 756 | "80%": { 757 | opacity: 1, 758 | transformOrigin: "50% 50%", 759 | transform: scale(0.9), 760 | }, 761 | "100%": { 762 | opacity: 1, 763 | transformOrigin: "50% 50%", 764 | transform: scale(1), 765 | }, 766 | }; 767 | 768 | var swashOut = { 769 | "0%": { 770 | opacity: 1, 771 | transformOrigin: "50% 50%", 772 | transform: scale(1), 773 | }, 774 | "80%": { 775 | opacity: 1, 776 | transformOrigin: "50% 50%", 777 | transform: scale(0.9), 778 | }, 779 | "100%": { 780 | opacity: 0, 781 | transformOrigin: "50% 50%", 782 | transform: scale(0), 783 | }, 784 | }; 785 | 786 | var scaleTranslateY = compose(scale, translateY); 787 | var tinDownIn = { 788 | "0%": { 789 | opacity: 0, 790 | transform: scaleTranslateY([1], ["300%"]), 791 | }, 792 | "50%, 70%, 90%": { 793 | opacity: 1, 794 | transform: scaleTranslateY([1.1], [0]), 795 | }, 796 | "60%, 80%, 100%": { 797 | opacity: 1, 798 | transform: scaleTranslateY([1], [0]), 799 | }, 800 | }; 801 | 802 | var scaleTranslateY$1 = compose(scale, translateY); 803 | var tinDownOut = { 804 | "0%, 20%, 40%, 50%": { 805 | opacity: 1, 806 | transform: scaleTranslateY$1([1], [0]), 807 | }, 808 | "10%, 30%": { 809 | opacity: 1, 810 | transform: scaleTranslateY$1([1.1], [0]), 811 | }, 812 | "100%": { 813 | opacity: 0, 814 | transform: scaleTranslateY$1([1], ["300%"]), 815 | }, 816 | }; 817 | 818 | var scaleTranslateX = compose(scale, translateX); 819 | var tinLeftIn = { 820 | "0%": { 821 | opacity: 0, 822 | transform: scaleTranslateX([1], ["-300%"]), 823 | }, 824 | "50%, 70%, 90%": { 825 | opacity: 1, 826 | transform: scaleTranslateX([1.1], [0]), 827 | }, 828 | "60%, 80%, 100%": { 829 | opacity: 1, 830 | transform: scaleTranslateX([1], [0]), 831 | }, 832 | }; 833 | 834 | var scaleTranslateX$1 = compose(scale, translateX); 835 | var tinLeftOut = { 836 | "0%, 20%, 40%, 50%": { 837 | opacity: 1, 838 | transform: scaleTranslateX$1([1], [0]), 839 | }, 840 | "10%, 30%": { 841 | opacity: 1, 842 | transform: scaleTranslateX$1([1.1], [0]), 843 | }, 844 | "100%": { 845 | opacity: 0, 846 | transform: scaleTranslateX$1([1], ["-300%"]), 847 | }, 848 | }; 849 | 850 | var scaleTranslateX$2 = compose(scale, translateX); 851 | var tinRightIn = { 852 | "0%": { 853 | opacity: 0, 854 | transform: scaleTranslateX$2([1], ["300%"]), 855 | }, 856 | "50%, 70%, 90%": { 857 | opacity: 1, 858 | transform: scaleTranslateX$2([1.1], [0]), 859 | }, 860 | "60%, 80%, 100%": { 861 | opacity: 1, 862 | transform: scaleTranslateX$2([1], [0]), 863 | }, 864 | }; 865 | 866 | var scaleTranslateX$3 = compose(scale, translateX); 867 | var tinRightOut = { 868 | "0%, 20%, 40%, 50%": { 869 | opacity: 1, 870 | transform: scaleTranslateX$3([1], [0]), 871 | }, 872 | "10%, 30%": { 873 | opacity: 1, 874 | transform: scaleTranslateX$3([1.1], [0]), 875 | }, 876 | "100%": { 877 | opacity: 0, 878 | transform: scaleTranslateX$3([1], ["300%"]), 879 | }, 880 | }; 881 | 882 | var scaleTranslateY$2 = compose(scale, translateY); 883 | var tinUpIn = { 884 | "0%": { 885 | opacity: 0, 886 | transform: scaleTranslateY$2([1], ["-300%"]), 887 | }, 888 | "50%, 70%, 90%": { 889 | opacity: 1, 890 | transform: scaleTranslateY$2([1.1], [0]), 891 | }, 892 | "60%, 80%, 100%": { 893 | opacity: 1, 894 | transform: scaleTranslateY$2([1], [0]), 895 | }, 896 | }; 897 | 898 | var scaleTranslateY$3 = compose(scale, translateY); 899 | var tinUpOut = { 900 | "0%, 20%, 40%, 50%": { 901 | opacity: 1, 902 | transform: scaleTranslateY$3([1], [0]), 903 | }, 904 | "10%, 30%": { 905 | opacity: 1, 906 | transform: scaleTranslateY$3([1.1], [0]), 907 | }, 908 | "100%": { 909 | opacity: 0, 910 | transform: scaleTranslateY$3([1], ["-300%"]), 911 | }, 912 | }; 913 | 914 | var bombLeftOut = { 915 | "0%": { 916 | opacity: 1, 917 | transformOrigin: "50% 50%", 918 | transform: rotate(0), 919 | filter: blur("0px"), 920 | }, 921 | "50%": { 922 | opacity: 1, 923 | transformOrigin: "-100% 50%", 924 | transform: rotate(-160), 925 | filter: blur("0px"), 926 | }, 927 | "100%": { 928 | opacity: 0, 929 | transformOrigin: "-100% 50%", 930 | transform: rotate(-160), 931 | filter: blur("20px"), 932 | }, 933 | }; 934 | 935 | var bombRightOut = { 936 | "0%": { 937 | opacity: 1, 938 | transformOrigin: "50% 50%", 939 | transform: rotate(0), 940 | filter: blur("0px"), 941 | }, 942 | "50%": { 943 | opacity: 1, 944 | transformOrigin: "200% 50%", 945 | transform: rotate(160), 946 | filter: blur("0px"), 947 | }, 948 | "100%": { 949 | opacity: 0, 950 | transformOrigin: "200% 50%", 951 | transform: rotate(160), 952 | filter: blur("20px"), 953 | }, 954 | }; 955 | 956 | var perspectiveRotateX$4 = compose(perspective, rotateX); 957 | var boingInUp = { 958 | "0%": { 959 | opacity: 0, 960 | transformOrigin: "50% 0%", 961 | transform: perspectiveRotateX$4(["800px"], [-90]), 962 | }, 963 | "50%": { 964 | opacity: 1, 965 | transformOrigin: "50% 0%", 966 | transform: perspectiveRotateX$4(["800px"], [50]), 967 | }, 968 | "100%": { 969 | opacity: 1, 970 | transformOrigin: "50% 0%", 971 | transform: perspectiveRotateX$4(["800px"], [0]), 972 | }, 973 | }; 974 | 975 | var perspectiveRotateXRotateY = compose(perspective, rotateX, rotateY); 976 | var boingOutDown = { 977 | "0%": { 978 | opacity: 1, 979 | transformOrigin: "100% 100%", 980 | transform: perspectiveRotateXRotateY(["800px"], [0], [0]), 981 | }, 982 | "20%": { 983 | opacity: 1, 984 | transformOrigin: "100% 100%", 985 | transform: perspectiveRotateXRotateY(["800px"], [0], [10]), 986 | }, 987 | "30%": { 988 | opacity: 1, 989 | transformOrigin: "0% 100%", 990 | transform: perspectiveRotateXRotateY(["800px"], [0], [0]), 991 | }, 992 | "40%": { 993 | opacity: 1, 994 | transformOrigin: "0% 100%", 995 | transform: perspectiveRotateXRotateY(["800px"], [10], [10]), 996 | }, 997 | "100%": { 998 | opacity: 0, 999 | transformOrigin: "100% 100%", 1000 | transform: perspectiveRotateXRotateY(["800px"], [90], [0]), 1001 | }, 1002 | }; 1003 | 1004 | var scaletranslateXY = compose(scale, translateXY); 1005 | var spaceInDown = { 1006 | "0%": { 1007 | opacity: 0, 1008 | transformOrigin: "50% 100%", 1009 | transform: scaletranslateXY([0.2], ["0%", "200%"]), 1010 | }, 1011 | "100%": { 1012 | opacity: 1, 1013 | transformOrigin: "50% 100%", 1014 | transform: scaletranslateXY([1], ["0%", "0%"]), 1015 | }, 1016 | }; 1017 | 1018 | var scaletranslateXY$1 = compose(scale, translateXY); 1019 | var spaceInLeft = { 1020 | "0%": { 1021 | opacity: 0, 1022 | transformOrigin: "0% 50%", 1023 | transform: scaletranslateXY$1([0.2], ["-200%", "0%"]), 1024 | }, 1025 | "100%": { 1026 | opacity: 1, 1027 | transformOrigin: "0% 50%", 1028 | transform: scaletranslateXY$1([1], ["0%", "0%"]), 1029 | }, 1030 | }; 1031 | 1032 | var scaletranslateXY$2 = compose(scale, translateXY); 1033 | var spaceInRight = { 1034 | "0%": { 1035 | opacity: 0, 1036 | transformOrigin: "100% 50%", 1037 | transform: scaletranslateXY$2([0.2], ["200%", "0%"]), 1038 | }, 1039 | "100%": { 1040 | opacity: 1, 1041 | transformOrigin: "100% 50%", 1042 | transform: scaletranslateXY$2([1], ["0%", "0%"]), 1043 | }, 1044 | }; 1045 | 1046 | var scaletranslateXY$3 = compose(scale, translateXY); 1047 | var spaceInUp = { 1048 | "0%": { 1049 | opacity: 0, 1050 | transformOrigin: "50% 0%", 1051 | transform: scaletranslateXY$3([0.2], ["0%", "-200%"]), 1052 | }, 1053 | "100%": { 1054 | opacity: 1, 1055 | transformOrigin: "50% 0%", 1056 | transform: scaletranslateXY$3([1], ["0%", "0%"]), 1057 | }, 1058 | }; 1059 | 1060 | var scaletranslateXY$4 = compose(scale, translateXY); 1061 | var spaceOutDown = { 1062 | "0%": { 1063 | opacity: 1, 1064 | transformOrigin: "50% 100%", 1065 | transform: scaletranslateXY$4([1], ["0%", "0%"]), 1066 | }, 1067 | "100%": { 1068 | opacity: 0, 1069 | transformOrigin: "50% 100%", 1070 | transform: scaletranslateXY$4([0.2], ["0%", "200%"]), 1071 | }, 1072 | }; 1073 | 1074 | var scaletranslateXY$5 = compose(scale, translateXY); 1075 | var spaceOutLeft = { 1076 | "0%": { 1077 | opacity: 1, 1078 | transformOrigin: "0% 50%", 1079 | transform: scaletranslateXY$5([1], ["0%", "0%"]), 1080 | }, 1081 | "100%": { 1082 | opacity: 0, 1083 | transformOrigin: "0% 50%", 1084 | transform: scaletranslateXY$5([0.2], ["-200%", "0%"]), 1085 | }, 1086 | }; 1087 | 1088 | var scaletranslateXY$6 = compose(scale, translateXY); 1089 | var spaceOutRight = { 1090 | "0%": { 1091 | opacity: 1, 1092 | transformOrigin: "100% 50%", 1093 | transform: scaletranslateXY$6([1], ["0%", "0%"]), 1094 | }, 1095 | "100%": { 1096 | opacity: 0, 1097 | transformOrigin: "100% 50%", 1098 | transform: scaletranslateXY$6([0.2], ["200%", "0%"]), 1099 | }, 1100 | }; 1101 | 1102 | var scaletranslateXY$7 = compose(scale, translateXY); 1103 | var spaceOutUp = { 1104 | "0%": { 1105 | opacity: 1, 1106 | transformOrigin: "50% 0%", 1107 | transform: scaletranslateXY$7([1], ["0%", "0%"]), 1108 | }, 1109 | "100%": { 1110 | opacity: 0, 1111 | transformOrigin: "50% 0%", 1112 | transform: scaletranslateXY$7([0.2], ["0%", "-200%"]), 1113 | }, 1114 | }; 1115 | 1116 | var magicAnimation = createPlugin(function (_a) { 1117 | var addUtilities = _a.addUtilities, matchUtilities = _a.matchUtilities, theme = _a.theme; 1118 | var fallbackKeyframes = { 1119 | "@keyframes magic": magic, 1120 | "@keyframes swap": swap, 1121 | "@keyframes twisterInUp": twisterInUp, 1122 | "@keyframes twisterInDown": twisterInUp$1, 1123 | "@keyframes puffIn": puffIn, 1124 | "@keyframes puffOut": puffOut, 1125 | "@keyframes vanishIn": vanishIn, 1126 | "@keyframes vanishOut": vanishOut, 1127 | "@keyframes openDownLeft": openDownLeft, 1128 | "@keyframes openDownLeftReturn": openDownLeftReturn, 1129 | "@keyframes openDownRight": openDownRight, 1130 | "@keyframes openDownRightReturn": openDownRightReturn, 1131 | "@keyframes openUpLeft": openUpLeft, 1132 | "@keyframes openUpLeftReturn": openUpLeftReturn, 1133 | "@keyframes openUpRight": openUpRight, 1134 | "@keyframes openUpRightReturn": openUpRightReturn, 1135 | "@keyframes openDownLeftOut": openDownLeftOut, 1136 | "@keyframes openDownRightOut": openDownRightOut, 1137 | "@keyframes openUpLeftOut": openUpLeftOut, 1138 | "@keyframes openUpRightOut": openUpRightOut, 1139 | "@keyframes perspectiveDown": perspectiveDown, 1140 | "@keyframes perspectiveDownReturn": perspectiveDownReturn, 1141 | "@keyframes perspectiveLeft": perspectiveLeft, 1142 | "@keyframes perspectiveLeftReturn": perspectiveLeftReturn, 1143 | "@keyframes perspectiveRight": perspectiveRight, 1144 | "@keyframes perspectiveRightReturn": perspectiveRightReturn, 1145 | "@keyframes perspectiveUp": perspectiveUp, 1146 | "@keyframes perspectiveUpReturn": perspectiveUpReturn, 1147 | "@keyframes rotateDownIn": rotateDownIn, 1148 | "@keyframes rotateDownOut": rotateDownOut, 1149 | "@keyframes rotateLeftIn": rotateLeftIn, 1150 | "@keyframes rotateLeftOut": rotateLeftOut, 1151 | "@keyframes rotateRightIn": rotateRightIn, 1152 | "@keyframes rotateRightOut": rotateRightOut, 1153 | "@keyframes rotateUpIn": rotateUpIn, 1154 | "@keyframes rotateUpOut": rotateUpOut, 1155 | "@keyframes slideDown": slideDown, 1156 | "@keyframes slideDownReturn": slideDownReturn, 1157 | "@keyframes slideLeft": slideLeft, 1158 | "@keyframes slideLeftReturn": slideLeftReturn, 1159 | "@keyframes slideRight": slideRight, 1160 | "@keyframes slideRightReturn": slideRightReturn, 1161 | "@keyframes slideUp": slideUp, 1162 | "@keyframes slideUpReturn": slideUpReturn, 1163 | "@keyframes foolishIn": foolishIn, 1164 | "@keyframes foolishOut": foolishOut, 1165 | "@keyframes holeIn": holeIn, 1166 | "@keyframes holeOut": holeOut, 1167 | "@keyframes swashIn": swashIn, 1168 | "@keyframes swashOut": swashOut, 1169 | "@keyframes tinDownIn": tinDownIn, 1170 | "@keyframes tinDownOut": tinDownOut, 1171 | "@keyframes tinLeftIn": tinLeftIn, 1172 | "@keyframes tinLeftOut": tinLeftOut, 1173 | "@keyframes tinRightIn": tinRightIn, 1174 | "@keyframes tinRightOut": tinRightOut, 1175 | "@keyframes tinUpIn": tinUpIn, 1176 | "@keyframes tinUpOut": tinUpOut, 1177 | "@keyframes bombLeftOut": bombLeftOut, 1178 | "@keyframes bombRightOut": bombRightOut, 1179 | "@keyframes boingInUp": boingInUp, 1180 | "@keyframes boingOutDown": boingOutDown, 1181 | "@keyframes spaceInDown": spaceInDown, 1182 | "@keyframes spaceInLeft": spaceInLeft, 1183 | "@keyframes spaceInRight": spaceInRight, 1184 | "@keyframes spaceInUp": spaceInUp, 1185 | "@keyframes spaceOutDown": spaceOutDown, 1186 | "@keyframes spaceOutLeft": spaceOutLeft, 1187 | "@keyframes spaceOutRight": spaceOutRight, 1188 | "@keyframes spaceOutUp": spaceOutUp, 1189 | }; 1190 | var fallbackUtilities = { 1191 | ".magic-magic": { 1192 | animationName: "magic", 1193 | animationDuration: "1s", 1194 | }, 1195 | ".magic-swap": { 1196 | animationName: "swap", 1197 | animationDuration: "1s", 1198 | }, 1199 | ".magic-twisterInUp": { 1200 | animationName: "twisterInUp", 1201 | animationDuration: "1s", 1202 | }, 1203 | ".magic-twisterInDown": { 1204 | animationName: "twisterInDown", 1205 | animationDuration: "1s", 1206 | }, 1207 | ".magic-puffIn": { 1208 | animationName: "puffIn", 1209 | animationDuration: "1s", 1210 | }, 1211 | ".magic-puffOut": { 1212 | animationName: "puffOut", 1213 | animationDuration: "1s", 1214 | }, 1215 | ".magic-vanishIn": { 1216 | animationName: "vanishIn", 1217 | animationDuration: "1s", 1218 | }, 1219 | ".magic-vanishOut": { 1220 | animationName: "vanishOut", 1221 | animationDuration: "1s", 1222 | }, 1223 | ".magic-openDownLeft": { 1224 | animationName: "openDownLeft", 1225 | animationDuration: "1s", 1226 | }, 1227 | ".magic-openDownLeftReturn": { 1228 | animationName: "openDownLeftReturn", 1229 | animationDuration: "1s", 1230 | }, 1231 | ".magic-openDownRight": { 1232 | animationName: "openDownRight", 1233 | animationDuration: "1s", 1234 | }, 1235 | ".magic-openDownRightReturn": { 1236 | animationName: "openDownRightReturn", 1237 | animationDuration: "1s", 1238 | }, 1239 | ".magic-openUpLeft": { 1240 | animationName: "openUpLeft", 1241 | animationDuration: "1s", 1242 | }, 1243 | ".magic-openUpLeftReturn": { 1244 | animationName: "openUpLeftReturn", 1245 | animationDuration: "1s", 1246 | }, 1247 | ".magic-openUpRight": { 1248 | animationName: "openUpRight", 1249 | animationDuration: "1s", 1250 | }, 1251 | ".magic-openUpRightReturn": { 1252 | animationName: "openUpRightReturn", 1253 | animationDuration: "1s", 1254 | }, 1255 | ".magic-openDownLeftOut": { 1256 | animationName: "openDownLeftOut", 1257 | animationDuration: "1s", 1258 | }, 1259 | ".magic-openDownRightOut": { 1260 | animationName: "openDownRightOut", 1261 | animationDuration: "1s", 1262 | }, 1263 | ".magic-openUpLeftOut": { 1264 | animationName: "openUpLeftOut", 1265 | animationDuration: "1s", 1266 | }, 1267 | ".magic-openUpRightOut": { 1268 | animationName: "openUpRightOut", 1269 | animationDuration: "1s", 1270 | }, 1271 | ".magic-perspectiveDown": { 1272 | animationName: "perspectiveDown", 1273 | animationDuration: "1s", 1274 | }, 1275 | ".magic-perspectiveDownReturn": { 1276 | animationName: "perspectiveDownReturn", 1277 | animationDuration: "1s", 1278 | }, 1279 | ".magic-perspectiveLeft": { 1280 | animationName: "perspectiveLeft", 1281 | animationDuration: "1s", 1282 | }, 1283 | ".magic-perspectiveLeftReturn": { 1284 | animationName: "perspectiveLeftReturn", 1285 | animationDuration: "1s", 1286 | }, 1287 | ".magic-perspectiveRight": { 1288 | animationName: "perspectiveRight", 1289 | animationDuration: "1s", 1290 | }, 1291 | ".magic-perspectiveRightReturn": { 1292 | animationName: "perspectiveRightReturn", 1293 | animationDuration: "1s", 1294 | }, 1295 | ".magic-perspectiveUp": { 1296 | animationName: "perspectiveUp", 1297 | animationDuration: "1s", 1298 | }, 1299 | ".magic-perspectiveUpReturn": { 1300 | animationName: "perspectiveUpReturn", 1301 | animationDuration: "1s", 1302 | }, 1303 | ".magic-rotateDownIn": { 1304 | animationName: "rotateDownIn", 1305 | animationDuration: "1s", 1306 | }, 1307 | ".magic-rotateDownOut": { 1308 | animationName: "rotateDownOut", 1309 | animationDuration: "1s", 1310 | }, 1311 | ".magic-rotateLeftIn": { 1312 | animationName: "rotateLeftIn", 1313 | animationDuration: "1s", 1314 | }, 1315 | ".magic-rotateLeftOut": { 1316 | animationName: "rotateLeftOut", 1317 | animationDuration: "1s", 1318 | }, 1319 | ".magic-rotateRightIn": { 1320 | animationName: "rotateRightIn", 1321 | animationDuration: "1s", 1322 | }, 1323 | ".magic-rotateRightOut": { 1324 | animationName: "rotateRightOut", 1325 | animationDuration: "1s", 1326 | }, 1327 | ".magic-rotateUpIn": { 1328 | animationName: "rotateUpIn", 1329 | animationDuration: "1s", 1330 | }, 1331 | ".magic-rotateUpOut": { 1332 | animationName: "rotateUpOut", 1333 | animationDuration: "1s", 1334 | }, 1335 | ".magic-slideDown": { 1336 | animationName: "slideDown", 1337 | animationDuration: "1s", 1338 | }, 1339 | ".magic-slideDownReturn": { 1340 | animationName: "slideDownReturn", 1341 | animationDuration: "1s", 1342 | }, 1343 | ".magic-slideLeft": { 1344 | animationName: "slideLeft", 1345 | animationDuration: "1s", 1346 | }, 1347 | ".magic-slideLeftReturn": { 1348 | animationName: "slideLeftReturn", 1349 | animationDuration: "1s", 1350 | }, 1351 | ".magic-slideRight": { 1352 | animationName: "slideRight", 1353 | animationDuration: "1s", 1354 | }, 1355 | ".magic-slideRightReturn": { 1356 | animationName: "slideRightReturn", 1357 | animationDuration: "1s", 1358 | }, 1359 | ".magic-slideUp": { 1360 | animationName: "slideUp", 1361 | animationDuration: "1s", 1362 | }, 1363 | ".magic-slideUpReturn": { 1364 | animationName: "slideUpReturn", 1365 | animationDuration: "1s", 1366 | }, 1367 | ".magic-foolishIn": { 1368 | animationName: "foolishIn", 1369 | animationDuration: "1s", 1370 | }, 1371 | ".magic-foolishOut": { 1372 | animationName: "foolishOut", 1373 | animationDuration: "1s", 1374 | }, 1375 | ".magic-holeIn": { 1376 | animationName: "holeIn", 1377 | animationDuration: "1s", 1378 | }, 1379 | ".magic-holeOut": { 1380 | animationName: "holeOut", 1381 | animationDuration: "1s", 1382 | }, 1383 | ".magic-swashIn": { 1384 | animationName: "swashIn", 1385 | animationDuration: "1s", 1386 | }, 1387 | ".magic-swashOut": { 1388 | animationName: "swashOut", 1389 | animationDuration: "1s", 1390 | }, 1391 | ".magic-tinDownIn": { 1392 | animationName: "tinDownIn", 1393 | animationDuration: "1s", 1394 | }, 1395 | ".magic-tinDownOut": { 1396 | animationName: "tinDownOut", 1397 | animationDuration: "1s", 1398 | }, 1399 | ".magic-tinLeftIn": { 1400 | animationName: "tinLeftIn", 1401 | animationDuration: "1s", 1402 | }, 1403 | ".magic-tinLeftOut": { 1404 | animationName: "tinLeftOut", 1405 | animationDuration: "1s", 1406 | }, 1407 | ".magic-tinRightIn": { 1408 | animationName: "tinRightIn", 1409 | animationDuration: "1s", 1410 | }, 1411 | ".magic-tinRightOut": { 1412 | animationName: "tinRightOut", 1413 | animationDuration: "1s", 1414 | }, 1415 | ".magic-tinUpIn": { 1416 | animationName: "tinUpIn", 1417 | animationDuration: "1s", 1418 | }, 1419 | ".magic-tinUpOut": { 1420 | animationName: "tinUpOut", 1421 | animationDuration: "1s", 1422 | }, 1423 | ".magic-bombLeftOut": { 1424 | animationName: "bombLeftOut", 1425 | animationDuration: "1s", 1426 | }, 1427 | ".magic-bombRightOut": { 1428 | animationName: "bombRightOut", 1429 | animationDuration: "1s", 1430 | }, 1431 | ".magic-boingInUp": { 1432 | animationName: "boingInUp", 1433 | animationDuration: "1s", 1434 | }, 1435 | ".magic-boingOutDown": { 1436 | animationName: "boingOutDown", 1437 | animationDuration: "1s", 1438 | }, 1439 | ".magic-spaceInDown": { 1440 | animationName: "spaceInDown", 1441 | animationDuration: "1s", 1442 | }, 1443 | ".magic-spaceInLeft": { 1444 | animationName: "spaceInLeft", 1445 | animationDuration: "1s", 1446 | }, 1447 | ".magic-spaceInRight": { 1448 | animationName: "spaceInRight", 1449 | animationDuration: "1s", 1450 | }, 1451 | ".magic-spaceInUp": { 1452 | animationName: "spaceInUp", 1453 | animationDuration: "1s", 1454 | }, 1455 | ".magic-spaceOutDown": { 1456 | animationName: "spaceOutDown", 1457 | animationDuration: "1s", 1458 | }, 1459 | ".magic-spaceOutLeft": { 1460 | animationName: "spaceOutLeft", 1461 | animationDuration: "1s", 1462 | }, 1463 | ".magic-spaceOutRight": { 1464 | animationName: "spaceOutRight", 1465 | animationDuration: "1s", 1466 | }, 1467 | ".magic-spaceOutUp": { 1468 | animationName: "spaceOutUp", 1469 | animationDuration: "1s", 1470 | }, 1471 | }; 1472 | addUtilities(fallbackKeyframes, { 1473 | respectImportant: false, 1474 | }); 1475 | addUtilities(fallbackUtilities, { 1476 | variants: ["hover"], 1477 | respectImportant: false, 1478 | }); 1479 | }); 1480 | 1481 | module.exports = magicAnimation; 1482 | //# sourceMappingURL=index.js.map 1483 | -------------------------------------------------------------------------------- /dist/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sources":["../node_modules/tailwindcss/src/util/createPlugin.js"],"sourcesContent":["function createPlugin(plugin, config) {\n return {\n handler: plugin,\n config,\n }\n}\n\ncreatePlugin.withOptions = function (pluginFunction, configFunction = () => ({})) {\n const optionsFunction = function (options) {\n return {\n __options: options,\n handler: pluginFunction(options),\n config: configFunction(options),\n }\n }\n\n optionsFunction.__isOptionsFunction = true\n\n // Expose plugin dependencies so that `object-hash` returns a different\n // value if anything here changes, to ensure a rebuild is triggered.\n optionsFunction.__pluginFunction = pluginFunction\n optionsFunction.__configFunction = configFunction\n\n return optionsFunction\n}\n\nexport default createPlugin\n"],"names":[],"mappings":";;AAAA,SAAS,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE;AACtC,EAAE,OAAO;AACT,IAAI,OAAO,EAAE,MAAM;AACnB,IAAI,MAAM;AACV,GAAG;AACH,CAAC;AACD;AACA,YAAY,CAAC,WAAW,GAAG,UAAU,cAAc,EAAE,cAAc,GAAG,OAAO,EAAE,CAAC,EAAE;AAClF,EAAE,MAAM,eAAe,GAAG,UAAU,OAAO,EAAE;AAC7C,IAAI,OAAO;AACX,MAAM,SAAS,EAAE,OAAO;AACxB,MAAM,OAAO,EAAE,cAAc,CAAC,OAAO,CAAC;AACtC,MAAM,MAAM,EAAE,cAAc,CAAC,OAAO,CAAC;AACrC,KAAK;AACL,IAAG;AACH;AACA,EAAE,eAAe,CAAC,mBAAmB,GAAG,KAAI;AAC5C;AACA;AACA;AACA,EAAE,eAAe,CAAC,gBAAgB,GAAG,eAAc;AACnD,EAAE,eAAe,CAAC,gBAAgB,GAAG,eAAc;AACnD;AACA,EAAE,OAAO,eAAe;AACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"} -------------------------------------------------------------------------------- /dist/magic/magic.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const magic: Animation; 3 | export default magic; 4 | -------------------------------------------------------------------------------- /dist/magic/swap.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const swap: Animation; 3 | export default swap; 4 | -------------------------------------------------------------------------------- /dist/magic/twisterInDown.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const twisterInUp: Animation; 3 | export default twisterInUp; 4 | -------------------------------------------------------------------------------- /dist/magic/twisterInUp.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const twisterInUp: Animation; 3 | export default twisterInUp; 4 | -------------------------------------------------------------------------------- /dist/math/foolishIn.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const foolishIn: Animation; 3 | export default foolishIn; 4 | -------------------------------------------------------------------------------- /dist/math/foolishOut.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const foolishOut: Animation; 3 | export default foolishOut; 4 | -------------------------------------------------------------------------------- /dist/math/holeIn.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const holeIn: Animation; 3 | export default holeIn; 4 | -------------------------------------------------------------------------------- /dist/math/holeOut.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const holeOut: Animation; 3 | export default holeOut; 4 | -------------------------------------------------------------------------------- /dist/math/swashIn.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const swashIn: Animation; 3 | export default swashIn; 4 | -------------------------------------------------------------------------------- /dist/math/swashOut.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const swashOut: Animation; 3 | export default swashOut; 4 | -------------------------------------------------------------------------------- /dist/perspective/perspectiveDown.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const perspectiveDown: Animation; 3 | export default perspectiveDown; 4 | -------------------------------------------------------------------------------- /dist/perspective/perspectiveDownReturn.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const perspectiveDownReturn: Animation; 3 | export default perspectiveDownReturn; 4 | -------------------------------------------------------------------------------- /dist/perspective/perspectiveLeft.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const perspectiveLeft: Animation; 3 | export default perspectiveLeft; 4 | -------------------------------------------------------------------------------- /dist/perspective/perspectiveLeftReturn.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const perspectiveLeftReturn: Animation; 3 | export default perspectiveLeftReturn; 4 | -------------------------------------------------------------------------------- /dist/perspective/perspectiveRight.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const perspectiveRight: Animation; 3 | export default perspectiveRight; 4 | -------------------------------------------------------------------------------- /dist/perspective/perspectiveRightReturn.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const perspectiveRightReturn: Animation; 3 | export default perspectiveRightReturn; 4 | -------------------------------------------------------------------------------- /dist/perspective/perspectiveUp.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const perspectiveUp: Animation; 3 | export default perspectiveUp; 4 | -------------------------------------------------------------------------------- /dist/perspective/perspectiveUpReturn.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const perspectiveUpReturn: Animation; 3 | export default perspectiveUpReturn; 4 | -------------------------------------------------------------------------------- /dist/rotate/rotateDownIn.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const rotateDownIn: Animation; 3 | export default rotateDownIn; 4 | -------------------------------------------------------------------------------- /dist/rotate/rotateDownOut.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const rotateDownOut: Animation; 3 | export default rotateDownOut; 4 | -------------------------------------------------------------------------------- /dist/rotate/rotateLeftIn.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const rotateLeftIn: Animation; 3 | export default rotateLeftIn; 4 | -------------------------------------------------------------------------------- /dist/rotate/rotateLeftOut.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const rotateLeftOut: Animation; 3 | export default rotateLeftOut; 4 | -------------------------------------------------------------------------------- /dist/rotate/rotateRightIn.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const rotateRightIn: Animation; 3 | export default rotateRightIn; 4 | -------------------------------------------------------------------------------- /dist/rotate/rotateRightOut.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const rotateRightOut: Animation; 3 | export default rotateRightOut; 4 | -------------------------------------------------------------------------------- /dist/rotate/rotateUpIn.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const rotateUpIn: Animation; 3 | export default rotateUpIn; 4 | -------------------------------------------------------------------------------- /dist/rotate/rotateUpOut.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const rotateUpOut: Animation; 3 | export default rotateUpOut; 4 | -------------------------------------------------------------------------------- /dist/slide/slideDown.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const slideDown: Animation; 3 | export default slideDown; 4 | -------------------------------------------------------------------------------- /dist/slide/slideDownReturn.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const slideDownReturn: Animation; 3 | export default slideDownReturn; 4 | -------------------------------------------------------------------------------- /dist/slide/slideLeft.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const slideLeft: Animation; 3 | export default slideLeft; 4 | -------------------------------------------------------------------------------- /dist/slide/slideLeftReturn.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const slideLeftReturn: Animation; 3 | export default slideLeftReturn; 4 | -------------------------------------------------------------------------------- /dist/slide/slideRight.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const slideRight: Animation; 3 | export default slideRight; 4 | -------------------------------------------------------------------------------- /dist/slide/slideRightReturn.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const slideRightReturn: Animation; 3 | export default slideRightReturn; 4 | -------------------------------------------------------------------------------- /dist/slide/slideUp.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const slideUp: Animation; 3 | export default slideUp; 4 | -------------------------------------------------------------------------------- /dist/slide/slideUpReturn.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const slideUpReturn: Animation; 3 | export default slideUpReturn; 4 | -------------------------------------------------------------------------------- /dist/space/spaceInDown.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const spaceInDown: Animation; 3 | export default spaceInDown; 4 | -------------------------------------------------------------------------------- /dist/space/spaceInLeft.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const spaceInLeft: Animation; 3 | export default spaceInLeft; 4 | -------------------------------------------------------------------------------- /dist/space/spaceInRight.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const spaceInRight: Animation; 3 | export default spaceInRight; 4 | -------------------------------------------------------------------------------- /dist/space/spaceInUp.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const spaceInUp: Animation; 3 | export default spaceInUp; 4 | -------------------------------------------------------------------------------- /dist/space/spaceOutDown.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const spaceOutDown: Animation; 3 | export default spaceOutDown; 4 | -------------------------------------------------------------------------------- /dist/space/spaceOutLeft.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const spaceOutLeft: Animation; 3 | export default spaceOutLeft; 4 | -------------------------------------------------------------------------------- /dist/space/spaceOutRight.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const spaceOutRight: Animation; 3 | export default spaceOutRight; 4 | -------------------------------------------------------------------------------- /dist/space/spaceOutUp.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const spaceOutUp: Animation; 3 | export default spaceOutUp; 4 | -------------------------------------------------------------------------------- /dist/staticEffects/openDownLeft.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const openDownLeft: Animation; 3 | export default openDownLeft; 4 | -------------------------------------------------------------------------------- /dist/staticEffects/openDownLeftReturn.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const openDownLeftReturn: Animation; 3 | export default openDownLeftReturn; 4 | -------------------------------------------------------------------------------- /dist/staticEffects/openDownRight.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const openDownRight: Animation; 3 | export default openDownRight; 4 | -------------------------------------------------------------------------------- /dist/staticEffects/openDownRightReturn.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const openDownRightReturn: Animation; 3 | export default openDownRightReturn; 4 | -------------------------------------------------------------------------------- /dist/staticEffects/openUpLeft.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const openUpLeft: Animation; 3 | export default openUpLeft; 4 | -------------------------------------------------------------------------------- /dist/staticEffects/openUpLeftReturn.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const openUpLeftReturn: Animation; 3 | export default openUpLeftReturn; 4 | -------------------------------------------------------------------------------- /dist/staticEffects/openUpRight.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const openUpRight: Animation; 3 | export default openUpRight; 4 | -------------------------------------------------------------------------------- /dist/staticEffects/openUpRightReturn.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const openUpRightReturn: Animation; 3 | export default openUpRightReturn; 4 | -------------------------------------------------------------------------------- /dist/staticEffectsOut/openDownLeftOut.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const openDownLeftOut: Animation; 3 | export default openDownLeftOut; 4 | -------------------------------------------------------------------------------- /dist/staticEffectsOut/openDownRightOut.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const openDownRightOut: Animation; 3 | export default openDownRightOut; 4 | -------------------------------------------------------------------------------- /dist/staticEffectsOut/openUpLeftOut.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const openUpLeftOut: Animation; 3 | export default openUpLeftOut; 4 | -------------------------------------------------------------------------------- /dist/staticEffectsOut/openUpRightOut.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const openUpRightOut: Animation; 3 | export default openUpRightOut; 4 | -------------------------------------------------------------------------------- /dist/tin/tinDownIn.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const tinDownIn: Animation; 3 | export default tinDownIn; 4 | -------------------------------------------------------------------------------- /dist/tin/tinDownOut.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const tinDownOut: Animation; 3 | export default tinDownOut; 4 | -------------------------------------------------------------------------------- /dist/tin/tinLeftIn.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const tinLeftIn: Animation; 3 | export default tinLeftIn; 4 | -------------------------------------------------------------------------------- /dist/tin/tinLeftOut.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const tinLeftOut: Animation; 3 | export default tinLeftOut; 4 | -------------------------------------------------------------------------------- /dist/tin/tinRightIn.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const tinRightIn: Animation; 3 | export default tinRightIn; 4 | -------------------------------------------------------------------------------- /dist/tin/tinRightOut.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const tinRightOut: Animation; 3 | export default tinRightOut; 4 | -------------------------------------------------------------------------------- /dist/tin/tinUpIn.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const tinUpIn: Animation; 3 | export default tinUpIn; 4 | -------------------------------------------------------------------------------- /dist/tin/tinUpOut.d.ts: -------------------------------------------------------------------------------- 1 | import type { Animation } from "../utils/types"; 2 | declare const tinUpOut: Animation; 3 | export default tinUpOut; 4 | -------------------------------------------------------------------------------- /dist/utils/config.d.ts: -------------------------------------------------------------------------------- 1 | export declare const expandArray: (arr: T[], append?: string, inKey?: boolean, transform?: (v: T) => T) => Record; 2 | export declare const duration: Record; 3 | export declare const delay: { 4 | [x: string]: string; 5 | }; 6 | export declare const repeat: Record; 7 | export declare const ease: { 8 | linear: string; 9 | in: string; 10 | out: string; 11 | "in-out": string; 12 | }; 13 | export declare const fill: Record; 14 | -------------------------------------------------------------------------------- /dist/utils/index.d.ts: -------------------------------------------------------------------------------- 1 | import type { CSSValue } from "./types"; 2 | /** 3 | * Composes a variable number of CSS helper functions. 4 | * Returns a function that accepts all the original arguments 5 | * of the functions it composed. If the original function 6 | * accepted multiple arguments, they must be passed as 7 | * an array. 8 | 9 | * @example 10 | * const translateXandRotateY = compose(translateX, rotateY); 11 | * const cssValue = translateXandRotateY('-5px', '30deg'); 12 | */ 13 | export declare const compose: (...funcs: Array) => (...styleArgs: Array>) => string; 14 | export declare const cubicBezier: (a: number, b: number, c: number, d: number) => string; 15 | export declare const translate3d: (a: CSSValue, b: CSSValue, c: CSSValue) => string; 16 | export declare const translateX: (a: CSSValue) => string; 17 | export declare const scale3d: (a: number, b: number, c: number) => string; 18 | export declare const scale: (a: number) => string; 19 | export declare const skewX: (deg: number) => string; 20 | export declare const skewY: (deg: number) => string; 21 | export declare const skewXY: (x: number, y: number) => string; 22 | export declare const rotateY: (a: CSSValue) => string; 23 | export declare const rotate3d: (a: number, b: number, c: number, d: number) => string; 24 | export declare const perspective: (a: CSSValue) => string; 25 | export declare const translateY: (a: CSSValue) => string; 26 | export declare const translateZ: (a: CSSValue) => string; 27 | export declare const translateXY: (a: CSSValue, b: CSSValue) => string; 28 | export declare const rotate: (a: CSSValue) => string; 29 | export declare const rotateX: (a: CSSValue) => string; 30 | export declare const blur: (a: CSSValue) => string; 31 | -------------------------------------------------------------------------------- /dist/utils/types.d.ts: -------------------------------------------------------------------------------- 1 | export declare type CSSValue = string | number; 2 | export declare type Keyframe = { 3 | [property: string]: CSSValue; 4 | }; 5 | export declare type Animation = { 6 | [keyframe: string]: Keyframe; 7 | }; 8 | -------------------------------------------------------------------------------- /example/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /example/next.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | reactStrictMode: true, 3 | } 4 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "private": true, 4 | "scripts": { 5 | "dev": "next dev", 6 | "build": "next build", 7 | "start": "next start", 8 | "lint": "next lint" 9 | }, 10 | "dependencies": { 11 | "next": "12.0.10", 12 | "react": "17.0.2", 13 | "react-dom": "17.0.2" 14 | }, 15 | "devDependencies": { 16 | "autoprefixer": "^10.4.2", 17 | "eslint": "8.9.0", 18 | "eslint-config-next": "12.0.10", 19 | "postcss": "^8.4.6", 20 | "tailwindcss": "^3.0.22" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /example/pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | 3 | function MyApp({ Component, pageProps }) { 4 | return 5 | } 6 | 7 | export default MyApp 8 | -------------------------------------------------------------------------------- /example/pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /example/pages/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | const root = { 4 | placeholder: { 5 | backgroundColor: "#eee", 6 | width: "100px", 7 | height: "100px", 8 | left: "12%", 9 | top: "200px", 10 | position: "fixed", 11 | borderRadius: "3px", 12 | fontFamily: 13 | '"SF Pro SC","HanHei SC","SF Pro Text","Myriad Set Pro","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif', 14 | }, 15 | magicAni: { 16 | backgroundColor: "#FF7374", 17 | width: "100%", 18 | height: "100%", 19 | position: "absolute", 20 | borderRadius: "3px", 21 | textAlign: "center", 22 | color: "#fff", 23 | }, 24 | cssOptions: { 25 | width: "50%", 26 | left: "35%", 27 | position: "absolute", 28 | fontFamily: 29 | '"SF Pro SC","HanHei SC","SF Pro Text","Myriad Set Pro","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif', 30 | color: "#52616A", 31 | // userSelect: 'none' 32 | }, 33 | title: { 34 | position: "relative", 35 | left: "10%", 36 | }, 37 | chunk: { 38 | padding: "1em 0 0 0", 39 | left: "10%", 40 | clear: "both", 41 | overflow: "hidden", 42 | }, 43 | h2: { 44 | // marginTop: '110px', 45 | marginBottom: "5px", 46 | fontWeight: 400, 47 | }, 48 | }; 49 | const styles = { 50 | btnDefault: { 51 | fontSize: 16, 52 | display: "block", 53 | float: "left", 54 | margin: "10px 10px 10px 0", 55 | padding: "12px 18px", 56 | background: "#fff", 57 | border: "2px solid #C9D6DE", 58 | color: "#52616A", 59 | borderRadius: "4px", 60 | cursor: "pointer", 61 | }, 62 | btnHover: {}, 63 | }; 64 | 65 | const PVaule = [ 66 | ["magic", "twisterInDown", "twisterInUp", "swap"], 67 | ["puffIn", "puffOut", "vanishIn", "vanishOut"], 68 | [ 69 | "openDownLeft", 70 | "openDownLeftReturn", 71 | "openDownRight", 72 | "openDownRightReturn", 73 | "openUpLeft", 74 | "openUpLeftReturn", 75 | "openUpRight", 76 | "openUpRightReturn", 77 | ], 78 | ["openDownLeftOut", "openDownRightOut", "openUpLeftOut", "openUpRightOut"], 79 | [ 80 | "perspectiveDown", 81 | "perspectiveDownReturn", 82 | "perspectiveLeft", 83 | "perspectiveLeftReturn", 84 | "perspectiveRight", 85 | "perspectiveRightReturn", 86 | "perspectiveUp", 87 | "perspectiveUpReturn", 88 | ], 89 | [ 90 | "rotateDownIn", 91 | "rotateDownOut", 92 | "rotateLeftIn", 93 | "rotateLeftOut", 94 | "rotateRightIn", 95 | "rotateRightOut", 96 | "rotateUpIn", 97 | "rotateUpOut", 98 | ], 99 | [ 100 | "slideDown", 101 | "slideDownReturn", 102 | "slideLeft", 103 | "slideLeftReturn", 104 | "slideRight", 105 | "slideRightReturn", 106 | "slideUp", 107 | "slideUpReturn", 108 | ], 109 | ["foolishIn", "foolishOut", "holeIn", "holeOut", "swashIn", "swashOut"], 110 | [ 111 | "tinDownIn", 112 | "tinDownOut", 113 | "tinLeftIn", 114 | "tinLeftOut", 115 | "tinRightIn", 116 | "tinRightOut", 117 | "tinUpIn", 118 | "tinUpOut", 119 | ], 120 | ["bombLeftOut", "bombRightOut"], 121 | ["boingInUp", "boingOutDown"], 122 | [ 123 | "spaceInDown", 124 | "spaceInLeft", 125 | "spaceInRight", 126 | "spaceInUp", 127 | "spaceOutDown", 128 | "spaceOutLeft", 129 | "spaceOutRight", 130 | "spaceOutUp", 131 | ], 132 | ]; 133 | class App extends Component { 134 | constructor(props, context) { 135 | super(props, context); 136 | this.state = { 137 | isPlaying: false, 138 | magicClass: null, 139 | }; 140 | this.handleBtnClick = this.handleBtnClick.bind(this); 141 | } 142 | handleBtnClick(e) { 143 | if (this.state.isPlaying) { 144 | return; 145 | } 146 | var cssName = e.target.innerText; 147 | this.setState({ 148 | isPlaying: true, 149 | magicClass: "magic-" + cssName, 150 | }); 151 | setTimeout(() => { 152 | this.setState({ 153 | isPlaying: false, 154 | magicClass: null, 155 | }); 156 | }, 1000); 157 | } 158 | render() { 159 | return ( 160 |
161 |
162 |
163 |

164 | React 165 |
166 | Magic 167 |

168 |
169 |
170 |
171 |

React-Magic

172 |
173 |

React-Magic Effects

174 | {PVaule[0].map((name) => { 175 | return ( 176 |

182 | {name} 183 |

184 | ); 185 | })} 186 |
187 |
188 |

React-Magic Bling

189 | {PVaule[1].map((name) => { 190 | return ( 191 |

197 | {name} 198 |

199 | ); 200 | })} 201 |
202 |
203 |

React-Magic Static Effects

204 | {PVaule[2].map((name) => { 205 | return ( 206 |

212 | {name} 213 |

214 | ); 215 | })} 216 |
217 |
218 |

React-Magic Static Effects Out

219 | {PVaule[3].map((name) => { 220 | return ( 221 |

227 | {name} 228 |

229 | ); 230 | })} 231 |
232 |
233 |

React-Magic Perspective

234 | {PVaule[4].map((name) => { 235 | return ( 236 |

242 | {name} 243 |

244 | ); 245 | })} 246 |
247 |
248 |

React-Magic Rotate

249 | {PVaule[5].map((name) => { 250 | return ( 251 |

257 | {name} 258 |

259 | ); 260 | })} 261 |
262 |
263 |

React-Magic Slide

264 | {PVaule[6].map((name) => { 265 | return ( 266 |

272 | {name} 273 |

274 | ); 275 | })} 276 |
277 |
278 |

React-Magic Math

279 | {PVaule[7].map((name) => { 280 | return ( 281 |

287 | {name} 288 |

289 | ); 290 | })} 291 |
292 |
293 |

React-Magic Tin

294 | {PVaule[8].map((name) => { 295 | return ( 296 |

302 | {name} 303 |

304 | ); 305 | })} 306 |
307 |
308 |

React-Magic Bomb

309 | {PVaule[9].map((name) => { 310 | return ( 311 |

317 | {name} 318 |

319 | ); 320 | })} 321 |
322 |
323 |

React-Magic Boing

324 | {PVaule[10].map((name) => { 325 | return ( 326 |

332 | {name} 333 |

334 | ); 335 | })} 336 |
337 |
338 |

React-Magic Space

339 | {PVaule[11].map((name) => { 340 | return ( 341 |

347 | {name} 348 |

349 | ); 350 | })} 351 |
352 |
353 | 387 |
388 | ); 389 | } 390 | } 391 | 392 | export default App; 393 | -------------------------------------------------------------------------------- /example/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sylvenas/tailwindcss-magic/89cdd8eb602335d5cc069eb29ebfa4770597f3bb/example/public/favicon.ico -------------------------------------------------------------------------------- /example/public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /example/styles/Home.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | padding: 0 2rem; 3 | } 4 | 5 | .main { 6 | min-height: 100vh; 7 | padding: 4rem 0; 8 | flex: 1; 9 | display: flex; 10 | flex-direction: column; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | 15 | .footer { 16 | display: flex; 17 | flex: 1; 18 | padding: 2rem 0; 19 | border-top: 1px solid #eaeaea; 20 | justify-content: center; 21 | align-items: center; 22 | } 23 | 24 | .footer a { 25 | display: flex; 26 | justify-content: center; 27 | align-items: center; 28 | flex-grow: 1; 29 | } 30 | 31 | .title a { 32 | color: #0070f3; 33 | text-decoration: none; 34 | } 35 | 36 | .title a:hover, 37 | .title a:focus, 38 | .title a:active { 39 | text-decoration: underline; 40 | } 41 | 42 | .title { 43 | margin: 0; 44 | line-height: 1.15; 45 | font-size: 4rem; 46 | } 47 | 48 | .title, 49 | .description { 50 | text-align: center; 51 | } 52 | 53 | .description { 54 | margin: 4rem 0; 55 | line-height: 1.5; 56 | font-size: 1.5rem; 57 | } 58 | 59 | .code { 60 | background: #fafafa; 61 | border-radius: 5px; 62 | padding: 0.75rem; 63 | font-size: 1.1rem; 64 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, 65 | Bitstream Vera Sans Mono, Courier New, monospace; 66 | } 67 | 68 | .grid { 69 | display: flex; 70 | align-items: center; 71 | justify-content: center; 72 | flex-wrap: wrap; 73 | max-width: 800px; 74 | } 75 | 76 | .card { 77 | margin: 1rem; 78 | padding: 1.5rem; 79 | text-align: left; 80 | color: inherit; 81 | text-decoration: none; 82 | border: 1px solid #eaeaea; 83 | border-radius: 10px; 84 | transition: color 0.15s ease, border-color 0.15s ease; 85 | max-width: 300px; 86 | } 87 | 88 | .card:hover, 89 | .card:focus, 90 | .card:active { 91 | color: #0070f3; 92 | border-color: #0070f3; 93 | } 94 | 95 | .card h2 { 96 | margin: 0 0 1rem 0; 97 | font-size: 1.5rem; 98 | } 99 | 100 | .card p { 101 | margin: 0; 102 | font-size: 1.25rem; 103 | line-height: 1.5; 104 | } 105 | 106 | .logo { 107 | height: 1em; 108 | margin-left: 0.5rem; 109 | } 110 | 111 | @media (max-width: 600px) { 112 | .grid { 113 | width: 100%; 114 | flex-direction: column; 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /example/styles/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | html, 6 | body { 7 | padding: 0; 8 | margin: 0; 9 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 10 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 11 | } 12 | 13 | a { 14 | color: inherit; 15 | text-decoration: none; 16 | } 17 | 18 | * { 19 | box-sizing: border-box; 20 | } 21 | 22 | .btnHover:hover { 23 | background: #52616a !important; 24 | color: #fff !important; 25 | } 26 | -------------------------------------------------------------------------------- /example/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: [ 3 | "./pages/**/*.{js,ts,jsx,tsx}", 4 | "./components/**/*.{js,ts,jsx,tsx}", 5 | ], 6 | theme: { 7 | extend: {}, 8 | }, 9 | plugins: [require("../dist/index.js")], 10 | }; 11 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | roots: [ 3 | "/test" 4 | ], 5 | testRegex: 'test/(.+)\\.test\\.(js?|ts?)$', 6 | transform: { 7 | "^.+\\.ts?$": "ts-jest" 8 | }, 9 | moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], 10 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwindcss-magic", 3 | "version": "0.2.0", 4 | "description": "A set of magical animation libraries for tailwindcss, accessed using the tailwindcss plugin.", 5 | "main": "dist/index.js", 6 | "files": [ 7 | "dist" 8 | ], 9 | "scripts": { 10 | "test": "jest --coverage", 11 | "build": "npx rollup -c" 12 | }, 13 | "directories": { 14 | "test": "test" 15 | }, 16 | "devDependencies": { 17 | "@types/jest": "^26.0.16", 18 | "jest": "^26.6.3", 19 | "rollup": "^2.34.2", 20 | "rollup-plugin-terser": "^7.0.2", 21 | "rollup-plugin-typescript2": "^0.29.0", 22 | "ts-jest": "^26.4.4" 23 | }, 24 | "dependencies": { 25 | "typescript": "^4.1.2" 26 | }, 27 | "peerDependencies": { 28 | "tailwindcss": "^3.0.22" 29 | }, 30 | "keywords": [ 31 | "magic", 32 | "tailwindcss", 33 | "animation", 34 | "plugin" 35 | ], 36 | "repository": { 37 | "type": "git", 38 | "url": "https://github.com/Sylvenas/tailwindcss-magic" 39 | }, 40 | "author": "sylvenas@outlook.com", 41 | "license": "MIT" 42 | } 43 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from "rollup-plugin-typescript2"; 2 | import pkg from "./package.json"; 3 | 4 | const extensions = [".ts"]; 5 | const input = "src/index.ts"; 6 | 7 | const plugins = [ 8 | typescript({ 9 | typescript: require("typescript"), 10 | }), 11 | ]; 12 | 13 | export default [ 14 | // { 15 | // input, 16 | // output: { 17 | // file: pkg.module, 18 | // format: "esm", 19 | // sourcemap: true, 20 | // }, 21 | // plugins, 22 | // }, 23 | { 24 | input, 25 | output: { 26 | file: pkg.main, 27 | format: "cjs", 28 | sourcemap: true, 29 | exports: "default", 30 | }, 31 | plugins, 32 | }, 33 | ]; 34 | -------------------------------------------------------------------------------- /src/bling/puffIn.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, blur } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const puffIn: Animation = { 5 | "0%": { 6 | opacity: 0, 7 | transformOrigin: "50% 50%", 8 | transform: scale(2), 9 | filter: blur("2px"), 10 | }, 11 | "100%": { 12 | opacity: 1, 13 | transformOrigin: "50% 50%", 14 | transform: scale(1), 15 | filter: blur("0px"), 16 | }, 17 | }; 18 | 19 | export default puffIn; 20 | -------------------------------------------------------------------------------- /src/bling/puffOut.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, blur } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const puffOut: Animation = { 5 | "0%": { 6 | opacity: 1, 7 | transformOrigin: "50% 50%", 8 | transform: scale(1), 9 | filter: blur("0px"), 10 | }, 11 | "100%": { 12 | opacity: 0, 13 | transformOrigin: "50% 50%", 14 | transform: scale(2), 15 | filter: blur("2px"), 16 | }, 17 | }; 18 | 19 | export default puffOut; 20 | -------------------------------------------------------------------------------- /src/bling/vanishIn.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, blur } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const vanishIn: Animation = { 5 | "0%": { 6 | opacity: 0, 7 | transformOrigin: "50% 50%", 8 | transform: scale(2), 9 | filter: blur("90px"), 10 | }, 11 | "100%": { 12 | opacity: 1, 13 | transformOrigin: "50% 50%", 14 | transform: scale(1), 15 | filter: blur("0px"), 16 | }, 17 | }; 18 | 19 | export default vanishIn; 20 | -------------------------------------------------------------------------------- /src/bling/vanishOut.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, blur } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const vanishOut: Animation = { 5 | "0%": { 6 | opacity: 1, 7 | transformOrigin: "50% 50%", 8 | transform: scale(1), 9 | filter: blur("0px"), 10 | }, 11 | "100%": { 12 | opacity: 0, 13 | transformOrigin: "50% 50%", 14 | transform: scale(2), 15 | filter: blur("20px"), 16 | }, 17 | }; 18 | 19 | export default vanishOut; 20 | -------------------------------------------------------------------------------- /src/boing/boingInUp.ts: -------------------------------------------------------------------------------- 1 | import { compose, perspective, rotateX } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const perspectiveRotateX = compose(perspective, rotateX); 5 | 6 | const boingInUp: Animation = { 7 | "0%": { 8 | opacity: 0, 9 | transformOrigin: "50% 0%", 10 | transform: perspectiveRotateX(["800px"], [-90]), 11 | }, 12 | "50%": { 13 | opacity: 1, 14 | transformOrigin: "50% 0%", 15 | transform: perspectiveRotateX(["800px"], [50]), 16 | }, 17 | "100%": { 18 | opacity: 1, 19 | transformOrigin: "50% 0%", 20 | transform: perspectiveRotateX(["800px"], [0]), 21 | }, 22 | }; 23 | 24 | export default boingInUp; 25 | -------------------------------------------------------------------------------- /src/boing/boingOutDown.ts: -------------------------------------------------------------------------------- 1 | import { compose, perspective, rotateX, rotateY } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const perspectiveRotateXRotateY = compose(perspective, rotateX, rotateY); 5 | 6 | const boingOutDown: Animation = { 7 | "0%": { 8 | opacity: 1, 9 | transformOrigin: "100% 100%", 10 | transform: perspectiveRotateXRotateY(["800px"], [0], [0]), 11 | }, 12 | "20%": { 13 | opacity: 1, 14 | transformOrigin: "100% 100%", 15 | transform: perspectiveRotateXRotateY(["800px"], [0], [10]), 16 | }, 17 | "30%": { 18 | opacity: 1, 19 | transformOrigin: "0% 100%", 20 | transform: perspectiveRotateXRotateY(["800px"], [0], [0]), 21 | }, 22 | "40%": { 23 | opacity: 1, 24 | transformOrigin: "0% 100%", 25 | transform: perspectiveRotateXRotateY(["800px"], [10], [10]), 26 | }, 27 | "100%": { 28 | opacity: 0, 29 | transformOrigin: "100% 100%", 30 | transform: perspectiveRotateXRotateY(["800px"], [90], [0]), 31 | }, 32 | }; 33 | 34 | export default boingOutDown; 35 | -------------------------------------------------------------------------------- /src/bomb/bombLeftOut.ts: -------------------------------------------------------------------------------- 1 | import { compose, rotate, blur } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const bombLeftOut: Animation = { 5 | "0%": { 6 | opacity: 1, 7 | transformOrigin: "50% 50%", 8 | transform: rotate(0), 9 | filter: blur("0px"), 10 | }, 11 | "50%": { 12 | opacity: 1, 13 | transformOrigin: "-100% 50%", 14 | transform: rotate(-160), 15 | filter: blur("0px"), 16 | }, 17 | "100%": { 18 | opacity: 0, 19 | transformOrigin: "-100% 50%", 20 | transform: rotate(-160), 21 | filter: blur("20px"), 22 | }, 23 | }; 24 | 25 | export default bombLeftOut; 26 | -------------------------------------------------------------------------------- /src/bomb/bombRightOut.ts: -------------------------------------------------------------------------------- 1 | import { compose, rotate, blur } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const bombRightOut: Animation = { 5 | "0%": { 6 | opacity: 1, 7 | transformOrigin: "50% 50%", 8 | transform: rotate(0), 9 | filter: blur("0px"), 10 | }, 11 | "50%": { 12 | opacity: 1, 13 | transformOrigin: "200% 50%", 14 | transform: rotate(160), 15 | filter: blur("0px"), 16 | }, 17 | "100%": { 18 | opacity: 0, 19 | transformOrigin: "200% 50%", 20 | transform: rotate(160), 21 | filter: blur("20px"), 22 | }, 23 | }; 24 | 25 | export default bombRightOut; 26 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import plugin from "tailwindcss/src/public/create-plugin"; 2 | 3 | import { duration, delay, repeat, ease, fill } from "./utils/config"; 4 | 5 | import magic from "./magic/magic"; 6 | import swap from "./magic/swap"; 7 | import twisterInUp from "./magic/twisterInUp"; 8 | import twisterInDown from "./magic/twisterInDown"; 9 | 10 | import puffIn from "./bling/puffIn"; 11 | import puffOut from "./bling/puffOut"; 12 | import vanishIn from "./bling/vanishIn"; 13 | import vanishOut from "./bling/vanishOut"; 14 | 15 | import openDownLeft from "./staticEffects/openDownLeft"; 16 | import openDownLeftReturn from "./staticEffects/openDownLeftReturn"; 17 | import openDownRight from "./staticEffects/openDownRight"; 18 | import openDownRightReturn from "./staticEffects/openDownRightReturn"; 19 | import openUpLeft from "./staticEffects/openUpLeft"; 20 | import openUpLeftReturn from "./staticEffects/openUpLeftReturn"; 21 | import openUpRight from "./staticEffects/openUpRight"; 22 | import openUpRightReturn from "./staticEffects/openUpRightReturn"; 23 | 24 | import openDownLeftOut from "./staticEffectsOut/openDownLeftOut"; 25 | import openDownRightOut from "./staticEffectsOut/openDownRightOut"; 26 | import openUpLeftOut from "./staticEffectsOut/openUpLeftOut"; 27 | import openUpRightOut from "./staticEffectsOut/openUpRightOut"; 28 | 29 | import perspectiveDown from "./perspective/perspectiveDown"; 30 | import perspectiveDownReturn from "./perspective/perspectiveDownReturn"; 31 | import perspectiveLeft from "./perspective/perspectiveLeft"; 32 | import perspectiveLeftReturn from "./perspective/perspectiveLeftReturn"; 33 | import perspectiveRight from "./perspective/perspectiveRight"; 34 | import perspectiveRightReturn from "./perspective/perspectiveRightReturn"; 35 | import perspectiveUp from "./perspective/perspectiveUp"; 36 | import perspectiveUpReturn from "./perspective/perspectiveUpReturn"; 37 | 38 | import rotateDownIn from "./rotate/rotateDownIn"; 39 | import rotateDownOut from "./rotate/rotateDownOut"; 40 | import rotateLeftIn from "./rotate/rotateLeftIn"; 41 | import rotateLeftOut from "./rotate/rotateLeftOut"; 42 | import rotateRightIn from "./rotate/rotateRightIn"; 43 | import rotateRightOut from "./rotate/rotateRightOut"; 44 | import rotateUpIn from "./rotate/rotateUpIn"; 45 | import rotateUpOut from "./rotate/rotateUpOut"; 46 | 47 | import slideDown from "./slide/slideDown"; 48 | import slideDownReturn from "./slide/slideDownReturn"; 49 | import slideLeft from "./slide/slideLeft"; 50 | import slideLeftReturn from "./slide/slideLeftReturn"; 51 | import slideRight from "./slide/slideRight"; 52 | import slideRightReturn from "./slide/slideRightReturn"; 53 | import slideUp from "./slide/slideUp"; 54 | import slideUpReturn from "./slide/slideUpReturn"; 55 | 56 | import foolishIn from "./math/foolishIn"; 57 | import foolishOut from "./math/foolishOut"; 58 | import holeIn from "./math/holeIn"; 59 | import holeOut from "./math/holeOut"; 60 | import swashIn from "./math/swashIn"; 61 | import swashOut from "./math/swashOut"; 62 | 63 | import tinDownIn from "./tin/tinDownIn"; 64 | import tinDownOut from "./tin/tinDownOut"; 65 | import tinLeftIn from "./tin/tinLeftIn"; 66 | import tinLeftOut from "./tin/tinLeftOut"; 67 | import tinRightIn from "./tin/tinRightIn"; 68 | import tinRightOut from "./tin/tinRightOut"; 69 | import tinUpIn from "./tin/tinUpIn"; 70 | import tinUpOut from "./tin/tinUpOut"; 71 | 72 | import bombLeftOut from "./bomb/bombLeftOut"; 73 | import bombRightOut from "./bomb/bombRightOut"; 74 | 75 | import boingInUp from "./boing/boingInUp"; 76 | import boingOutDown from "./boing/boingOutDown"; 77 | 78 | import spaceInDown from "./space/spaceInDown"; 79 | import spaceInLeft from "./space/spaceInLeft"; 80 | import spaceInRight from "./space/spaceInRight"; 81 | import spaceInUp from "./space/spaceInUp"; 82 | import spaceOutDown from "./space/spaceOutDown"; 83 | import spaceOutLeft from "./space/spaceOutLeft"; 84 | import spaceOutRight from "./space/spaceOutRight"; 85 | import spaceOutUp from "./space/spaceOutUp"; 86 | 87 | const magicAnimation = plugin(function ({ 88 | addUtilities, 89 | matchUtilities, 90 | theme, 91 | }) { 92 | const fallbackKeyframes = { 93 | "@keyframes magic": magic, 94 | "@keyframes swap": swap, 95 | "@keyframes twisterInUp": twisterInUp, 96 | "@keyframes twisterInDown": twisterInDown, 97 | 98 | "@keyframes puffIn": puffIn, 99 | "@keyframes puffOut": puffOut, 100 | "@keyframes vanishIn": vanishIn, 101 | "@keyframes vanishOut": vanishOut, 102 | 103 | "@keyframes openDownLeft": openDownLeft, 104 | "@keyframes openDownLeftReturn": openDownLeftReturn, 105 | "@keyframes openDownRight": openDownRight, 106 | "@keyframes openDownRightReturn": openDownRightReturn, 107 | "@keyframes openUpLeft": openUpLeft, 108 | "@keyframes openUpLeftReturn": openUpLeftReturn, 109 | "@keyframes openUpRight": openUpRight, 110 | "@keyframes openUpRightReturn": openUpRightReturn, 111 | 112 | "@keyframes openDownLeftOut": openDownLeftOut, 113 | "@keyframes openDownRightOut": openDownRightOut, 114 | "@keyframes openUpLeftOut": openUpLeftOut, 115 | "@keyframes openUpRightOut": openUpRightOut, 116 | 117 | "@keyframes perspectiveDown": perspectiveDown, 118 | "@keyframes perspectiveDownReturn": perspectiveDownReturn, 119 | "@keyframes perspectiveLeft": perspectiveLeft, 120 | "@keyframes perspectiveLeftReturn": perspectiveLeftReturn, 121 | "@keyframes perspectiveRight": perspectiveRight, 122 | "@keyframes perspectiveRightReturn": perspectiveRightReturn, 123 | "@keyframes perspectiveUp": perspectiveUp, 124 | "@keyframes perspectiveUpReturn": perspectiveUpReturn, 125 | 126 | "@keyframes rotateDownIn": rotateDownIn, 127 | "@keyframes rotateDownOut": rotateDownOut, 128 | "@keyframes rotateLeftIn": rotateLeftIn, 129 | "@keyframes rotateLeftOut": rotateLeftOut, 130 | "@keyframes rotateRightIn": rotateRightIn, 131 | "@keyframes rotateRightOut": rotateRightOut, 132 | "@keyframes rotateUpIn": rotateUpIn, 133 | "@keyframes rotateUpOut": rotateUpOut, 134 | 135 | "@keyframes slideDown": slideDown, 136 | "@keyframes slideDownReturn": slideDownReturn, 137 | "@keyframes slideLeft": slideLeft, 138 | "@keyframes slideLeftReturn": slideLeftReturn, 139 | "@keyframes slideRight": slideRight, 140 | "@keyframes slideRightReturn": slideRightReturn, 141 | "@keyframes slideUp": slideUp, 142 | "@keyframes slideUpReturn": slideUpReturn, 143 | 144 | "@keyframes foolishIn": foolishIn, 145 | "@keyframes foolishOut": foolishOut, 146 | "@keyframes holeIn": holeIn, 147 | "@keyframes holeOut": holeOut, 148 | "@keyframes swashIn": swashIn, 149 | "@keyframes swashOut": swashOut, 150 | 151 | "@keyframes tinDownIn": tinDownIn, 152 | "@keyframes tinDownOut": tinDownOut, 153 | "@keyframes tinLeftIn": tinLeftIn, 154 | "@keyframes tinLeftOut": tinLeftOut, 155 | "@keyframes tinRightIn": tinRightIn, 156 | "@keyframes tinRightOut": tinRightOut, 157 | "@keyframes tinUpIn": tinUpIn, 158 | "@keyframes tinUpOut": tinUpOut, 159 | 160 | "@keyframes bombLeftOut": bombLeftOut, 161 | "@keyframes bombRightOut": bombRightOut, 162 | 163 | "@keyframes boingInUp": boingInUp, 164 | "@keyframes boingOutDown": boingOutDown, 165 | 166 | "@keyframes spaceInDown": spaceInDown, 167 | "@keyframes spaceInLeft": spaceInLeft, 168 | "@keyframes spaceInRight": spaceInRight, 169 | "@keyframes spaceInUp": spaceInUp, 170 | "@keyframes spaceOutDown": spaceOutDown, 171 | "@keyframes spaceOutLeft": spaceOutLeft, 172 | "@keyframes spaceOutRight": spaceOutRight, 173 | "@keyframes spaceOutUp": spaceOutUp, 174 | }; 175 | 176 | const fallbackUtilities = { 177 | ".magic-magic": { 178 | animationName: "magic", 179 | animationDuration: "1s", 180 | }, 181 | ".magic-swap": { 182 | animationName: "swap", 183 | animationDuration: "1s", 184 | }, 185 | ".magic-twisterInUp": { 186 | animationName: "twisterInUp", 187 | animationDuration: "1s", 188 | }, 189 | ".magic-twisterInDown": { 190 | animationName: "twisterInDown", 191 | animationDuration: "1s", 192 | }, 193 | 194 | ".magic-puffIn": { 195 | animationName: "puffIn", 196 | animationDuration: "1s", 197 | }, 198 | ".magic-puffOut": { 199 | animationName: "puffOut", 200 | animationDuration: "1s", 201 | }, 202 | ".magic-vanishIn": { 203 | animationName: "vanishIn", 204 | animationDuration: "1s", 205 | }, 206 | ".magic-vanishOut": { 207 | animationName: "vanishOut", 208 | animationDuration: "1s", 209 | }, 210 | 211 | ".magic-openDownLeft": { 212 | animationName: "openDownLeft", 213 | animationDuration: "1s", 214 | }, 215 | ".magic-openDownLeftReturn": { 216 | animationName: "openDownLeftReturn", 217 | animationDuration: "1s", 218 | }, 219 | ".magic-openDownRight": { 220 | animationName: "openDownRight", 221 | animationDuration: "1s", 222 | }, 223 | ".magic-openDownRightReturn": { 224 | animationName: "openDownRightReturn", 225 | animationDuration: "1s", 226 | }, 227 | ".magic-openUpLeft": { 228 | animationName: "openUpLeft", 229 | animationDuration: "1s", 230 | }, 231 | ".magic-openUpLeftReturn": { 232 | animationName: "openUpLeftReturn", 233 | animationDuration: "1s", 234 | }, 235 | ".magic-openUpRight": { 236 | animationName: "openUpRight", 237 | animationDuration: "1s", 238 | }, 239 | ".magic-openUpRightReturn": { 240 | animationName: "openUpRightReturn", 241 | animationDuration: "1s", 242 | }, 243 | 244 | ".magic-openDownLeftOut": { 245 | animationName: "openDownLeftOut", 246 | animationDuration: "1s", 247 | }, 248 | ".magic-openDownRightOut": { 249 | animationName: "openDownRightOut", 250 | animationDuration: "1s", 251 | }, 252 | ".magic-openUpLeftOut": { 253 | animationName: "openUpLeftOut", 254 | animationDuration: "1s", 255 | }, 256 | ".magic-openUpRightOut": { 257 | animationName: "openUpRightOut", 258 | animationDuration: "1s", 259 | }, 260 | 261 | ".magic-perspectiveDown": { 262 | animationName: "perspectiveDown", 263 | animationDuration: "1s", 264 | }, 265 | ".magic-perspectiveDownReturn": { 266 | animationName: "perspectiveDownReturn", 267 | animationDuration: "1s", 268 | }, 269 | ".magic-perspectiveLeft": { 270 | animationName: "perspectiveLeft", 271 | animationDuration: "1s", 272 | }, 273 | ".magic-perspectiveLeftReturn": { 274 | animationName: "perspectiveLeftReturn", 275 | animationDuration: "1s", 276 | }, 277 | ".magic-perspectiveRight": { 278 | animationName: "perspectiveRight", 279 | animationDuration: "1s", 280 | }, 281 | ".magic-perspectiveRightReturn": { 282 | animationName: "perspectiveRightReturn", 283 | animationDuration: "1s", 284 | }, 285 | ".magic-perspectiveUp": { 286 | animationName: "perspectiveUp", 287 | animationDuration: "1s", 288 | }, 289 | ".magic-perspectiveUpReturn": { 290 | animationName: "perspectiveUpReturn", 291 | animationDuration: "1s", 292 | }, 293 | 294 | ".magic-rotateDownIn": { 295 | animationName: "rotateDownIn", 296 | animationDuration: "1s", 297 | }, 298 | ".magic-rotateDownOut": { 299 | animationName: "rotateDownOut", 300 | animationDuration: "1s", 301 | }, 302 | ".magic-rotateLeftIn": { 303 | animationName: "rotateLeftIn", 304 | animationDuration: "1s", 305 | }, 306 | ".magic-rotateLeftOut": { 307 | animationName: "rotateLeftOut", 308 | animationDuration: "1s", 309 | }, 310 | ".magic-rotateRightIn": { 311 | animationName: "rotateRightIn", 312 | animationDuration: "1s", 313 | }, 314 | ".magic-rotateRightOut": { 315 | animationName: "rotateRightOut", 316 | animationDuration: "1s", 317 | }, 318 | ".magic-rotateUpIn": { 319 | animationName: "rotateUpIn", 320 | animationDuration: "1s", 321 | }, 322 | ".magic-rotateUpOut": { 323 | animationName: "rotateUpOut", 324 | animationDuration: "1s", 325 | }, 326 | 327 | ".magic-slideDown": { 328 | animationName: "slideDown", 329 | animationDuration: "1s", 330 | }, 331 | ".magic-slideDownReturn": { 332 | animationName: "slideDownReturn", 333 | animationDuration: "1s", 334 | }, 335 | ".magic-slideLeft": { 336 | animationName: "slideLeft", 337 | animationDuration: "1s", 338 | }, 339 | ".magic-slideLeftReturn": { 340 | animationName: "slideLeftReturn", 341 | animationDuration: "1s", 342 | }, 343 | ".magic-slideRight": { 344 | animationName: "slideRight", 345 | animationDuration: "1s", 346 | }, 347 | ".magic-slideRightReturn": { 348 | animationName: "slideRightReturn", 349 | animationDuration: "1s", 350 | }, 351 | ".magic-slideUp": { 352 | animationName: "slideUp", 353 | animationDuration: "1s", 354 | }, 355 | ".magic-slideUpReturn": { 356 | animationName: "slideUpReturn", 357 | animationDuration: "1s", 358 | }, 359 | 360 | ".magic-foolishIn": { 361 | animationName: "foolishIn", 362 | animationDuration: "1s", 363 | }, 364 | ".magic-foolishOut": { 365 | animationName: "foolishOut", 366 | animationDuration: "1s", 367 | }, 368 | ".magic-holeIn": { 369 | animationName: "holeIn", 370 | animationDuration: "1s", 371 | }, 372 | ".magic-holeOut": { 373 | animationName: "holeOut", 374 | animationDuration: "1s", 375 | }, 376 | ".magic-swashIn": { 377 | animationName: "swashIn", 378 | animationDuration: "1s", 379 | }, 380 | ".magic-swashOut": { 381 | animationName: "swashOut", 382 | animationDuration: "1s", 383 | }, 384 | 385 | ".magic-tinDownIn": { 386 | animationName: "tinDownIn", 387 | animationDuration: "1s", 388 | }, 389 | ".magic-tinDownOut": { 390 | animationName: "tinDownOut", 391 | animationDuration: "1s", 392 | }, 393 | ".magic-tinLeftIn": { 394 | animationName: "tinLeftIn", 395 | animationDuration: "1s", 396 | }, 397 | ".magic-tinLeftOut": { 398 | animationName: "tinLeftOut", 399 | animationDuration: "1s", 400 | }, 401 | ".magic-tinRightIn": { 402 | animationName: "tinRightIn", 403 | animationDuration: "1s", 404 | }, 405 | ".magic-tinRightOut": { 406 | animationName: "tinRightOut", 407 | animationDuration: "1s", 408 | }, 409 | ".magic-tinUpIn": { 410 | animationName: "tinUpIn", 411 | animationDuration: "1s", 412 | }, 413 | ".magic-tinUpOut": { 414 | animationName: "tinUpOut", 415 | animationDuration: "1s", 416 | }, 417 | 418 | ".magic-bombLeftOut": { 419 | animationName: "bombLeftOut", 420 | animationDuration: "1s", 421 | }, 422 | ".magic-bombRightOut": { 423 | animationName: "bombRightOut", 424 | animationDuration: "1s", 425 | }, 426 | 427 | ".magic-boingInUp": { 428 | animationName: "boingInUp", 429 | animationDuration: "1s", 430 | }, 431 | ".magic-boingOutDown": { 432 | animationName: "boingOutDown", 433 | animationDuration: "1s", 434 | }, 435 | 436 | ".magic-spaceInDown": { 437 | animationName: "spaceInDown", 438 | animationDuration: "1s", 439 | }, 440 | ".magic-spaceInLeft": { 441 | animationName: "spaceInLeft", 442 | animationDuration: "1s", 443 | }, 444 | ".magic-spaceInRight": { 445 | animationName: "spaceInRight", 446 | animationDuration: "1s", 447 | }, 448 | ".magic-spaceInUp": { 449 | animationName: "spaceInUp", 450 | animationDuration: "1s", 451 | }, 452 | ".magic-spaceOutDown": { 453 | animationName: "spaceOutDown", 454 | animationDuration: "1s", 455 | }, 456 | ".magic-spaceOutLeft": { 457 | animationName: "spaceOutLeft", 458 | animationDuration: "1s", 459 | }, 460 | ".magic-spaceOutRight": { 461 | animationName: "spaceOutRight", 462 | animationDuration: "1s", 463 | }, 464 | ".magic-spaceOutUp": { 465 | animationName: "spaceOutUp", 466 | animationDuration: "1s", 467 | }, 468 | }; 469 | 470 | addUtilities(fallbackKeyframes, { 471 | respectImportant: false, 472 | }); 473 | 474 | addUtilities(fallbackUtilities, { 475 | variants: ["hover"], 476 | respectImportant: false, 477 | }); 478 | }); 479 | 480 | export default magicAnimation; 481 | -------------------------------------------------------------------------------- /src/magic/magic.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, rotate } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const scaleAndRotate = compose(scale, rotate); 5 | 6 | const magic: Animation = { 7 | "0%": { 8 | opacity: 0, 9 | transformOrigin: "200% 500%", 10 | transform: scaleAndRotate([0], [270]), 11 | }, 12 | "100%": { 13 | opacity: 1, 14 | transformOrigin: "100% 200%", 15 | transform: scaleAndRotate([1], [0]), 16 | }, 17 | }; 18 | 19 | export default magic; 20 | -------------------------------------------------------------------------------- /src/magic/swap.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, translateXY } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const scaleAndtranslateXY = compose(scale, translateXY); 5 | 6 | const swap: Animation = { 7 | "0%": { 8 | opacity: 0, 9 | transformOrigin: "0 100%", 10 | transform: scaleAndtranslateXY([0], ["-700px", "0px"]), 11 | }, 12 | "100%": { 13 | opacity: 1, 14 | transformOrigin: "100% 100%", 15 | transform: scaleAndtranslateXY([1], ["0px", "0px"]), 16 | }, 17 | }; 18 | 19 | export default swap; 20 | -------------------------------------------------------------------------------- /src/magic/twisterInDown.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, rotate, translateY } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const scaleRotateTranslateY = compose(scale, rotate, translateY); 5 | 6 | const twisterInUp: Animation = { 7 | "0%": { 8 | opacity: 0, 9 | transformOrigin: "0 100%", 10 | transform: scaleRotateTranslateY([0], [360], ["-100%"]), 11 | }, 12 | "30%": { 13 | transformOrigin: "0 100%", 14 | transform: scaleRotateTranslateY([0], [360], ["-100%"]), 15 | }, 16 | "100%": { 17 | opacity: 1, 18 | transformOrigin: "100% 100%", 19 | transform: scaleRotateTranslateY([1], [0], ["0%"]), 20 | }, 21 | }; 22 | 23 | export default twisterInUp; 24 | -------------------------------------------------------------------------------- /src/magic/twisterInUp.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, rotate, translateY } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const scaleRotateTranslateY = compose(scale, rotate, translateY); 5 | 6 | const twisterInUp: Animation = { 7 | "0%": { 8 | opacity: 0, 9 | transformOrigin: "100% 0", 10 | transform: scaleRotateTranslateY([0], [360], ["100%"]), 11 | }, 12 | "30%": { 13 | transformOrigin: "100% 0", 14 | transform: scaleRotateTranslateY([0], [360], ["100%"]), 15 | }, 16 | "100%": { 17 | opacity: 1, 18 | transformOrigin: "0 0", 19 | transform: scaleRotateTranslateY([1], [0], ["0"]), 20 | }, 21 | }; 22 | 23 | export default twisterInUp; 24 | -------------------------------------------------------------------------------- /src/math/foolishIn.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, rotate } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const scaleRotate = compose(scale, rotate); 5 | 6 | const foolishIn: Animation = { 7 | "0%": { 8 | opacity: 0, 9 | transformOrigin: "50% 50%", 10 | transform: scaleRotate([0], [360]), 11 | }, 12 | "20%": { 13 | opacity: 1, 14 | transformOrigin: "0% 100%", 15 | transform: scaleRotate([0.5], [0]), 16 | }, 17 | "40%": { 18 | opacity: 1, 19 | transformOrigin: "100% 100%", 20 | transform: scaleRotate([0.5], [0]), 21 | }, 22 | "60%": { 23 | opacity: 1, 24 | transformOrigin: "0% 50%", 25 | transform: scaleRotate([0.5], [0]), 26 | }, 27 | "80%": { 28 | opacity: 1, 29 | transformOrigin: "0% 0%", 30 | transform: scaleRotate([0.5], [0]), 31 | }, 32 | "100%": { 33 | opacity: 1, 34 | transformOrigin: "50% 50%", 35 | transform: scaleRotate([1], [0]), 36 | }, 37 | }; 38 | 39 | export default foolishIn; 40 | -------------------------------------------------------------------------------- /src/math/foolishOut.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, rotate } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const scaleRotate = compose(scale, rotate); 5 | 6 | const foolishOut: Animation = { 7 | "0%": { 8 | opacity: 1, 9 | transformOrigin: "50% 50%", 10 | transform: scaleRotate([1], [360]), 11 | }, 12 | "20%": { 13 | opacity: 1, 14 | transformOrigin: "0% 0%", 15 | transform: scaleRotate([0.5], [0]), 16 | }, 17 | "40%": { 18 | opacity: 1, 19 | transformOrigin: "100% 0%", 20 | transform: scaleRotate([0.5], [0]), 21 | }, 22 | "60%": { 23 | opacity: 1, 24 | transformOrigin: "0% 0%", 25 | transform: scaleRotate([0.5], [0]), 26 | }, 27 | "80%": { 28 | opacity: 1, 29 | transformOrigin: "0% 100%", 30 | transform: scaleRotate([0.5], [0]), 31 | }, 32 | "100%": { 33 | opacity: 0, 34 | transformOrigin: "50% 50%", 35 | transform: scaleRotate([0], [0]), 36 | }, 37 | }; 38 | 39 | export default foolishOut; 40 | -------------------------------------------------------------------------------- /src/math/holeIn.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, rotateY } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const scaleRotateY = compose(scale, rotateY); 5 | 6 | const holeIn: Animation = { 7 | "0%": { 8 | opacity: 0, 9 | transformOrigin: "50% 50%", 10 | transform: scaleRotateY([0], [180]), 11 | }, 12 | "100%": { 13 | opacity: 1, 14 | transformOrigin: "50% 50%", 15 | transform: scaleRotateY([1], [0]), 16 | }, 17 | }; 18 | 19 | export default holeIn; 20 | -------------------------------------------------------------------------------- /src/math/holeOut.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, rotateY } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const scaleRotateY = compose(scale, rotateY); 5 | 6 | const holeOut: Animation = { 7 | "0%": { 8 | opacity: 1, 9 | transformOrigin: "50% 50%", 10 | transform: scaleRotateY([1], [0]), 11 | }, 12 | "100%": { 13 | opacity: 0, 14 | transformOrigin: "50% 50%", 15 | transform: scaleRotateY([0], [180]), 16 | }, 17 | }; 18 | 19 | export default holeOut; 20 | -------------------------------------------------------------------------------- /src/math/swashIn.ts: -------------------------------------------------------------------------------- 1 | import { scale } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const swashIn: Animation = { 5 | "0%": { 6 | opacity: 0, 7 | transformOrigin: "50% 50%", 8 | transform: scale(0), 9 | }, 10 | "80%": { 11 | opacity: 1, 12 | transformOrigin: "50% 50%", 13 | transform: scale(0.9), 14 | }, 15 | "100%": { 16 | opacity: 1, 17 | transformOrigin: "50% 50%", 18 | transform: scale(1), 19 | }, 20 | }; 21 | 22 | export default swashIn; 23 | -------------------------------------------------------------------------------- /src/math/swashOut.ts: -------------------------------------------------------------------------------- 1 | import { scale } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const swashOut: Animation = { 5 | "0%": { 6 | opacity: 1, 7 | transformOrigin: "50% 50%", 8 | transform: scale(1), 9 | }, 10 | "80%": { 11 | opacity: 1, 12 | transformOrigin: "50% 50%", 13 | transform: scale(0.9), 14 | }, 15 | "100%": { 16 | opacity: 0, 17 | transformOrigin: "50% 50%", 18 | transform: scale(0), 19 | }, 20 | }; 21 | 22 | export default swashOut; 23 | -------------------------------------------------------------------------------- /src/perspective/perspectiveDown.ts: -------------------------------------------------------------------------------- 1 | import { compose, perspective, rotateX } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const perspectiveRotateX = compose(perspective, rotateX); 5 | 6 | const perspectiveDown: Animation = { 7 | "0%": { 8 | transformOrigin: "0 100%", 9 | transform: perspectiveRotateX(["800px"], [0]), 10 | }, 11 | "100%": { 12 | transformOrigin: "0 100%", 13 | transform: perspectiveRotateX(["800px"], [-180]), 14 | }, 15 | }; 16 | 17 | export default perspectiveDown; 18 | -------------------------------------------------------------------------------- /src/perspective/perspectiveDownReturn.ts: -------------------------------------------------------------------------------- 1 | import { compose, perspective, rotateX } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const perspectiveRotateX = compose(perspective, rotateX); 5 | 6 | const perspectiveDownReturn: Animation = { 7 | "0%": { 8 | transformOrigin: "0 100%", 9 | transform: perspectiveRotateX(["800px"], [-180]), 10 | }, 11 | "100%": { 12 | transformOrigin: "0 100%", 13 | transform: perspectiveRotateX(["800px"], [0]), 14 | }, 15 | }; 16 | 17 | export default perspectiveDownReturn; 18 | -------------------------------------------------------------------------------- /src/perspective/perspectiveLeft.ts: -------------------------------------------------------------------------------- 1 | import { compose, perspective, rotateY } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const perspectiveRotateY = compose(perspective, rotateY); 5 | 6 | const perspectiveLeft: Animation = { 7 | "0%": { 8 | transformOrigin: "0 0", 9 | transform: perspectiveRotateY(["800px"], [0]), 10 | }, 11 | "100%": { 12 | transformOrigin: "0 0", 13 | transform: perspectiveRotateY(["800px"], [-180]), 14 | }, 15 | }; 16 | 17 | export default perspectiveLeft; 18 | -------------------------------------------------------------------------------- /src/perspective/perspectiveLeftReturn.ts: -------------------------------------------------------------------------------- 1 | import { compose, perspective, rotateY } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const perspectiveRotateY = compose(perspective, rotateY); 5 | 6 | const perspectiveLeftReturn: Animation = { 7 | "0%": { 8 | transformOrigin: "0 0", 9 | transform: perspectiveRotateY(["800px"], [-180]), 10 | }, 11 | "100%": { 12 | transformOrigin: "0 0", 13 | transform: perspectiveRotateY(["800px"], [0]), 14 | }, 15 | }; 16 | 17 | export default perspectiveLeftReturn; 18 | -------------------------------------------------------------------------------- /src/perspective/perspectiveRight.ts: -------------------------------------------------------------------------------- 1 | import { compose, perspective, rotateY } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const perspectiveRotateY = compose(perspective, rotateY); 5 | 6 | const perspectiveRight: Animation = { 7 | "0%": { 8 | transformOrigin: "100% 0", 9 | transform: perspectiveRotateY(["800px"], [0]), 10 | }, 11 | "100%": { 12 | transformOrigin: "100% 0", 13 | transform: perspectiveRotateY(["800px"], [180]), 14 | }, 15 | }; 16 | 17 | export default perspectiveRight; 18 | -------------------------------------------------------------------------------- /src/perspective/perspectiveRightReturn.ts: -------------------------------------------------------------------------------- 1 | import { compose, perspective, rotateY } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const perspectiveRotateY = compose(perspective, rotateY); 5 | 6 | const perspectiveRightReturn: Animation = { 7 | "0%": { 8 | transformOrigin: "100% 0", 9 | transform: perspectiveRotateY(["800px"], [180]), 10 | }, 11 | "100%": { 12 | transformOrigin: "100% 0", 13 | transform: perspectiveRotateY(["800px"], [0]), 14 | }, 15 | }; 16 | 17 | export default perspectiveRightReturn; 18 | -------------------------------------------------------------------------------- /src/perspective/perspectiveUp.ts: -------------------------------------------------------------------------------- 1 | import { compose, perspective, rotateX } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const perspectiveRotateX = compose(perspective, rotateX); 5 | 6 | const perspectiveUp: Animation = { 7 | "0%": { 8 | transformOrigin: "0 0", 9 | transform: perspectiveRotateX(["800px"], [0]), 10 | }, 11 | "100%": { 12 | transformOrigin: "0 0", 13 | transform: perspectiveRotateX(["800px"], [180]), 14 | }, 15 | }; 16 | 17 | export default perspectiveUp; 18 | -------------------------------------------------------------------------------- /src/perspective/perspectiveUpReturn.ts: -------------------------------------------------------------------------------- 1 | import { compose, perspective, rotateX } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const perspectiveRotateX = compose(perspective, rotateX); 5 | 6 | const perspectiveUpReturn: Animation = { 7 | "0%": { 8 | transformOrigin: "0 0", 9 | transform: perspectiveRotateX(["800px"], [180]), 10 | }, 11 | "100%": { 12 | transformOrigin: "0 0", 13 | transform: perspectiveRotateX(["800px"], [0]), 14 | }, 15 | }; 16 | 17 | export default perspectiveUpReturn; 18 | -------------------------------------------------------------------------------- /src/rotate/rotateDownIn.ts: -------------------------------------------------------------------------------- 1 | import { compose, perspective, rotateX, translateZ } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const perspectiveRotateXTranslateZ = compose(perspective, rotateX, translateZ); 5 | 6 | const rotateDownIn: Animation = { 7 | "0%": { 8 | opacity: 0, 9 | transformOrigin: "50% 100%", 10 | transform: perspectiveRotateXTranslateZ(["800px"], [-180], ["300px"]), 11 | }, 12 | "100%": { 13 | opacity: 1, 14 | transformOrigin: "0 0", 15 | transform: perspectiveRotateXTranslateZ(["800px"], [0], ["0px"]), 16 | }, 17 | }; 18 | 19 | export default rotateDownIn; 20 | -------------------------------------------------------------------------------- /src/rotate/rotateDownOut.ts: -------------------------------------------------------------------------------- 1 | import { compose, perspective, rotateX, translateZ } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const perspectiveRotateXTranslateZ = compose(perspective, rotateX, translateZ); 5 | 6 | const rotateDownOut: Animation = { 7 | "0%": { 8 | opacity: 1, 9 | transformOrigin: "0 0", 10 | transform: perspectiveRotateXTranslateZ(["800px"], [0], ["0px"]), 11 | }, 12 | "100%": { 13 | opacity: 0, 14 | transformOrigin: "50% 100%", 15 | transform: perspectiveRotateXTranslateZ(["800px"], [-180], ["300px"]), 16 | }, 17 | }; 18 | 19 | export default rotateDownOut; 20 | -------------------------------------------------------------------------------- /src/rotate/rotateLeftIn.ts: -------------------------------------------------------------------------------- 1 | import { compose, perspective, rotateY, translateZ } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const perspectiveRotateYTranslateZ = compose(perspective, rotateY, translateZ); 5 | 6 | const rotateLeftIn: Animation = { 7 | "0%": { 8 | opacity: 0, 9 | transformOrigin: "50% 0", 10 | transform: perspectiveRotateYTranslateZ(["800px"], [-180], ["300px"]), 11 | }, 12 | "100%": { 13 | opacity: 1, 14 | transformOrigin: "0 0", 15 | transform: perspectiveRotateYTranslateZ(["800px"], [0], ["0px"]), 16 | }, 17 | }; 18 | 19 | export default rotateLeftIn; 20 | -------------------------------------------------------------------------------- /src/rotate/rotateLeftOut.ts: -------------------------------------------------------------------------------- 1 | import { compose, perspective, rotateY, translateZ } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const perspectiveRotateYTranslateZ = compose(perspective, rotateY, translateZ); 5 | 6 | const rotateLeftOut: Animation = { 7 | "0%": { 8 | opacity: 1, 9 | transformOrigin: "0 0", 10 | transform: perspectiveRotateYTranslateZ(["800px"], [0], ["0px"]), 11 | }, 12 | "100%": { 13 | opacity: 0, 14 | transformOrigin: "50% 0", 15 | transform: perspectiveRotateYTranslateZ(["800px"], [-180], ["300px"]), 16 | }, 17 | }; 18 | 19 | export default rotateLeftOut; 20 | -------------------------------------------------------------------------------- /src/rotate/rotateRightIn.ts: -------------------------------------------------------------------------------- 1 | import { compose, perspective, rotateY, translateZ } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const perspectiveRotateYTranslateZ = compose(perspective, rotateY, translateZ); 5 | 6 | const rotateRightIn: Animation = { 7 | "0%": { 8 | opacity: 0, 9 | transformOrigin: "50% 0", 10 | transform: perspectiveRotateYTranslateZ(["800px"], [180], ["300px"]), 11 | }, 12 | "100%": { 13 | opacity: 1, 14 | transformOrigin: "0 0", 15 | transform: perspectiveRotateYTranslateZ(["800px"], [0], ["0px"]), 16 | }, 17 | }; 18 | 19 | export default rotateRightIn; 20 | -------------------------------------------------------------------------------- /src/rotate/rotateRightOut.ts: -------------------------------------------------------------------------------- 1 | import { compose, perspective, rotateY, translateZ } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const perspectiveRotateYTranslateZ = compose(perspective, rotateY, translateZ); 5 | 6 | const rotateRightOut: Animation = { 7 | "0%": { 8 | opacity: 1, 9 | transformOrigin: "0 0", 10 | transform: perspectiveRotateYTranslateZ(["800px"], [0], ["0px"]), 11 | }, 12 | "100%": { 13 | opacity: 0, 14 | transformOrigin: "50% 0", 15 | transform: perspectiveRotateYTranslateZ(["800px"], [180], ["300px"]), 16 | }, 17 | }; 18 | 19 | export default rotateRightOut; 20 | -------------------------------------------------------------------------------- /src/rotate/rotateUpIn.ts: -------------------------------------------------------------------------------- 1 | import { compose, perspective, rotateX, translateZ } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const perspectiveRotateXTranslateZ = compose(perspective, rotateX, translateZ); 5 | 6 | const rotateUpIn: Animation = { 7 | "0%": { 8 | opacity: 0, 9 | transformOrigin: "50% 0", 10 | transform: perspectiveRotateXTranslateZ(["800px"], [180], ["100px"]), 11 | }, 12 | "100%": { 13 | opacity: 1, 14 | transformOrigin: "0 0", 15 | transform: perspectiveRotateXTranslateZ(["800px"], [0], ["0px"]), 16 | }, 17 | }; 18 | 19 | export default rotateUpIn; 20 | -------------------------------------------------------------------------------- /src/rotate/rotateUpOut.ts: -------------------------------------------------------------------------------- 1 | import { compose, perspective, rotateX, translateZ } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const perspectiveRotateXTranslateZ = compose(perspective, rotateX, translateZ); 5 | 6 | const rotateUpOut: Animation = { 7 | "0%": { 8 | opacity: 1, 9 | transformOrigin: "0 0", 10 | transform: perspectiveRotateXTranslateZ(["800px"], [0], ["0px"]), 11 | }, 12 | "100%": { 13 | opacity: 0, 14 | transformOrigin: "50% 0", 15 | transform: perspectiveRotateXTranslateZ(["800px"], [180], ["100px"]), 16 | }, 17 | }; 18 | 19 | export default rotateUpOut; 20 | -------------------------------------------------------------------------------- /src/slide/slideDown.ts: -------------------------------------------------------------------------------- 1 | import { translateY } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const slideDown: Animation = { 5 | "0%": { 6 | transformOrigin: "0 0", 7 | transform: translateY("0%"), 8 | }, 9 | "100%": { 10 | transformOrigin: "0 0", 11 | transform: translateY("100%"), 12 | }, 13 | }; 14 | 15 | export default slideDown; 16 | -------------------------------------------------------------------------------- /src/slide/slideDownReturn.ts: -------------------------------------------------------------------------------- 1 | import { translateY } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const slideDownReturn: Animation = { 5 | "0%": { 6 | transformOrigin: "0 0", 7 | transform: translateY("100%"), 8 | }, 9 | "100%": { 10 | transformOrigin: "0 0", 11 | transform: translateY("0%"), 12 | }, 13 | }; 14 | 15 | export default slideDownReturn; 16 | -------------------------------------------------------------------------------- /src/slide/slideLeft.ts: -------------------------------------------------------------------------------- 1 | import { translateX } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const slideLeft: Animation = { 5 | "0%": { 6 | transformOrigin: "0 0", 7 | transform: translateX("0%"), 8 | }, 9 | "100%": { 10 | transformOrigin: "0 0", 11 | transform: translateX("-100%"), 12 | }, 13 | }; 14 | 15 | export default slideLeft; 16 | -------------------------------------------------------------------------------- /src/slide/slideLeftReturn.ts: -------------------------------------------------------------------------------- 1 | import { translateX } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const slideLeftReturn: Animation = { 5 | "0%": { 6 | transformOrigin: "0 0", 7 | transform: translateX("-100%"), 8 | }, 9 | "100%": { 10 | transformOrigin: "0 0", 11 | transform: translateX("0%"), 12 | }, 13 | }; 14 | 15 | export default slideLeftReturn; 16 | -------------------------------------------------------------------------------- /src/slide/slideRight.ts: -------------------------------------------------------------------------------- 1 | import { translateX } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const slideRight: Animation = { 5 | "0%": { 6 | transformOrigin: "0 0", 7 | transform: translateX("0%"), 8 | }, 9 | "100%": { 10 | transformOrigin: "0 0", 11 | transform: translateX("100%"), 12 | }, 13 | }; 14 | 15 | export default slideRight; 16 | -------------------------------------------------------------------------------- /src/slide/slideRightReturn.ts: -------------------------------------------------------------------------------- 1 | import { translateX } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const slideRightReturn: Animation = { 5 | "0%": { 6 | transformOrigin: "0 0", 7 | transform: translateX("100%"), 8 | }, 9 | "100%": { 10 | transformOrigin: "0 0", 11 | transform: translateX("0%"), 12 | }, 13 | }; 14 | 15 | export default slideRightReturn; 16 | -------------------------------------------------------------------------------- /src/slide/slideUp.ts: -------------------------------------------------------------------------------- 1 | import { translateY } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const slideUp: Animation = { 5 | "0%": { 6 | transformOrigin: "0 0", 7 | transform: translateY("0%"), 8 | }, 9 | "100%": { 10 | transformOrigin: "0 0", 11 | transform: translateY("-100%"), 12 | }, 13 | }; 14 | 15 | export default slideUp; 16 | -------------------------------------------------------------------------------- /src/slide/slideUpReturn.ts: -------------------------------------------------------------------------------- 1 | import { translateY } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const slideUpReturn: Animation = { 5 | "0%": { 6 | transformOrigin: "0 0", 7 | transform: translateY("-100%"), 8 | }, 9 | "100%": { 10 | transformOrigin: "0 0", 11 | transform: translateY("0%"), 12 | }, 13 | }; 14 | 15 | export default slideUpReturn; 16 | -------------------------------------------------------------------------------- /src/space/spaceInDown.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, translateXY } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const scaletranslateXY = compose(scale, translateXY); 5 | 6 | const spaceInDown: Animation = { 7 | "0%": { 8 | opacity: 0, 9 | transformOrigin: "50% 100%", 10 | transform: scaletranslateXY([0.2], ["0%", "200%"]), 11 | }, 12 | "100%": { 13 | opacity: 1, 14 | transformOrigin: "50% 100%", 15 | transform: scaletranslateXY([1], ["0%", "0%"]), 16 | }, 17 | }; 18 | 19 | export default spaceInDown; 20 | -------------------------------------------------------------------------------- /src/space/spaceInLeft.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, translateXY } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const scaletranslateXY = compose(scale, translateXY); 5 | 6 | const spaceInLeft: Animation = { 7 | "0%": { 8 | opacity: 0, 9 | transformOrigin: "0% 50%", 10 | transform: scaletranslateXY([0.2], ["-200%", "0%"]), 11 | }, 12 | "100%": { 13 | opacity: 1, 14 | transformOrigin: "0% 50%", 15 | transform: scaletranslateXY([1], ["0%", "0%"]), 16 | }, 17 | }; 18 | 19 | export default spaceInLeft; 20 | -------------------------------------------------------------------------------- /src/space/spaceInRight.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, translateXY } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const scaletranslateXY = compose(scale, translateXY); 5 | 6 | const spaceInRight: Animation = { 7 | "0%": { 8 | opacity: 0, 9 | transformOrigin: "100% 50%", 10 | transform: scaletranslateXY([0.2], ["200%", "0%"]), 11 | }, 12 | "100%": { 13 | opacity: 1, 14 | transformOrigin: "100% 50%", 15 | transform: scaletranslateXY([1], ["0%", "0%"]), 16 | }, 17 | }; 18 | 19 | export default spaceInRight; 20 | -------------------------------------------------------------------------------- /src/space/spaceInUp.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, translateXY } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const scaletranslateXY = compose(scale, translateXY); 5 | 6 | const spaceInUp: Animation = { 7 | "0%": { 8 | opacity: 0, 9 | transformOrigin: "50% 0%", 10 | transform: scaletranslateXY([0.2], ["0%", "-200%"]), 11 | }, 12 | "100%": { 13 | opacity: 1, 14 | transformOrigin: "50% 0%", 15 | transform: scaletranslateXY([1], ["0%", "0%"]), 16 | }, 17 | }; 18 | 19 | export default spaceInUp; 20 | -------------------------------------------------------------------------------- /src/space/spaceOutDown.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, translateXY } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const scaletranslateXY = compose(scale, translateXY); 5 | 6 | const spaceOutDown: Animation = { 7 | "0%": { 8 | opacity: 1, 9 | transformOrigin: "50% 100%", 10 | transform: scaletranslateXY([1], ["0%", "0%"]), 11 | }, 12 | "100%": { 13 | opacity: 0, 14 | transformOrigin: "50% 100%", 15 | transform: scaletranslateXY([0.2], ["0%", "200%"]), 16 | }, 17 | }; 18 | 19 | export default spaceOutDown; 20 | -------------------------------------------------------------------------------- /src/space/spaceOutLeft.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, translateXY } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const scaletranslateXY = compose(scale, translateXY); 5 | 6 | const spaceOutLeft: Animation = { 7 | "0%": { 8 | opacity: 1, 9 | transformOrigin: "0% 50%", 10 | transform: scaletranslateXY([1], ["0%", "0%"]), 11 | }, 12 | "100%": { 13 | opacity: 0, 14 | transformOrigin: "0% 50%", 15 | transform: scaletranslateXY([0.2], ["-200%", "0%"]), 16 | }, 17 | }; 18 | 19 | export default spaceOutLeft; 20 | -------------------------------------------------------------------------------- /src/space/spaceOutRight.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, translateXY } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const scaletranslateXY = compose(scale, translateXY); 5 | 6 | const spaceOutRight: Animation = { 7 | "0%": { 8 | opacity: 1, 9 | transformOrigin: "100% 50%", 10 | transform: scaletranslateXY([1], ["0%", "0%"]), 11 | }, 12 | "100%": { 13 | opacity: 0, 14 | transformOrigin: "100% 50%", 15 | transform: scaletranslateXY([0.2], ["200%", "0%"]), 16 | }, 17 | }; 18 | 19 | export default spaceOutRight; 20 | -------------------------------------------------------------------------------- /src/space/spaceOutUp.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, translateXY } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const scaletranslateXY = compose(scale, translateXY); 5 | 6 | const spaceOutUp: Animation = { 7 | "0%": { 8 | opacity: 1, 9 | transformOrigin: "50% 0%", 10 | transform: scaletranslateXY([1], ["0%", "0%"]), 11 | }, 12 | "100%": { 13 | opacity: 0, 14 | transformOrigin: "50% 0%", 15 | transform: scaletranslateXY([0.2], ["0%", "-200%"]), 16 | }, 17 | }; 18 | 19 | export default spaceOutUp; 20 | -------------------------------------------------------------------------------- /src/staticEffects/openDownLeft.ts: -------------------------------------------------------------------------------- 1 | import { rotate } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const openDownLeft: Animation = { 5 | "0%": { 6 | transformOrigin: "bottom left", 7 | transform: rotate(0), 8 | animationTimingFunction: "ease-out", 9 | }, 10 | "100%": { 11 | transformOrigin: "bottom left", 12 | transform: rotate(-110), 13 | animationTimingFunction: "ease-in-out", 14 | }, 15 | }; 16 | 17 | export default openDownLeft; 18 | -------------------------------------------------------------------------------- /src/staticEffects/openDownLeftReturn.ts: -------------------------------------------------------------------------------- 1 | import { rotate } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const openDownLeftReturn: Animation = { 5 | "0%": { 6 | transformOrigin: "bottom left", 7 | transform: rotate(-110), 8 | animationTimingFunction: "ease-in-out", 9 | }, 10 | "100%": { 11 | transformOrigin: "bottom left", 12 | transform: rotate(0), 13 | animationTimingFunction: "ease-out", 14 | }, 15 | }; 16 | 17 | export default openDownLeftReturn; 18 | -------------------------------------------------------------------------------- /src/staticEffects/openDownRight.ts: -------------------------------------------------------------------------------- 1 | import { rotate } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const openDownRight: Animation = { 5 | "0%": { 6 | transformOrigin: "bottom right", 7 | transform: rotate(0), 8 | animationTimingFunction: "ease-out", 9 | }, 10 | "100%": { 11 | transformOrigin: "bottom right", 12 | transform: rotate(110), 13 | animationTimingFunction: "ease-in-out", 14 | }, 15 | }; 16 | 17 | export default openDownRight; 18 | -------------------------------------------------------------------------------- /src/staticEffects/openDownRightReturn.ts: -------------------------------------------------------------------------------- 1 | import { rotate } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const openDownRightReturn: Animation = { 5 | "0%": { 6 | transformOrigin: "bottom right", 7 | transform: rotate(110), 8 | animationTimingFunction: "ease-in-out", 9 | }, 10 | "100%": { 11 | transformOrigin: "bottom right", 12 | transform: rotate(0), 13 | animationTimingFunction: "ease-out", 14 | }, 15 | }; 16 | 17 | export default openDownRightReturn; 18 | -------------------------------------------------------------------------------- /src/staticEffects/openUpLeft.ts: -------------------------------------------------------------------------------- 1 | import { rotate } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const openUpLeft: Animation = { 5 | "0%": { 6 | transformOrigin: "top left", 7 | transform: rotate(0), 8 | animationTimingFunction: "ease-out", 9 | }, 10 | "100%": { 11 | transformOrigin: "top left", 12 | transform: rotate(110), 13 | animationTimingFunction: "ease-in-out", 14 | }, 15 | }; 16 | 17 | export default openUpLeft; 18 | -------------------------------------------------------------------------------- /src/staticEffects/openUpLeftReturn.ts: -------------------------------------------------------------------------------- 1 | import { rotate } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const openUpLeftReturn: Animation = { 5 | "0%": { 6 | transformOrigin: "top left", 7 | transform: rotate(110), 8 | animationTimingFunction: "ease-in-out", 9 | }, 10 | "100%": { 11 | transformOrigin: "top left", 12 | transform: rotate(0), 13 | animationTimingFunction: "ease-out", 14 | }, 15 | }; 16 | 17 | export default openUpLeftReturn; 18 | -------------------------------------------------------------------------------- /src/staticEffects/openUpRight.ts: -------------------------------------------------------------------------------- 1 | import { rotate } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const openUpRight: Animation = { 5 | "0%": { 6 | transformOrigin: "top right", 7 | transform: rotate(0), 8 | animationTimingFunction: "ease-out", 9 | }, 10 | "100%": { 11 | transformOrigin: "top right", 12 | transform: rotate(-110), 13 | animationTimingFunction: "ease-in-out", 14 | }, 15 | }; 16 | 17 | export default openUpRight; 18 | -------------------------------------------------------------------------------- /src/staticEffects/openUpRightReturn.ts: -------------------------------------------------------------------------------- 1 | import { rotate } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const openUpRightReturn: Animation = { 5 | "0%": { 6 | transformOrigin: "top right", 7 | transform: rotate(-110), 8 | animationTimingFunction: "ease-in-out", 9 | }, 10 | "100%": { 11 | transformOrigin: "top right", 12 | transform: rotate(0), 13 | animationTimingFunction: "ease-out", 14 | }, 15 | }; 16 | 17 | export default openUpRightReturn; 18 | -------------------------------------------------------------------------------- /src/staticEffectsOut/openDownLeftOut.ts: -------------------------------------------------------------------------------- 1 | import { rotate } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const openDownLeftOut: Animation = { 5 | "0%": { 6 | opacity: 1, 7 | transformOrigin: "bottom left", 8 | transform: rotate(0), 9 | animationTimingFunction: "ease-out", 10 | }, 11 | "100%": { 12 | opacity: 0, 13 | transformOrigin: "bottom left", 14 | transform: rotate(-110), 15 | animationTimingFunction: "ease-in-out", 16 | }, 17 | }; 18 | 19 | export default openDownLeftOut; 20 | -------------------------------------------------------------------------------- /src/staticEffectsOut/openDownRightOut.ts: -------------------------------------------------------------------------------- 1 | import { rotate } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const openDownRightOut: Animation = { 5 | "0%": { 6 | opacity: 1, 7 | transformOrigin: "bottom right", 8 | transform: rotate(0), 9 | animationTimingFunction: "ease-out", 10 | }, 11 | "100%": { 12 | opacity: 0, 13 | transformOrigin: "bottom right", 14 | transform: rotate(110), 15 | animationTimingFunction: "ease-in-out", 16 | }, 17 | }; 18 | 19 | export default openDownRightOut; 20 | -------------------------------------------------------------------------------- /src/staticEffectsOut/openUpLeftOut.ts: -------------------------------------------------------------------------------- 1 | import { rotate } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const openUpLeftOut: Animation = { 5 | "0%": { 6 | opacity: 1, 7 | transformOrigin: "top left", 8 | transform: rotate(0), 9 | animationTimingFunction: "ease-out", 10 | }, 11 | "100%": { 12 | opacity: 0, 13 | transformOrigin: "top left", 14 | transform: rotate(110), 15 | animationTimingFunction: "ease-in-out", 16 | }, 17 | }; 18 | 19 | export default openUpLeftOut; 20 | -------------------------------------------------------------------------------- /src/staticEffectsOut/openUpRightOut.ts: -------------------------------------------------------------------------------- 1 | import { rotate } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const openUpRightOut: Animation = { 5 | "0%": { 6 | opacity: 1, 7 | transformOrigin: "top right", 8 | transform: rotate(0), 9 | animationTimingFunction: "ease-out", 10 | }, 11 | "100%": { 12 | opacity: 0, 13 | transformOrigin: "top right", 14 | transform: rotate(-110), 15 | animationTimingFunction: "ease-in-out", 16 | }, 17 | }; 18 | 19 | export default openUpRightOut; 20 | -------------------------------------------------------------------------------- /src/tin/tinDownIn.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, translateY } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const scaleTranslateY = compose(scale, translateY); 5 | 6 | const tinDownIn: Animation = { 7 | "0%": { 8 | opacity: 0, 9 | transform: scaleTranslateY([1], ["300%"]), 10 | }, 11 | "50%, 70%, 90%": { 12 | opacity: 1, 13 | transform: scaleTranslateY([1.1], [0]), 14 | }, 15 | "60%, 80%, 100%": { 16 | opacity: 1, 17 | transform: scaleTranslateY([1], [0]), 18 | }, 19 | }; 20 | 21 | export default tinDownIn; 22 | -------------------------------------------------------------------------------- /src/tin/tinDownOut.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, translateY } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const scaleTranslateY = compose(scale, translateY); 5 | 6 | const tinDownOut: Animation = { 7 | "0%, 20%, 40%, 50%": { 8 | opacity: 1, 9 | transform: scaleTranslateY([1], [0]), 10 | }, 11 | "10%, 30%": { 12 | opacity: 1, 13 | transform: scaleTranslateY([1.1], [0]), 14 | }, 15 | "100%": { 16 | opacity: 0, 17 | transform: scaleTranslateY([1], ["300%"]), 18 | }, 19 | }; 20 | 21 | export default tinDownOut; 22 | -------------------------------------------------------------------------------- /src/tin/tinLeftIn.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, translateX } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const scaleTranslateX = compose(scale, translateX); 5 | 6 | const tinLeftIn: Animation = { 7 | "0%": { 8 | opacity: 0, 9 | transform: scaleTranslateX([1], ["-300%"]), 10 | }, 11 | "50%, 70%, 90%": { 12 | opacity: 1, 13 | transform: scaleTranslateX([1.1], [0]), 14 | }, 15 | "60%, 80%, 100%": { 16 | opacity: 1, 17 | transform: scaleTranslateX([1], [0]), 18 | }, 19 | }; 20 | 21 | export default tinLeftIn; 22 | -------------------------------------------------------------------------------- /src/tin/tinLeftOut.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, translateX } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const scaleTranslateX = compose(scale, translateX); 5 | 6 | const tinLeftOut: Animation = { 7 | "0%, 20%, 40%, 50%": { 8 | opacity: 1, 9 | transform: scaleTranslateX([1], [0]), 10 | }, 11 | "10%, 30%": { 12 | opacity: 1, 13 | transform: scaleTranslateX([1.1], [0]), 14 | }, 15 | "100%": { 16 | opacity: 0, 17 | transform: scaleTranslateX([1], ["-300%"]), 18 | }, 19 | }; 20 | 21 | export default tinLeftOut; 22 | -------------------------------------------------------------------------------- /src/tin/tinRightIn.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, translateX } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const scaleTranslateX = compose(scale, translateX); 5 | 6 | const tinRightIn: Animation = { 7 | "0%": { 8 | opacity: 0, 9 | transform: scaleTranslateX([1], ["300%"]), 10 | }, 11 | "50%, 70%, 90%": { 12 | opacity: 1, 13 | transform: scaleTranslateX([1.1], [0]), 14 | }, 15 | "60%, 80%, 100%": { 16 | opacity: 1, 17 | transform: scaleTranslateX([1], [0]), 18 | }, 19 | }; 20 | 21 | export default tinRightIn; 22 | -------------------------------------------------------------------------------- /src/tin/tinRightOut.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, translateX } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const scaleTranslateX = compose(scale, translateX); 5 | 6 | const tinRightOut: Animation = { 7 | "0%, 20%, 40%, 50%": { 8 | opacity: 1, 9 | transform: scaleTranslateX([1], [0]), 10 | }, 11 | "10%, 30%": { 12 | opacity: 1, 13 | transform: scaleTranslateX([1.1], [0]), 14 | }, 15 | "100%": { 16 | opacity: 0, 17 | transform: scaleTranslateX([1], ["300%"]), 18 | }, 19 | }; 20 | 21 | export default tinRightOut; 22 | -------------------------------------------------------------------------------- /src/tin/tinUpIn.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, translateY } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const scaleTranslateY = compose(scale, translateY); 5 | 6 | const tinUpIn: Animation = { 7 | "0%": { 8 | opacity: 0, 9 | transform: scaleTranslateY([1], ["-300%"]), 10 | }, 11 | "50%, 70%, 90%": { 12 | opacity: 1, 13 | transform: scaleTranslateY([1.1], [0]), 14 | }, 15 | "60%, 80%, 100%": { 16 | opacity: 1, 17 | transform: scaleTranslateY([1], [0]), 18 | }, 19 | }; 20 | 21 | export default tinUpIn; 22 | -------------------------------------------------------------------------------- /src/tin/tinUpOut.ts: -------------------------------------------------------------------------------- 1 | import { compose, scale, translateY } from "../utils"; 2 | import type { Animation } from "../utils/types"; 3 | 4 | const scaleTranslateY = compose(scale, translateY); 5 | 6 | const tinUpOut: Animation = { 7 | "0%, 20%, 40%, 50%": { 8 | opacity: 1, 9 | transform: scaleTranslateY([1], [0]), 10 | }, 11 | "10%, 30%": { 12 | opacity: 1, 13 | transform: scaleTranslateY([1.1], [0]), 14 | }, 15 | "100%": { 16 | opacity: 0, 17 | transform: scaleTranslateY([1], ["-300%"]), 18 | }, 19 | }; 20 | 21 | export default tinUpOut; 22 | -------------------------------------------------------------------------------- /src/utils/config.ts: -------------------------------------------------------------------------------- 1 | export const expandArray = ( 2 | arr: Array, 3 | append = "", 4 | inKey = false, 5 | transform = (v: T): T => v 6 | ): Record => 7 | arr.reduce( 8 | (a, v) => ({ 9 | ...a, 10 | [`${v}${inKey ? append : ""}`]: `${transform(v)}${append}`, 11 | }), 12 | {} 13 | ); 14 | 15 | const range = (a: number, b?: number, c?: number): Array => { 16 | const len = Math.abs(b != null ? Math.ceil((b - a) / (c ?? 1)) : a); 17 | const arr = new Array(len).fill(0); 18 | 19 | return arr.map( 20 | (_, k) => (k * (c ?? (a < 0 ? -1 : 1)) || 0) + (b != null ? a : 0) 21 | ); 22 | }; 23 | 24 | export const duration = expandArray([100, 200, 300, 500, 1000], "ms"); 25 | 26 | export const delay = { ...duration }; 27 | 28 | export const repeat = expandArray(range(5)); 29 | 30 | export const ease = { 31 | linear: "0,0,1,1", 32 | in: ".42,0,1,1", 33 | out: "0,0,.58,1", 34 | "in-out": ".42,0,.58,1", 35 | }; 36 | 37 | export const fill = expandArray(["none", "forwards", "backwards", "both"]); 38 | -------------------------------------------------------------------------------- /src/utils/index.ts: -------------------------------------------------------------------------------- 1 | import type { CSSValue } from "./types"; 2 | 3 | /** 4 | * Composes a variable number of CSS helper functions. 5 | * Returns a function that accepts all the original arguments 6 | * of the functions it composed. If the original function 7 | * accepted multiple arguments, they must be passed as 8 | * an array. 9 | 10 | * @example 11 | * const translateXandRotateY = compose(translateX, rotateY); 12 | * const cssValue = translateXandRotateY('-5px', '30deg'); 13 | */ 14 | export const compose = 15 | (...funcs: Array) => 16 | (...styleArgs: Array>) => { 17 | const result = funcs.reduce((acc, func, i) => { 18 | const arg = styleArgs[i]; 19 | return `${acc} ${Array.isArray(arg) ? func(...arg) : func(arg)}`; 20 | }, ""); 21 | return result.trim(); 22 | }; 23 | 24 | export const cubicBezier = ( 25 | a: number, 26 | b: number, 27 | c: number, 28 | d: number 29 | ): string => `cubic-bezier(${a}, ${b}, ${c}, ${d})`; 30 | 31 | export const translate3d = (a: CSSValue, b: CSSValue, c: CSSValue): string => 32 | `translate3d(${a}, ${b}, ${c})`; 33 | 34 | export const translateX = (a: CSSValue): string => `translateX(${a})`; 35 | 36 | export const scale3d = (a: number, b: number, c: number): string => 37 | `scale3d(${a}, ${b}, ${c})`; 38 | 39 | export const scale = (a: number) => `scale(${a})`; 40 | 41 | export const skewX = (deg: number): string => `skewX(${deg}deg)`; 42 | 43 | export const skewY = (deg: number): string => `skewY(${deg}deg)`; 44 | 45 | export const skewXY = (x: number, y: number): string => 46 | `${skewX(x)} ${skewY(y)}`; 47 | 48 | export const rotateY = (a: CSSValue) => `rotateY(${a}deg)`; 49 | 50 | export const rotate3d = (a: number, b: number, c: number, d: number): string => 51 | `rotate3d(${a}, ${b}, ${c}, ${d}deg)`; 52 | 53 | export const perspective = (a: CSSValue): string => `perspective(${a})`; 54 | 55 | export const translateY = (a: CSSValue): string => `translateY(${a})`; 56 | 57 | export const translateZ = (a: CSSValue): string => `translateZ(${a})`; 58 | 59 | export const translateXY = (a: CSSValue, b: CSSValue): string => 60 | `translate(${a},${b})`; 61 | 62 | export const rotate = (a: CSSValue): string => `rotate(${a}deg)`; 63 | 64 | export const rotateX = (a: CSSValue) => `rotateX(${a}deg)`; 65 | 66 | export const blur = (a: CSSValue): string => `blur(${a})`; 67 | -------------------------------------------------------------------------------- /src/utils/types.ts: -------------------------------------------------------------------------------- 1 | export type CSSValue = string | number; 2 | 3 | export type Keyframe = { 4 | [property: string]: CSSValue; 5 | }; 6 | 7 | export type Animation = { 8 | [keyframe: string]: Keyframe; 9 | }; 10 | -------------------------------------------------------------------------------- /test/utils/index.test.ts: -------------------------------------------------------------------------------- 1 | import { 2 | compose, 3 | cubicBezier, 4 | translate3d, 5 | translateX, 6 | scale3d, 7 | scale, 8 | skewX, 9 | skewY, 10 | skewXY, 11 | rotateY, 12 | rotate3d, 13 | perspective, 14 | translateY, 15 | translateZ, 16 | translateXY, 17 | rotate, 18 | rotateX, 19 | blur, 20 | } from "../../src/utils"; 21 | 22 | describe("utils", () => { 23 | test("cubicBezier", () => { 24 | expect(cubicBezier(1, 2, 3, 4)).toEqual("cubic-bezier(1, 2, 3, 4)"); 25 | }); 26 | 27 | test("translate3d", () => { 28 | expect(translate3d(1, 2, 3)).toEqual("translate3d(1, 2, 3)"); 29 | }); 30 | 31 | test("translateX", () => { 32 | expect(translateX("-5px")).toEqual("translateX(-5px)"); 33 | }); 34 | 35 | test("scale3d", () => { 36 | expect(scale3d(1, 2, 3)).toEqual("scale3d(1, 2, 3)"); 37 | }); 38 | 39 | test("scale", () => { 40 | expect(scale(1)).toEqual("scale(1)"); 41 | }); 42 | 43 | test("skewX", () => { 44 | expect(skewX(1)).toEqual("skewX(1deg)"); 45 | }); 46 | 47 | test("skewY", () => { 48 | expect(skewY(1)).toEqual("skewY(1deg)"); 49 | }); 50 | 51 | test("skewXY", () => { 52 | expect(skewXY(1, 2)).toEqual("skewX(1deg) skewY(2deg)"); 53 | }); 54 | 55 | test("rotateY", () => { 56 | expect(rotateY(1)).toEqual("rotateY(1deg)"); 57 | }); 58 | 59 | test("rotate3d", () => { 60 | expect(rotate3d(1, 2, 3, 4)).toEqual("rotate3d(1, 2, 3, 4deg)"); 61 | }); 62 | 63 | test("perspective", () => { 64 | expect(perspective(1)).toEqual("perspective(1)"); 65 | }); 66 | 67 | test("translateY", () => { 68 | expect(translateY(1)).toEqual("translateY(1)"); 69 | }); 70 | 71 | test("translateZ", () => { 72 | expect(translateZ(1)).toEqual("translateZ(1)"); 73 | }); 74 | 75 | test("translateXY", () => { 76 | expect(translateXY(1, 2)).toEqual("translate(1,2)"); 77 | }); 78 | 79 | test("rotate", () => { 80 | expect(rotate(1)).toEqual("rotate(1deg)"); 81 | }); 82 | 83 | test("rotateX", () => { 84 | expect(rotateX(1)).toEqual("rotateX(1deg)"); 85 | }); 86 | 87 | test("blur", () => { 88 | expect(blur(1)).toEqual("blur(1)"); 89 | }); 90 | 91 | test("compose", () => { 92 | const translateXandRotateY = compose(translateX, rotateY); 93 | const cssValue = translateXandRotateY("-5px", "30"); 94 | expect(cssValue).toEqual("translateX(-5px) rotateY(30deg)"); 95 | }); 96 | }); 97 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "moduleResolution": "Node", 4 | // leave other options without changes 5 | "module": "es2015", // "es2015" makes Typescript compiler output compatible with Rollup 6 | "declaration": true, // generates .d.ts files inside the output directory 7 | // remaining options 8 | }, 9 | "include": [ 10 | "src/**/*" 11 | ] // Only files from ./src/ directory will be processed and generated folder structure will be relative to ./src/ 12 | } --------------------------------------------------------------------------------