├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── preview-1.gif ├── preview-2.gif ├── src ├── PageTransition.tsx ├── PageTransitionGroup.ts ├── PageTransitionWrapper.ts ├── animations.ts ├── createAnimationStyles.ts ├── index.ts └── presets.ts └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | /dist 2 | /build 3 | /node_modules 4 | .DS_STORE -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true 3 | } 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2020 Steve Meredith 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.md: -------------------------------------------------------------------------------- 1 | Abandoned License 2 | 3 | **IMPORTANT: This project doesn't support newer versions of React or React Router and is for now considered abandoned. Please see: https://github.com/Steveeeie/react-page-transition/issues/33** 4 | 5 | # React Page Transition 6 | 7 | ⚛️💨 A React component that makes it easy to use the page transitions from the Codedrops Page Transitions Demo [See Original](https://tympanus.net/Development/PageTransitions/). 8 | 9 | ### [View Basic Demo](https://codesandbox.io/s/basic-react-page-transition-demo-rk0uv) 10 | 11 | ### [View Advanced Demo](https://codesandbox.io/s/advanced-react-page-transition-demo-z8hmd) 12 | 13 | ### [View TypeScript Demo](https://codesandbox.io/s/advanced-react-page-transition-demo-typescript-nb4lzk) 14 | 15 | --- 16 | 17 |

18 | preview
19 | preview 20 |

21 | 22 | --- 23 | 24 | ## Usage with `react-router` 25 | 26 | ### 1. Install Package 27 | 28 | `npm install @steveeeie/react-page-transition` 29 | 30 | or 31 | 32 | `yarn add @steveeeie/react-page-transition` 33 | 34 | --- 35 | 36 | ### 2. Install Dependencies 37 | 38 | `npm install react-router react-router-dom react-transition-group styled-components` 39 | 40 | or 41 | 42 | `yarn add react-router react-router-dom react-transition-group styled-components` 43 | 44 | --- 45 | 46 | ### 3. Code Example 47 | 48 | #### App.js 49 | 50 | ```jsx 51 | import React from 'react'; 52 | import { BrowserRouter, Switch, Route, Link } from 'react-router-dom'; 53 | import { PageTransition } from '@steveeeie/react-page-transition'; 54 | import './styles.css'; 55 | 56 | const Links = () => ( 57 | <> 58 | Home 59 | About 60 | 61 | ); 62 | 63 | const Home = props =>

Home

; 64 | 65 | const About = props =>

About

