├── .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 |
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 |
19 |
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 |
--------------------------------------------------------------------------------