; 66 | 67 | export default function App() { 68 | return ( 69 | 70 | 71 | { 73 | return ( 74 | 78 | 79 | 80 | 81 | 82 | 83 | ); 84 | }} 85 | /> 86 | 87 | ); 88 | } 89 | ``` 90 | 91 | Wrap your routes inside the `PageTransition` component and pass one of the preset names to the `preset` prop. [View the advanced demo](https://codesandbox.io/s/advanced-react-page-transition-demo-z8hmd) for the full list of presets. 92 | 93 | You will also need to pass the current `location.path` to the `transitionKey` prop, this is so that the internal `TransitionGroup` can track which components are entering and exiting. 94 | 95 | --- 96 | 97 | #### styles.css 98 | 99 | ```css 100 | html, 101 | body, 102 | #root { 103 | height: 100%; 104 | } 105 | ``` 106 | 107 | `PageTransition` is styled with `height: 100%`. The parent containers need to be given a height for it to render correctly because of this. 108 | 109 | --- 110 | 111 | ## Props 112 | 113 | | Prop | Required | Type | Description | 114 | | ---------------- | -------- | ----------------- | ------------------------------------------------------------------- | 115 | | `preset` | No | String | Sets the enter and exit animations \* | 116 | | `enterAnimation` | No | String | Sets the enter animation \* | 117 | | `exitAnimation` | No | String | Sets the exit animation \* | 118 | | `transitionKey` | Yes | Unique Identifier | Used internally to track which components are entering and exiting. | 119 | 120 | ##### \* [View the advanced demo](https://codesandbox.io/s/advanced-react-page-transition-demo-z8hmd) for the full list of presets and animations. 121 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@steveeeie/react-page-transition", 3 | "version": "1.3.0", 4 | "description": "A React component that makes it easy to implement the page transitions from the Codedrops page transitions demo", 5 | "author": "Steve Meredith (http://stevemeredith.com/)", 6 | "main": "./dist/cjs/index.js", 7 | "module": "./dist/esm/index.js", 8 | "types": "./dist/esm/index.d.ts", 9 | "files": [ 10 | "/dist" 11 | ], 12 | "license": "MIT", 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/Steveeeie/react-page-transitions.git" 16 | }, 17 | "keywords": [ 18 | "react", 19 | "react-transition-group", 20 | "animations", 21 | "transitions", 22 | "codedrops" 23 | ], 24 | "bugs": { 25 | "url": "https://github.com/Steveeeie/react-page-transitions/issues" 26 | }, 27 | "homepage": "https://github.com/Steveeeie/react-page-transitions#readme", 28 | "peerDependencies": { 29 | "react": ">= 16.8.0", 30 | "react-dom": ">= 16.8.0", 31 | "react-transition-group": ">= 4.2.0", 32 | "styled-components": ">= 4.3.0" 33 | }, 34 | "devDependencies": { 35 | "@types/react": "^18.0.9", 36 | "@types/react-dom": "^18.0.3", 37 | "@types/react-transition-group": "^4.4.4", 38 | "@types/styled-components": "^5.1.25", 39 | "prettier": "^1.19.1", 40 | "react": "^18.1.0", 41 | "react-dom": "^18.1.0", 42 | "react-transition-group": "^4.4.2", 43 | "styled-components": "^5.3.5", 44 | "typescript": "^4.6.4", 45 | "csstype": "^3.0.11" 46 | }, 47 | "scripts": { 48 | "build": "npm run build:esm && npm run build:cjs", 49 | "build:esm": "tsc", 50 | "build:cjs": "tsc --module commonjs --outDir dist/cjs" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /preview-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steveeeie/react-page-transition/9fd8491f96865ddd663d15e0a0c8e200e4ce4d70/preview-1.gif -------------------------------------------------------------------------------- /preview-2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Steveeeie/react-page-transition/9fd8491f96865ddd663d15e0a0c8e200e4ce4d70/preview-2.gif -------------------------------------------------------------------------------- /src/PageTransition.tsx: -------------------------------------------------------------------------------- 1 | import React, { memo } from 'react'; 2 | import { Transition, TransitionGroup } from 'react-transition-group'; 3 | import { animations } from './animations'; 4 | import { presets } from './presets'; 5 | import { PageTransitionGroup } from './PageTransitionGroup'; 6 | import { PageTransitionWrapper } from './PageTransitionWrapper'; 7 | 8 | interface Props { 9 | children: React.ReactNode; 10 | enterAnimation?: string | { name: string; delay: Number; onTop: Boolean }; 11 | exitAnimation?: string | { name: string; delay: Number; onTop: Boolean }; 12 | preset: string; 13 | transitionKey: string; 14 | } 15 | 16 | function PageTransition({ 17 | children, 18 | enterAnimation: enterAnimationOverride, 19 | exitAnimation: exitAnimationOverride, 20 | preset, 21 | transitionKey, 22 | ...rest 23 | }: Props) { 24 | const selectEnterAnimation = () => { 25 | if (enterAnimationOverride) { 26 | if (typeof enterAnimationOverride === 'string') { 27 | return animations[enterAnimationOverride]; 28 | } 29 | return { 30 | ...animations[enterAnimationOverride.name], 31 | delay: enterAnimationOverride.delay, 32 | onTop: enterAnimationOverride.onTop 33 | }; 34 | } 35 | if (preset) { 36 | return { 37 | ...animations[presets[preset].enter.name], 38 | delay: presets[preset].enter.delay, 39 | onTop: presets[preset].enter.onTop 40 | }; 41 | } 42 | return 'rotateSlideIn'; 43 | }; 44 | 45 | const selectExitAnimation = () => { 46 | if (exitAnimationOverride) { 47 | if (typeof exitAnimationOverride === 'string') { 48 | return animations[exitAnimationOverride]; 49 | } 50 | return { 51 | ...animations[exitAnimationOverride.name], 52 | delay: exitAnimationOverride.delay, 53 | onTop: exitAnimationOverride.onTop 54 | }; 55 | } 56 | if (preset) { 57 | return { 58 | ...animations[presets[preset].exit.name], 59 | delay: presets[preset].exit.delay, 60 | onTop: presets[preset].exit.onTop 61 | }; 62 | } 63 | return 'rotateSlideIn'; 64 | }; 65 | 66 | const enterAnimation = selectEnterAnimation(); 67 | const exitAnimation = selectExitAnimation(); 68 | const timeout = Math.max(enterAnimation.duration, exitAnimation.duration); 69 | 70 | return ( 71 | 72 | 73 | 74 | {state => ( 75 | 80 | {children} 81 | 82 | )} 83 | 84 | 85 | 86 | ); 87 | } 88 | 89 | export default memo(PageTransition); 90 | -------------------------------------------------------------------------------- /src/PageTransitionGroup.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const PageTransitionGroup = styled.div` 4 | position: relative; 5 | width: 100%; 6 | height: 100%; 7 | perspective: 1200px; 8 | overflow: hidden; 9 | `; 10 | 11 | export { PageTransitionGroup }; 12 | -------------------------------------------------------------------------------- /src/PageTransitionWrapper.ts: -------------------------------------------------------------------------------- 1 | import styled, { css } from 'styled-components'; 2 | import { TransitionStatus } from 'react-transition-group'; 3 | import { Animation } from './animations'; 4 | import { createAnimationStyles } from './createAnimationStyles'; 5 | 6 | interface Props { 7 | state: TransitionStatus; 8 | enterAnimation: Animation; 9 | exitAnimation: Animation; 10 | } 11 | 12 | const stateMap = { 13 | entering: ({ enterAnimation }: { enterAnimation: Animation }) => { 14 | return css` 15 | ${createAnimationStyles(enterAnimation)}; 16 | `; 17 | }, 18 | exiting: ({ exitAnimation }: { exitAnimation: Animation }) => { 19 | return css` 20 | ${createAnimationStyles(exitAnimation)}; 21 | `; 22 | } 23 | }; 24 | 25 | const PageTransitionWrapper = styled.div` 26 | backface-visibility: hidden; 27 | height: 100%; 28 | left: 0; 29 | overflow: hidden; 30 | position: absolute; 31 | top: 0; 32 | transform-style: preserve-3d; 33 | transform: translate3d(0, 0, 0); 34 | width: 100%; 35 | will-change: transform; 36 | 37 | ${({ state }) => stateMap[state]}; 38 | `; 39 | 40 | export { PageTransitionWrapper }; 41 | -------------------------------------------------------------------------------- /src/animations.ts: -------------------------------------------------------------------------------- 1 | import { keyframes, Keyframes } from 'styled-components'; 2 | import { Property } from 'csstype'; 3 | 4 | interface Animation { 5 | keyframes: Keyframes; 6 | duration: number; 7 | timing: string; 8 | fill: Property.Fill; 9 | delay?: Property.AnimationDelay; 10 | origin?: Property.TransformOrigin; 11 | onTop?: boolean; 12 | } 13 | 14 | const animations = { 15 | moveToLeft: { 16 | keyframes: keyframes` 17 | from { } 18 | to { transform: translateX(-100%) rotateZ(0.01deg); } 19 | `, 20 | duration: 600, 21 | timing: 'ease', 22 | fill: 'both' 23 | }, 24 | moveFromLeft: { 25 | keyframes: keyframes` 26 | from { transform: translateX(-100%) rotateZ(0.01deg); } 27 | `, 28 | duration: 600, 29 | timing: 'ease', 30 | fill: 'both' 31 | }, 32 | moveToRight: { 33 | keyframes: keyframes` 34 | from { } 35 | to { transform: translateX(100%) rotateZ(0.01deg); } 36 | `, 37 | duration: 600, 38 | timing: 'ease', 39 | fill: 'both' 40 | }, 41 | moveFromRight: { 42 | keyframes: keyframes` 43 | from { transform: translateX(100%) rotateZ(0.01deg); } 44 | `, 45 | duration: 600, 46 | timing: 'ease', 47 | fill: 'both' 48 | }, 49 | moveToTop: { 50 | keyframes: keyframes` 51 | from { } 52 | to { transform: translateY(-100%) rotateZ(0.01deg); } 53 | `, 54 | duration: 600, 55 | timing: 'ease', 56 | fill: 'both' 57 | }, 58 | moveFromTop: { 59 | keyframes: keyframes` 60 | from { transform: translateY(-100%) rotateZ(0.01deg); } 61 | `, 62 | duration: 600, 63 | timing: 'ease', 64 | fill: 'both' 65 | }, 66 | moveToBottom: { 67 | keyframes: keyframes` 68 | from { } 69 | to { transform: translateY(100%) rotateZ(0.01deg); } 70 | `, 71 | duration: 600, 72 | timing: 'ease', 73 | fill: 'both' 74 | }, 75 | moveFromBottom: { 76 | keyframes: keyframes` 77 | from { transform: translateY(100%) rotateZ(0.01deg); } 78 | `, 79 | duration: 600, 80 | timing: 'ease', 81 | fill: 'both' 82 | }, 83 | fade: { 84 | keyframes: keyframes` 85 | from { } 86 | to { opacity: 0.3; } 87 | `, 88 | duration: 600, 89 | timing: 'ease', 90 | fill: 'both' 91 | }, 92 | moveToLeftFade: { 93 | keyframes: keyframes` 94 | from { } 95 | to { opacity: 0.3; transform: translateX(-100%) rotateZ(0.01deg); } 96 | `, 97 | duration: 700, 98 | timing: 'ease', 99 | fill: 'both' 100 | }, 101 | moveFromLeftFade: { 102 | keyframes: keyframes` 103 | from { opacity: 0.3; transform: translateX(-100%) rotateZ(0.01deg); } 104 | `, 105 | duration: 700, 106 | timing: 'ease', 107 | fill: 'both' 108 | }, 109 | moveToRightFade: { 110 | keyframes: keyframes` 111 | from { } 112 | to { opacity: 0.3; transform: translateX(100%) rotateZ(0.01deg); } 113 | `, 114 | duration: 700, 115 | timing: 'ease', 116 | fill: 'both' 117 | }, 118 | moveFromRightFade: { 119 | keyframes: keyframes` 120 | from { opacity: 0.3; transform: translateX(100%) rotateZ(0.01deg); } 121 | `, 122 | duration: 700, 123 | timing: 'ease', 124 | fill: 'both' 125 | }, 126 | moveToTopFade: { 127 | keyframes: keyframes` 128 | from { } 129 | to { opacity: 0.3; transform: translateY(-100%) rotateZ(0.01deg); } 130 | `, 131 | duration: 600, 132 | timing: 'ease', 133 | fill: 'both' 134 | }, 135 | moveFromTopFade: { 136 | keyframes: keyframes` 137 | from { opacity: 0.3; transform: translateY(-100%) rotateZ(0.01deg); } 138 | `, 139 | duration: 700, 140 | timing: 'ease', 141 | fill: 'both' 142 | }, 143 | moveToBottomFade: { 144 | keyframes: keyframes` 145 | from { } 146 | to { opacity: 0.3; transform: translateY(100%) rotateZ(0.01deg); } 147 | `, 148 | duration: 700, 149 | timing: 'ease', 150 | fill: 'both' 151 | }, 152 | moveFromBottomFade: { 153 | keyframes: keyframes` 154 | from { opacity: 0.3; transform: translateY(100%) rotateZ(0.01deg); } 155 | `, 156 | duration: 700, 157 | timing: 'ease', 158 | fill: 'both' 159 | }, 160 | scaleDown: { 161 | keyframes: keyframes` 162 | from { } 163 | to { opacity: 0; transform: scale(0.8); } 164 | `, 165 | duration: 700, 166 | timing: 'ease', 167 | fill: 'both' 168 | }, 169 | scaleUp: { 170 | keyframes: keyframes` 171 | from { opacity: 0; transform: scale(0.8); } 172 | `, 173 | duration: 700, 174 | timing: 'ease', 175 | fill: 'both' 176 | }, 177 | scaleUpDown: { 178 | keyframes: keyframes` 179 | from { opacity: 0; transform: scale(1.2); } 180 | `, 181 | duration: 500, 182 | timing: 'ease', 183 | fill: 'both' 184 | }, 185 | scaleDownUp: { 186 | keyframes: keyframes` 187 | from { } 188 | to { opacity: 0; transform: scale(1.2); } 189 | `, 190 | duration: 500, 191 | timing: 'ease', 192 | fill: 'both' 193 | }, 194 | scaleDownCenter: { 195 | keyframes: keyframes` 196 | from { } 197 | to { opacity: 0; transform: scale(0.7); } 198 | `, 199 | duration: 400, 200 | timing: 'ease', 201 | fill: 'both' 202 | }, 203 | scaleUpCenter: { 204 | keyframes: keyframes` 205 | from { opacity: 0; transform: scale(0.7); } 206 | `, 207 | duration: 400, 208 | timing: 'ease', 209 | fill: 'both' 210 | }, 211 | rotateRightSideFirst: { 212 | keyframes: keyframes` 213 | 0% { } 214 | 40% { transform: rotateY(15deg); opacity: 0.8; animation-timing-function: ease-out; } 215 | 100% { transform: scale(0.8) translateZ(-200px); opacity:0; } 216 | `, 217 | duration: 800, 218 | timing: 'ease-in', 219 | fill: 'both', 220 | origin: '0% 50%' 221 | }, 222 | rotateLeftSideFirst: { 223 | keyframes: keyframes` 224 | 0% { } 225 | 40% { transform: rotateY(-15deg); opacity: 0.8; animation-timing-function: ease-out; } 226 | 100% { transform: scale(0.8) translateZ(-200px); opacity:0; } 227 | `, 228 | duration: 800, 229 | timing: 'ease-in', 230 | fill: 'both', 231 | origin: '0% 50%' 232 | }, 233 | rotateTopSideFirst: { 234 | keyframes: keyframes` 235 | 0% { } 236 | 40% { transform: rotateX(15deg); opacity: 0.8; animation-timing-function: ease-out; } 237 | 100% { transform: scale(0.8) translateZ(-200px); opacity:0; } 238 | `, 239 | duration: 800, 240 | timing: 'ease-in', 241 | fill: 'both', 242 | origin: '0% 50%' 243 | }, 244 | rotateBottomSideFirst: { 245 | keyframes: keyframes` 246 | 0% { } 247 | 40% { transform: rotateX(-15deg); opacity: 0.8; animation-timing-function: ease-out; } 248 | 100% {transform: scale(0.8) translateZ(-200px); opacity:0; } 249 | `, 250 | duration: 800, 251 | timing: 'ease-in', 252 | fill: 'both', 253 | origin: '0% 50%' 254 | }, 255 | flipOutRight: { 256 | keyframes: keyframes` 257 | from { } 258 | to { transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; } 259 | `, 260 | duration: 500, 261 | timing: 'ease-in', 262 | fill: 'both', 263 | origin: '50% 50%' 264 | }, 265 | flipInLeft: { 266 | keyframes: keyframes` 267 | from { transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; } 268 | `, 269 | duration: 500, 270 | timing: 'ease-out', 271 | fill: 'both', 272 | origin: '50% 50%' 273 | }, 274 | flipOutLeft: { 275 | keyframes: keyframes` 276 | from { } 277 | to { transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; } 278 | `, 279 | duration: 500, 280 | timing: 'ease-in', 281 | fill: 'both', 282 | origin: '50% 50%' 283 | }, 284 | flipInRight: { 285 | keyframes: keyframes` 286 | from { transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; } 287 | `, 288 | duration: 500, 289 | timing: 'ease-out', 290 | fill: 'both', 291 | origin: '50% 50%' 292 | }, 293 | flipOutTop: { 294 | keyframes: keyframes` 295 | from { } 296 | to { transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; } 297 | `, 298 | duration: 500, 299 | timing: 'ease-in', 300 | fill: 'both', 301 | origin: '50% 50%' 302 | }, 303 | flipInBottom: { 304 | keyframes: keyframes` 305 | from { transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; } 306 | `, 307 | duration: 500, 308 | timing: 'ease-out', 309 | fill: 'both', 310 | origin: '50% 50%' 311 | }, 312 | flipOutBottom: { 313 | keyframes: keyframes` 314 | from { } 315 | to { transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; } 316 | `, 317 | duration: 500, 318 | timing: 'ease-in', 319 | fill: 'both', 320 | origin: '50% 50%' 321 | }, 322 | flipInTop: { 323 | keyframes: keyframes` 324 | from { transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; } 325 | `, 326 | duration: 500, 327 | timing: 'ease-out', 328 | fill: 'both', 329 | origin: '50% 50%' 330 | }, 331 | rotateFall: { 332 | keyframes: keyframes` 333 | 0% { transform: rotateZ(0deg); } 334 | 20% { transform: rotateZ(10deg); animation-timing-function: ease-out; } 335 | 40% { transform: rotateZ(17deg); } 336 | 60% { transform: rotateZ(16deg); } 337 | 100% { transform: translateY(100%) rotateZ(17deg); } 338 | `, 339 | duration: 1000, 340 | timing: 'ease-in', 341 | fill: 'both', 342 | origin: '0% 0%' 343 | }, 344 | rotateOutNewspaper: { 345 | keyframes: keyframes` 346 | from { } 347 | to { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; } 348 | `, 349 | duration: 500, 350 | timing: 'ease-in', 351 | fill: 'both', 352 | origin: '50% 50%' 353 | }, 354 | rotateInNewspaper: { 355 | keyframes: keyframes` 356 | from { transform: translateZ(-3000px) rotateZ(-360deg); opacity: 0; } 357 | `, 358 | duration: 500, 359 | timing: 'ease-out', 360 | fill: 'both', 361 | origin: '50% 50%' 362 | }, 363 | rotatePushLeft: { 364 | keyframes: keyframes` 365 | from { } 366 | to { opacity: 0; transform: rotateY(90deg); } 367 | `, 368 | duration: 800, 369 | timing: 'ease', 370 | fill: 'both', 371 | origin: '0% 50%' 372 | }, 373 | rotatePushRight: { 374 | keyframes: keyframes` 375 | from { } 376 | to { opacity: 0; transform: rotateY(-90deg); } 377 | `, 378 | duration: 800, 379 | timing: 'ease', 380 | fill: 'both', 381 | origin: '100% 50%' 382 | }, 383 | rotatePushTop: { 384 | keyframes: keyframes` 385 | from { } 386 | to { opacity: 0; transform: rotateX(-90deg); } 387 | `, 388 | duration: 800, 389 | timing: 'ease', 390 | fill: 'both', 391 | origin: '50% 0%' 392 | }, 393 | rotatePushBottom: { 394 | keyframes: keyframes` 395 | from { } 396 | to { opacity: 0; transform: rotateX(90deg); } 397 | `, 398 | duration: 800, 399 | timing: 'ease', 400 | fill: 'both', 401 | origin: '50% 100%' 402 | }, 403 | rotatePullRight: { 404 | keyframes: keyframes` 405 | from { opacity: 0; transform: rotateY(-90deg); } 406 | `, 407 | duration: 500, 408 | timing: 'ease', 409 | fill: 'both', 410 | origin: '100% 50%' 411 | }, 412 | rotatePullLeft: { 413 | keyframes: keyframes` 414 | from { opacity: 0; transform: rotateY(90deg); } 415 | `, 416 | duration: 500, 417 | timing: 'ease', 418 | fill: 'both', 419 | origin: '0% 50%' 420 | }, 421 | rotatePullTop: { 422 | keyframes: keyframes` 423 | from { opacity: 0; transform: rotateX(-90deg); } 424 | `, 425 | duration: 500, 426 | timing: 'ease', 427 | fill: 'both', 428 | origin: '50% 0%' 429 | }, 430 | rotatePullBottom: { 431 | keyframes: keyframes` 432 | from { opacity: 0; transform: rotateX(90deg); } 433 | `, 434 | duration: 500, 435 | timing: 'ease', 436 | fill: 'both', 437 | origin: '50% 100%' 438 | }, 439 | rotateFoldRight: { 440 | keyframes: keyframes` 441 | from { } 442 | to { opacity: 0; transform: translateX(100%) rotateY(90deg); } 443 | `, 444 | duration: 700, 445 | timing: 'ease', 446 | fill: 'both', 447 | origin: '0% 50%' 448 | }, 449 | rotateFoldLeft: { 450 | keyframes: keyframes` 451 | from { } 452 | to { opacity: 0; transform: translateX(-100%) rotateY(-90deg); } 453 | `, 454 | duration: 700, 455 | timing: 'ease', 456 | fill: 'both', 457 | origin: '100% 50%' 458 | }, 459 | rotateFoldTop: { 460 | keyframes: keyframes` 461 | from { } 462 | to { opacity: 0; transform: translateY(-100%) rotateX(90deg); } 463 | `, 464 | duration: 700, 465 | timing: 'ease', 466 | fill: 'both', 467 | origin: '50% 100%' 468 | }, 469 | rotateFoldBottom: { 470 | keyframes: keyframes` 471 | from { } 472 | to { opacity: 0; transform: translateY(100%) rotateX(-90deg); } 473 | `, 474 | duration: 700, 475 | timing: 'ease', 476 | fill: 'both', 477 | origin: '50% 0%' 478 | }, 479 | rotateUnfoldLeft: { 480 | keyframes: keyframes` 481 | from { opacity: 0; transform: translateX(-100%) rotateY(-90deg); } 482 | `, 483 | duration: 700, 484 | timing: 'ease', 485 | fill: 'both', 486 | origin: '100% 50%' 487 | }, 488 | rotateUnfoldRight: { 489 | keyframes: keyframes` 490 | from { opacity: 0; transform: translateX(100%) rotateY(90deg); } 491 | `, 492 | duration: 700, 493 | timing: 'ease', 494 | fill: 'both', 495 | origin: '0% 50%' 496 | }, 497 | rotateUnfoldTop: { 498 | keyframes: keyframes` 499 | from { opacity: 0; transform: translateY(-100%) rotateX(90deg); } 500 | `, 501 | duration: 700, 502 | timing: 'ease', 503 | fill: 'both', 504 | origin: '50% 100%' 505 | }, 506 | rotateUnfoldBottom: { 507 | keyframes: keyframes` 508 | from { opacity: 0; transform: translateY(100%) rotateX(-90deg); } 509 | `, 510 | duration: 700, 511 | timing: 'ease', 512 | fill: 'both', 513 | origin: '50% 0%' 514 | }, 515 | rotateRoomLeftOut: { 516 | keyframes: keyframes` 517 | from { } 518 | to { opacity: 0.3; transform: translateX(-100%) rotateY(90deg); } 519 | `, 520 | duration: 800, 521 | timing: 'ease', 522 | fill: 'both', 523 | origin: '100% 50%' 524 | }, 525 | rotateRoomLeftIn: { 526 | keyframes: keyframes` 527 | from { opacity: 0.3; transform: translateX(100%) rotateY(-90deg); } 528 | `, 529 | duration: 800, 530 | timing: 'ease', 531 | fill: 'both', 532 | origin: '0% 50%' 533 | }, 534 | rotateRoomRightOut: { 535 | keyframes: keyframes` 536 | from { } 537 | to { opacity: 0.3; transform: translateX(100%) rotateY(-90deg); } 538 | `, 539 | duration: 800, 540 | timing: 'ease', 541 | fill: 'both', 542 | origin: '0% 50%' 543 | }, 544 | rotateRoomRightIn: { 545 | keyframes: keyframes` 546 | from { opacity: 0.3; transform: translateX(-100%) rotateY(90deg); } 547 | `, 548 | duration: 800, 549 | timing: 'ease', 550 | fill: 'both', 551 | origin: '100% 50%' 552 | }, 553 | rotateRoomTopOut: { 554 | keyframes: keyframes` 555 | from { } 556 | to { opacity: 0.3; transform: translateY(-100%) rotateX(-90deg); } 557 | `, 558 | duration: 800, 559 | timing: 'ease', 560 | fill: 'both', 561 | origin: '50% 100%' 562 | }, 563 | rotateRoomTopIn: { 564 | keyframes: keyframes` 565 | from { opacity: 0.3; transform: translateY(100%) rotateX(90deg); } 566 | `, 567 | duration: 800, 568 | timing: 'ease', 569 | fill: 'both', 570 | origin: '50% 0%' 571 | }, 572 | rotateRoomBottomOut: { 573 | keyframes: keyframes` 574 | from { } 575 | to { opacity: 0.3; transform: translateY(100%) rotateX(90deg); } 576 | `, 577 | duration: 800, 578 | timing: 'ease', 579 | fill: 'both', 580 | origin: '50% 0%' 581 | }, 582 | rotateRoomBottomIn: { 583 | keyframes: keyframes` 584 | from { opacity: 0.3; transform: translateY(-100%) rotateX(-90deg); } 585 | `, 586 | duration: 800, 587 | timing: 'ease', 588 | fill: 'both', 589 | origin: '50% 100%' 590 | }, 591 | rotateCubeLeftOut: { 592 | keyframes: keyframes` 593 | 0% { } 594 | 50% { animation-timing-function: ease-out; transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); } 595 | 100% { opacity: 0.3; transform: translateX(-100%) rotateY(-90deg); } 596 | `, 597 | duration: 600, 598 | timing: 'ease-in', 599 | fill: 'both', 600 | origin: '100% 50%' 601 | }, 602 | rotateCubeLeftIn: { 603 | keyframes: keyframes` 604 | 0% { opacity: 0.3; transform: translateX(100%) rotateY(90deg); } 605 | 50% { animation-timing-function: ease-out; transform: translateX(50%) translateZ(-200px) rotateY(45deg); } 606 | `, 607 | duration: 600, 608 | timing: 'ease-in', 609 | fill: 'both', 610 | origin: '0% 50%' 611 | }, 612 | rotateCubeRightOut: { 613 | keyframes: keyframes` 614 | 0% { } 615 | 50% { animation-timing-function: ease-out; transform: translateX(50%) translateZ(-200px) rotateY(45deg); } 616 | 100% { opacity: 0.3; transform: translateX(100%) rotateY(90deg); } 617 | `, 618 | duration: 600, 619 | timing: 'ease-in', 620 | fill: 'both', 621 | origin: '0% 50%' 622 | }, 623 | rotateCubeRightIn: { 624 | keyframes: keyframes` 625 | 0% { opacity: 0.3; transform: translateX(-100%) rotateY(-90deg); } 626 | 50% { animation-timing-function: ease-out; transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); } 627 | `, 628 | duration: 600, 629 | timing: 'ease-in', 630 | fill: 'both', 631 | origin: '100% 50%' 632 | }, 633 | rotateCubeTopOut: { 634 | keyframes: keyframes` 635 | 0% {} 636 | 50% { animation-timing-function: ease-out; transform: translateY(-50%) translateZ(-200px) rotateX(45deg); } 637 | 100% { opacity: 0.3; transform: translateY(-100%) rotateX(90deg); } 638 | `, 639 | duration: 600, 640 | timing: 'ease-in', 641 | fill: 'both', 642 | origin: '50% 100%' 643 | }, 644 | rotateCubeTopIn: { 645 | keyframes: keyframes` 646 | 0% { opacity: 0.3; transform: translateY(100%) rotateX(-90deg); } 647 | 50% { animation-timing-function: ease-out; transform: translateY(50%) translateZ(-200px) rotateX(-45deg); } 648 | `, 649 | duration: 600, 650 | timing: 'ease-in', 651 | fill: 'both', 652 | origin: '50% 0%' 653 | }, 654 | rotateCubeBottomOut: { 655 | keyframes: keyframes` 656 | 0% { } 657 | 50% { animation-timing-function: ease-out; transform: translateY(50%) translateZ(-200px) rotateX(-45deg); } 658 | 100% { opacity: 0.3; -webkit-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg); } 659 | `, 660 | duration: 600, 661 | timing: 'ease-in', 662 | fill: 'both', 663 | origin: '50% 0%' 664 | }, 665 | rotateCubeBottomIn: { 666 | keyframes: keyframes` 667 | 0% { opacity: 0.3; -webkit-transform: translateY(-100%) rotateX(90deg); transform: translateY(-100%) rotateX(90deg); } 668 | 50% { animation-timing-function: ease-out; transform: translateY(-50%) translateZ(-200px) rotateX(45deg); } 669 | `, 670 | duration: 600, 671 | timing: 'ease-in', 672 | fill: 'both', 673 | origin: '50% 100%' 674 | }, 675 | rotateCarouselLeftOut: { 676 | keyframes: keyframes` 677 | from { } 678 | to { opacity: 0.3; transform: translateX(-150%) scale(0.4) rotateY(-65deg); } 679 | `, 680 | duration: 800, 681 | timing: 'ease', 682 | fill: 'both', 683 | origin: '100% 50%' 684 | }, 685 | rotateCarouselLeftIn: { 686 | keyframes: keyframes` 687 | from { opacity: 0.3; transform: translateX(200%) scale(0.4) rotateY(65deg); } 688 | `, 689 | duration: 800, 690 | timing: 'ease', 691 | fill: 'both', 692 | origin: '0% 50%' 693 | }, 694 | rotateCarouselRightOut: { 695 | keyframes: keyframes` 696 | from { } 697 | to { opacity: 0.3; transform: translateX(200%) scale(0.4) rotateY(65deg); } 698 | `, 699 | duration: 800, 700 | timing: 'ease', 701 | fill: 'both', 702 | origin: '0% 50%' 703 | }, 704 | rotateCarouselRightIn: { 705 | keyframes: keyframes` 706 | from { opacity: 0.3; transform: translateX(-200%) scale(0.4) rotateY(-65deg); } 707 | `, 708 | duration: 800, 709 | timing: 'ease', 710 | fill: 'both', 711 | origin: '100% 50%' 712 | }, 713 | rotateCarouselTopOut: { 714 | keyframes: keyframes` 715 | from { } 716 | to { opacity: 0.3; transform: translateY(-200%) scale(0.4) rotateX(65deg); } 717 | `, 718 | duration: 800, 719 | timing: 'ease', 720 | fill: 'both', 721 | origin: '50% 100%' 722 | }, 723 | rotateCarouselTopIn: { 724 | keyframes: keyframes` 725 | from { opacity: 0.3; transform: translateY(200%) scale(0.4) rotateX(-65deg); } 726 | `, 727 | duration: 800, 728 | timing: 'ease', 729 | fill: 'both', 730 | origin: '50% 0%' 731 | }, 732 | rotateCarouselBottomOut: { 733 | keyframes: keyframes` 734 | from { } 735 | to { opacity: 0.3; transform: translateY(200%) scale(0.4) rotateX(-65deg); } 736 | `, 737 | duration: 800, 738 | timing: 'ease', 739 | fill: 'both', 740 | origin: '50% 0%' 741 | }, 742 | rotateCarouselBottomIn: { 743 | keyframes: keyframes` 744 | from { opacity: 0.3; transform: translateY(-200%) scale(0.4) rotateX(65deg); } 745 | `, 746 | duration: 800, 747 | timing: 'ease', 748 | fill: 'both', 749 | origin: '50% 100%' 750 | }, 751 | rotateSidesOut: { 752 | keyframes: keyframes` 753 | from { } 754 | to { opacity: 0; transform: translateZ(-500px) rotateY(90deg); } 755 | `, 756 | duration: 500, 757 | timing: 'ease-in', 758 | fill: 'both', 759 | origin: '-50% 50%' 760 | }, 761 | rotateSidesIn: { 762 | keyframes: keyframes` 763 | from { opacity: 0; transform: translateZ(-500px) rotateY(-90deg); } 764 | `, 765 | duration: 500, 766 | timing: 'ease-in', 767 | fill: 'both', 768 | origin: '150% 50%' 769 | }, 770 | rotateSlideOut: { 771 | keyframes: keyframes` 772 | 0% { } 773 | 25% { opacity: 0.5; transform: translateZ(-500px); } 774 | 75% { opacity: 0.5; transform: translateZ(-500px) translateX(-200%); } 775 | 100% { opacity: 0.5; transform: translateZ(-500px) translateX(-200%); } 776 | `, 777 | duration: 1000, 778 | timing: 'ease', 779 | fill: 'both' 780 | }, 781 | rotateSlideIn: { 782 | keyframes: keyframes` 783 | 0%, 25% { opacity: 0.5; transform: translateZ(-500px) translateX(200%); } 784 | 75% { opacity: 0.5; transform: translateZ(-500px); } 785 | 100% { opacity: 1; transform: translateZ(0) translateX(0); } 786 | `, 787 | duration: 1000, 788 | timing: 'ease', 789 | fill: 'both' 790 | } 791 | }; 792 | 793 | export { animations, Animation }; 794 | -------------------------------------------------------------------------------- /src/createAnimationStyles.ts: -------------------------------------------------------------------------------- 1 | import { css } from 'styled-components'; 2 | import { Animation } from './animations'; 3 | 4 | const createAnimationStyles = ({ 5 | keyframes, 6 | delay, 7 | duration, 8 | timing, 9 | fill, 10 | origin, 11 | onTop 12 | }: Animation) => css` 13 | animation-name: ${keyframes}; 14 | animation-delay: ${delay}; 15 | animation-duration: ${duration}ms; 16 | animation-timing-function: ${timing}; 17 | animation-fill-mode: ${fill}; 18 | transform-origin: ${origin || '50% 50%'}; 19 | 20 | ${onTop && 21 | css` 22 | z-index: 1; 23 | `} 24 | `; 25 | 26 | export { createAnimationStyles }; 27 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export { default as PageTransition } from './PageTransition'; 2 | export { animations } from './animations'; 3 | export { presets } from './presets'; 4 | -------------------------------------------------------------------------------- /src/presets.ts: -------------------------------------------------------------------------------- 1 | export const presets = { 2 | moveToLeftFromRight: { 3 | exit: { 4 | name: 'moveToLeft' 5 | }, 6 | enter: { 7 | name: 'moveFromRight' 8 | } 9 | }, 10 | moveToRightFromLeft: { 11 | exit: { 12 | name: 'moveToRight' 13 | }, 14 | enter: { 15 | name: 'moveFromLeft' 16 | } 17 | }, 18 | moveToTopFromBottom: { 19 | exit: { 20 | name: 'moveToTop' 21 | }, 22 | enter: { 23 | name: 'moveFromBottom' 24 | } 25 | }, 26 | moveToBottomFromTop: { 27 | exit: { 28 | name: 'moveToBottom' 29 | }, 30 | enter: { 31 | name: 'moveFromTop' 32 | } 33 | }, 34 | fadeFromRight: { 35 | exit: { 36 | name: 'fade' 37 | }, 38 | enter: { 39 | name: 'moveFromRight', 40 | onTop: true 41 | } 42 | }, 43 | fadeFromLeft: { 44 | exit: { 45 | name: 'fade' 46 | }, 47 | enter: { 48 | name: 'moveFromLeft', 49 | onTop: true 50 | } 51 | }, 52 | fadeFromBottom: { 53 | exit: { 54 | name: 'fade' 55 | }, 56 | enter: { 57 | name: 'moveFromBottom', 58 | onTop: true 59 | } 60 | }, 61 | fadeFromTop: { 62 | exit: { 63 | name: 'fade' 64 | }, 65 | enter: { 66 | name: 'moveFromTop', 67 | onTop: true 68 | } 69 | }, 70 | fadeLeftFadeRight: { 71 | exit: { 72 | name: 'moveToLeftFade' 73 | }, 74 | enter: { 75 | name: 'moveFromRightFade' 76 | } 77 | }, 78 | fadeRightFadeLeft: { 79 | exit: { 80 | name: 'moveToRightFade' 81 | }, 82 | enter: { 83 | name: 'moveFromLeftFade' 84 | } 85 | }, 86 | fadeTopFadeBottom: { 87 | exit: { 88 | name: 'moveToTopFade' 89 | }, 90 | enter: { 91 | name: 'moveFromBottomFade' 92 | } 93 | }, 94 | fadeBottomFadeTop: { 95 | exit: { 96 | name: 'moveToBottomFade' 97 | }, 98 | enter: { 99 | name: 'moveFromTopFade' 100 | } 101 | }, 102 | scaleDownFromRight: { 103 | exit: { 104 | name: 'scaleDown' 105 | }, 106 | enter: { 107 | name: 'moveFromRight', 108 | onTop: true 109 | } 110 | }, 111 | scaleDownFromLeft: { 112 | exit: { 113 | name: 'scaleDown' 114 | }, 115 | enter: { 116 | name: 'moveFromLeft', 117 | onTop: true 118 | } 119 | }, 120 | scaleDownFromBottom: { 121 | exit: { 122 | name: 'scaleDown' 123 | }, 124 | enter: { 125 | name: 'moveFromBottom', 126 | onTop: true 127 | } 128 | }, 129 | scaleDownFromTop: { 130 | exit: { 131 | name: 'scaleDown' 132 | }, 133 | enter: { 134 | name: 'moveFromTop', 135 | onTop: true 136 | } 137 | }, 138 | scaleDownScaleDown: { 139 | exit: { 140 | name: 'scaleDown' 141 | }, 142 | enter: { 143 | name: 'scaleUpDown', 144 | delay: 300 145 | } 146 | }, 147 | scaleUpScaleUp: { 148 | exit: { 149 | name: 'scaleDownUp' 150 | }, 151 | enter: { 152 | name: 'scaleUp', 153 | delay: 300 154 | } 155 | }, 156 | moveToLeftScaleUp: { 157 | exit: { 158 | name: 'moveToLeft', 159 | onTop: true 160 | }, 161 | enter: { 162 | name: 'scaleUp' 163 | } 164 | }, 165 | moveToRightScaleUp: { 166 | exit: { 167 | name: 'moveToRight', 168 | onTop: true 169 | }, 170 | enter: { 171 | name: 'scaleUp' 172 | } 173 | }, 174 | moveToTopScaleUp: { 175 | exit: { 176 | name: 'moveToTop', 177 | onTop: true 178 | }, 179 | enter: { 180 | name: 'scaleUp' 181 | } 182 | }, 183 | moveToBottomScaleUp: { 184 | exit: { 185 | name: 'moveToBottom', 186 | onTop: true 187 | }, 188 | enter: { 189 | name: 'scaleUp' 190 | } 191 | }, 192 | scaleDownScaleUp: { 193 | exit: { 194 | name: 'scaleDownCenter' 195 | }, 196 | enter: { 197 | name: 'scaleUpCenter', 198 | delay: 400 199 | } 200 | }, 201 | glueLeftFromRight: { 202 | exit: { 203 | name: 'rotateRightSideFirst' 204 | }, 205 | enter: { 206 | name: 'moveFromRight', 207 | delay: 200, 208 | onTop: true 209 | } 210 | }, 211 | glueRightFromLeft: { 212 | exit: { 213 | name: 'rotateLeftSideFirst' 214 | }, 215 | enter: { 216 | name: 'moveFromLeft', 217 | delay: 200, 218 | onTop: true 219 | } 220 | }, 221 | glueBottomFromTop: { 222 | exit: { 223 | name: 'rotateTopSideFirst' 224 | }, 225 | enter: { 226 | name: 'moveFromTop', 227 | delay: 200, 228 | onTop: true 229 | } 230 | }, 231 | glueTopFromBottom: { 232 | exit: { 233 | name: 'rotateBottomSideFirst' 234 | }, 235 | enter: { 236 | name: 'moveFromBottom', 237 | delay: 200, 238 | onTop: true 239 | } 240 | }, 241 | flipRight: { 242 | exit: { 243 | name: 'flipOutRight' 244 | }, 245 | enter: { 246 | name: 'flipInLeft', 247 | delay: 500 248 | } 249 | }, 250 | flipLeft: { 251 | exit: { 252 | name: 'flipOutLeft' 253 | }, 254 | enter: { 255 | name: 'flipInRight', 256 | delay: 500 257 | } 258 | }, 259 | flipTop: { 260 | exit: { 261 | name: 'flipOutTop' 262 | }, 263 | enter: { 264 | name: 'flipInBottom', 265 | delay: 500 266 | } 267 | }, 268 | flipBottom: { 269 | exit: { 270 | name: 'flipOutBottom' 271 | }, 272 | enter: { 273 | name: 'flipInTop', 274 | delay: 500 275 | } 276 | }, 277 | fall: { 278 | exit: { 279 | name: 'rotateFall', 280 | onTop: true 281 | }, 282 | enter: { 283 | name: 'scaleUp' 284 | } 285 | }, 286 | newspaper: { 287 | exit: { 288 | name: 'rotateOutNewspaper' 289 | }, 290 | enter: { 291 | name: 'rotateInNewspaper', 292 | delay: 500 293 | } 294 | }, 295 | pushLeftFromRight: { 296 | exit: { 297 | name: 'rotatePushLeft' 298 | }, 299 | enter: { 300 | name: 'moveFromRight' 301 | } 302 | }, 303 | pushRightFromLeft: { 304 | exit: { 305 | name: 'rotatePushRight' 306 | }, 307 | enter: { 308 | name: 'moveFromLeft' 309 | } 310 | }, 311 | pushTopFromBottom: { 312 | exit: { 313 | name: 'rotatePushTop' 314 | }, 315 | enter: { 316 | name: 'moveFromBottom' 317 | } 318 | }, 319 | pushBottomFromTop: { 320 | exit: { 321 | name: 'rotatePushBottom' 322 | }, 323 | enter: { 324 | name: 'moveFromTop' 325 | } 326 | }, 327 | pushLeftPullRight: { 328 | exit: { 329 | name: 'rotatePushLeft' 330 | }, 331 | enter: { 332 | name: 'rotatePullRight', 333 | delay: 180 334 | } 335 | }, 336 | pushRightPullLeft: { 337 | exit: { 338 | name: 'rotatePushRight' 339 | }, 340 | enter: { 341 | name: 'rotatePullLeft', 342 | delay: 180 343 | } 344 | }, 345 | pushTopPullBottom: { 346 | exit: { 347 | name: 'rotatePushTop' 348 | }, 349 | enter: { 350 | name: 'rotatePullBottom', 351 | delay: 180 352 | } 353 | }, 354 | pushBottomPullTop: { 355 | exit: { 356 | name: 'rotatePushBottom' 357 | }, 358 | enter: { 359 | name: 'rotatePullTop', 360 | delay: 180 361 | } 362 | }, 363 | foldLeftFromRight: { 364 | exit: { 365 | name: 'rotateFoldLeft' 366 | }, 367 | enter: { 368 | name: 'moveFromRightFade' 369 | } 370 | }, 371 | foldRightFromLeft: { 372 | exit: { 373 | name: 'rotateFoldRight' 374 | }, 375 | enter: { 376 | name: 'moveFromLeftFade' 377 | } 378 | }, 379 | foldTopFromBottom: { 380 | exit: { 381 | name: 'rotateFoldTop' 382 | }, 383 | enter: { 384 | name: 'moveFromBottomFade' 385 | } 386 | }, 387 | foldBottomFromTop: { 388 | exit: { 389 | name: 'rotateFoldBottom' 390 | }, 391 | enter: { 392 | name: 'moveFromTopFade' 393 | } 394 | }, 395 | moveToRightUnfoldLeft: { 396 | exit: { 397 | name: 'moveToRightFade' 398 | }, 399 | enter: { 400 | name: 'rotateUnfoldLeft' 401 | } 402 | }, 403 | moveToLeftUnfoldRight: { 404 | exit: { 405 | name: 'moveToLeftFade' 406 | }, 407 | enter: { 408 | name: 'rotateUnfoldRight' 409 | } 410 | }, 411 | moveToBottomUnfoldTop: { 412 | exit: { 413 | name: 'moveToBottomFade' 414 | }, 415 | enter: { 416 | name: 'rotateUnfoldTop' 417 | } 418 | }, 419 | moveToTopUnfoldBottom: { 420 | exit: { 421 | name: 'moveToTopFade' 422 | }, 423 | enter: { 424 | name: 'rotateUnfoldBottom' 425 | } 426 | }, 427 | roomToLeft: { 428 | exit: { 429 | name: 'rotateRoomLeftOut', 430 | onTop: true 431 | }, 432 | enter: { 433 | name: 'rotateRoomLeftIn' 434 | } 435 | }, 436 | roomToRight: { 437 | exit: { 438 | name: 'rotateRoomRightOut', 439 | onTop: true 440 | }, 441 | enter: { 442 | name: 'rotateRoomRightIn' 443 | } 444 | }, 445 | roomToTop: { 446 | exit: { 447 | name: 'rotateRoomTopOut', 448 | onTop: true 449 | }, 450 | enter: { 451 | name: 'rotateRoomTopIn' 452 | } 453 | }, 454 | roomToBottom: { 455 | exit: { 456 | name: 'rotateRoomBottomOut', 457 | onTop: true 458 | }, 459 | enter: { 460 | name: 'rotateRoomBottomIn' 461 | } 462 | }, 463 | cubeToLeft: { 464 | exit: { 465 | name: 'rotateCubeLeftOut', 466 | onTop: true 467 | }, 468 | enter: { 469 | name: 'rotateCubeLeftIn' 470 | } 471 | }, 472 | cubeToRight: { 473 | exit: { 474 | name: 'rotateCubeRightOut', 475 | onTop: true 476 | }, 477 | enter: { 478 | name: 'rotateCubeRightIn' 479 | } 480 | }, 481 | cubeToTop: { 482 | exit: { 483 | name: 'rotateCubeTopOut', 484 | onTop: true 485 | }, 486 | enter: { 487 | name: 'rotateCubeTopIn' 488 | } 489 | }, 490 | cubeToBottom: { 491 | exit: { 492 | name: 'rotateCubeBottomOut', 493 | onTop: true 494 | }, 495 | enter: { 496 | name: 'rotateCubeBottomIn' 497 | } 498 | }, 499 | carouselToLeft: { 500 | exit: { 501 | name: 'rotateCarouselLeftOut', 502 | onTop: true 503 | }, 504 | enter: { 505 | name: 'rotateCarouselLeftIn' 506 | } 507 | }, 508 | carouselToRight: { 509 | exit: { 510 | name: 'rotateCarouselRightOut', 511 | onTop: true 512 | }, 513 | enter: { 514 | name: 'rotateCarouselRightIn' 515 | } 516 | }, 517 | carouselToTop: { 518 | exit: { 519 | name: 'rotateCarouselTopOut', 520 | onTop: true 521 | }, 522 | enter: { 523 | name: 'rotateCarouselTopIn' 524 | } 525 | }, 526 | carouselToBottom: { 527 | exit: { 528 | name: 'rotateCarouselBottomOut', 529 | onTop: true 530 | }, 531 | enter: { 532 | name: 'rotateCarouselBottomIn' 533 | } 534 | }, 535 | slides: { 536 | exit: { 537 | name: 'rotateSidesOut' 538 | }, 539 | enter: { 540 | name: 'rotateSidesIn', 541 | delay: 200 542 | } 543 | }, 544 | slide: { 545 | exit: { 546 | name: 'rotateSlideOut' 547 | }, 548 | enter: { 549 | name: 'rotateSlideIn' 550 | } 551 | } 552 | }; 553 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "dist/esm", 4 | "module": "esnext", 5 | "target": "es5", 6 | "lib": ["es6", "dom", "es2016", "es2017"], 7 | "jsx": "react", 8 | "declaration": true, 9 | "moduleResolution": "node", 10 | "noUnusedLocals": true, 11 | "noUnusedParameters": true, 12 | "esModuleInterop": true, 13 | "noImplicitReturns": true, 14 | "noImplicitThis": true, 15 | "noImplicitAny": true, 16 | "strictNullChecks": true, 17 | "suppressImplicitAnyIndexErrors": true, 18 | "allowSyntheticDefaultImports": true 19 | }, 20 | "include": ["src"], 21 | "exclude": ["node_modules", "dist"] 22 | } 23 | --------------------------------------------------------------------------------