85 |
86 | ```
87 | ### as
88 | An element type to render as using the prop `as`.
89 |
90 | ```javascript
91 |
92 |
93 | Hello World
94 |
95 | ```
96 |
97 | outputs
98 |
99 | ```html
100 |
101 | Hello World
102 |
103 | ```
104 |
105 | ### component
106 | A React component to render and apply animation on.
107 |
108 | ```javascript
109 | // App.js
110 |
111 | let App = () => {
112 | return (
113 |
114 | Clay
115 |
116 | );
117 | }
118 | ```
119 |
120 | ```javascript
121 | // Main component
122 |
123 | import React, { Component } from 'react';
124 | import { FadeIn } from 'animate-components';
125 |
126 | import App from './App';
127 |
128 | class Main extends Component {
129 | render () {
130 | return (
131 |
149 | Hello World
150 |
151 | ```
152 |
153 | ## Disappear Component
154 | Performs an animation and unmounts after the last-step (@keyframe).
155 | ```javascript
156 | import { Disappear } from 'animate-components';
157 | import { fadeIn } from 'animate-keyframes';
158 |
159 |
160 | Hello World
161 |
162 | ```
163 | > Note - You can also pass all the [html attributes](https://facebook.github.io/react/docs/dom-elements.html#all-supported-html-attributes) supported by React to both the Merge and Disappear component along with the above props. Check [this](https://github.com/nitin42/animate-components/blob/master/packages/animate-components/examples/App.js) example.
164 |
165 |
166 | ## Delay Component
167 | Delay both the rendering and animations. Detailed info [here](https://github.com/nitin42/animate-components/blob/master/packages/animate-components/examples/delay.js).
168 |
169 |
170 | ## Usage with styled-components
171 | ```javascript
172 |
173 | import { fadeIn } from 'animate-keyframes';
174 |
175 | import styled from 'styled-components';
176 |
177 | const Heading = styled.h1`
178 | display: inline-block;
179 | animation: ${fadeIn} 2s ease-in;
180 | padding: 2rem 3rem;
181 | font-size: 1.2rem;
182 | `;
183 |
184 | ```
185 |
186 | Or if you are using `
204 | Hello World
205 |
206 |
207 | ```
208 |
209 | ## Usage with Aphrodite
210 | ```javascript
211 | import { fadeIn } from 'animate-keyframes';
212 |
213 | import { StyleSheet, css } from 'aphrodite';
214 |
215 | const styles = StyleSheet.create({
216 | Fade: {
217 | animationName: fadeIn,
218 | animationDuration: '1s'
219 | }
220 | });
221 | ```
222 |
223 | ## Usage with glamor
224 | ```javascript
225 | import { fadeIn } from 'animate-keyframes';
226 |
227 | import { css } from 'glamor';
228 |
229 | let rule = css({
230 | display: 'inline-block',
231 | animation: `${fadeIn} 2s ease-in`,
232 | padding: '2rem 3rem',
233 | font-size: '1.2rem'
234 | });
235 | ```
236 |
237 | ## Usage with InfernoJS
238 |
239 | Use Animate Components in [InfernoJS](infernojs.org) with [`ac-inferno`](https://github.com/nitin42/animate-components/tree/master/packages/ac-inferno).
240 |
241 | ## Custom components 💃
242 | If you want to create your own animation components rather than using the built-in ones, `animate-components` also exports a high order function that lets you create your own components with ease (believe me!).
243 |
244 | Example -
245 |
246 | ```javascript
247 | import { hoc } from 'animate-components';
248 |
249 | // Keyframes with styled-components
250 | const rotate360 = keyframes`
251 | from {
252 | transform: rotate(0deg);
253 | }
254 |
255 | to {
256 | transform: rotate(360deg);
257 | }
258 | `;
259 |
260 | // Let's create an animation component
261 | const Rotate = hoc('Rotate', rotate360);
262 |
263 | let App = () => {
264 | return (
265 |
266 | I am rotating!
267 |
268 | );
269 | }
270 | ```
271 |
272 | > Note - `hoc` takes two arguments, Component name and keyframes.
273 |
274 | Now you have all the power!!
275 |
--------------------------------------------------------------------------------
/packages/animate-components/examples/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | import { FadeIn } from 'animate-components';
4 |
5 | // import './some_css.css';
6 |
7 | class App extends Component {
8 | render () {
9 | return (
10 |
11 | Click here to redirect
12 |
13 | );
14 | }
15 | }
16 |
17 | export default App;
18 |
--------------------------------------------------------------------------------
/packages/animate-components/examples/Disappear.js:
--------------------------------------------------------------------------------
1 | import { Disappear } from 'animate-components';
2 | import { fadeIn } from 'animate-keyframes';
3 |
4 | export default class App extends Component {
5 | render () {
6 | return (
7 |
8 | I will disappear after 2s!
9 |
10 | );
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/packages/animate-components/examples/comp.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | let Comp = () => {
4 | return (
5 |
8 | );
9 | }
10 |
11 | export default Comp;
12 |
--------------------------------------------------------------------------------
/packages/animate-components/examples/componentProp.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 |
3 | import { LightOut } from "../index";
4 | import Comp from "./comp";
5 | import "./index.css";
6 |
7 | class App extends Component {
8 | render() {
9 | return (
10 |
11 |
Using `component` prop
12 |
26 |
27 |
29 |
30 | );
31 | }
32 | }
33 |
34 | export default App;
35 |
--------------------------------------------------------------------------------
/packages/animate-components/examples/domNesting.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { FadeIn } from "animate-components";
4 |
5 | // The FadeIn component will ratify the DOM nesting if the child element tag is similar to the one passed to prop `as`
6 | let App = () => {
7 | return (
8 |
9 |
10 | Hello world!
11 |
12 |
13 | );
14 | };
15 |
16 | export default App;
17 |
--------------------------------------------------------------------------------
/packages/animate-components/examples/forceInterpolate.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { FadeIn } from "animate-components";
4 |
5 | let App = () => {
6 | return (
7 |
8 |
13 | Hello world!
14 |
15 |
9 |
13 | Hello world!
14 |
15 |
9 |
14 | Hello world!
15 |
16 |
18 | I love Katherine Langford.
19 |
20 |
21 | );
22 | };
23 |
24 | export default App;
25 |
--------------------------------------------------------------------------------
/packages/animate-components/examples/simple.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { FadeIn } from "animate-components";
4 |
5 | let App = () => {
6 | return (
7 |
8 |
9 | Hello world!
10 |
11 |
>/animate-keyframes_v0.1.0/flow_v0.48.0
3 |
4 | // @flow
5 |
6 | type Keyframe$Rule = string;
7 |
8 | declare module "animate-keyframes" {
9 | declare module.exports: {
10 | bounce: Keyframe$Rule,
11 | bounceDown: Keyframe$Rule,
12 | bounceLeft: Keyframe$Rule,
13 | bounceRight: Keyframe$Rule,
14 | bounceUp: Keyframe$Rule,
15 | fadeIn: Keyframe$Rule,
16 | left: Keyframe$Rule,
17 | down: Keyframe$Rule,
18 | downBig: Keyframe$Rule,
19 | leftBig: Keyframe$Rule,
20 | rightBig: Keyframe$Rule,
21 | right: Keyframe$Rule,
22 | up: Keyframe$Rule,
23 | upBig: Keyframe$Rule,
24 | flip: Keyframe$Rule,
25 | flipX: Keyframe$Rule,
26 | flipY: Keyframe$Rule,
27 | lightIn: Keyframe$Rule,
28 | lightOut: Keyframe$Rule,
29 | rotateIn: Keyframe$Rule,
30 | rotateLeft: Keyframe$Rule,
31 | rotateRight: Keyframe$Rule,
32 | rotateUpLeft: Keyframe$Rule,
33 | rotateUpRight: Keyframe$Rule,
34 | flash: Keyframe$Rule,
35 | rollOut: Keyframe$Rule,
36 | rollIn: Keyframe$Rule,
37 | rubber: Keyframe$Rule,
38 | swing: Keyframe$Rule,
39 | zoom: Keyframe$Rule,
40 | hinge: Keyframe$Rule,
41 | pulse: Keyframe$Rule,
42 | expandUp: Keyframe$Rule,
43 | entrance: Keyframe$Rule,
44 | hatch: Keyframe$Rule,
45 | starWars: Keyframe$Rule,
46 | slideDown: Keyframe$Rule,
47 | slideLeft: Keyframe$Rule,
48 | slideRight: Keyframe$Rule,
49 | slideUp: Keyframe$Rule,
50 | perspectiveDown: Keyframe$Rule,
51 | perspectiveUp: Keyframe$Rule,
52 | perspectiveLeft: Keyframe$Rule,
53 | perspectiveRight: Keyframe$Rule,
54 | puffmein: Keyframe$Rule,
55 | puffmeout: Keyframe$Rule,
56 | vanishout: Keyframe$Rule,
57 | vanishin: Keyframe$Rule,
58 | expanseDown: Keyframe$Rule,
59 | expanseUp: Keyframe$Rule,
60 | expanseLeft: Keyframe$Rule,
61 | expanseRight: Keyframe$Rule
62 | };
63 | }
64 |
--------------------------------------------------------------------------------
/packages/animate-components/flow-typed/npm/element-utils_vx.x.x.js:
--------------------------------------------------------------------------------
1 | // flow-typed signature: 6da0827bce8b391f2c7e8794b1393125
2 | // flow-typed version: <>/element-utils_v0.0.3/flow_v0.48.0
3 |
4 | type Avoid$Nesting = (
5 | elementAs: string,
6 | props: Object,
7 | DisplayName: any
8 | ) => string;
9 |
10 | type Get$Element$Type = (Component: any, props: Object) => string;
11 |
12 | type Render$Function = (
13 | ComposedComponent: any,
14 | props: Object,
15 | state: Object,
16 | rest: any,
17 | DisplayName: any
18 | ) => ?React$Element;
19 |
20 | declare module "element-utils" {
21 | declare module.exports: {
22 | avoidNest: Avoid$Nesting,
23 | getElement: Get$Element$Type,
24 | Render: Render$Function
25 | };
26 | }
27 |
--------------------------------------------------------------------------------
/packages/animate-components/flow-typed/npm/html-tags_vx.x.x.js:
--------------------------------------------------------------------------------
1 | // flow-typed signature: 014496a465c441a5227052e5d219a3fe
2 | // flow-typed version: <>/html-tags_v2.0.0/flow_v0.48.0
3 |
4 | /**
5 | * This is an autogenerated libdef stub for:
6 | *
7 | * 'html-tags'
8 | *
9 | * Fill this stub out by replacing all the `any` types.
10 | *
11 | * Once filled out, we encourage you to share your work with the
12 | * community by sending a pull request to:
13 | * https://github.com/flowtype/flow-typed
14 | */
15 |
16 | declare module 'html-tags' {
17 | declare module.exports: any;
18 | }
19 |
20 | /**
21 | * We include stubs for each file inside this npm package in case you need to
22 | * require those files directly. Feel free to delete any files that aren't
23 | * needed.
24 | */
25 |
26 |
27 | // Filename aliases
28 | declare module 'html-tags/index' {
29 | declare module.exports: $Exports<'html-tags'>;
30 | }
31 | declare module 'html-tags/index.js' {
32 | declare module.exports: $Exports<'html-tags'>;
33 | }
34 |
--------------------------------------------------------------------------------
/packages/animate-components/flow-typed/npm/prop-types_v15.x.x.js:
--------------------------------------------------------------------------------
1 | // flow-typed signature: 3eaa1f24c7397b78a7481992d2cddcb2
2 | // flow-typed version: a1a20d4928/prop-types_v15.x.x/flow_>=v0.41.x
3 |
4 | type $npm$propTypes$ReactPropsCheckType = (
5 | props: any,
6 | propName: string,
7 | componentName: string,
8 | href?: string) => ?Error;
9 |
10 | declare module 'prop-types' {
11 | declare var array: React$PropType$Primitive>;
12 | declare var bool: React$PropType$Primitive;
13 | declare var func: React$PropType$Primitive;
14 | declare var number: React$PropType$Primitive;
15 | declare var object: React$PropType$Primitive;
16 | declare var string: React$PropType$Primitive;
17 | declare var any: React$PropType$Primitive;
18 | declare var arrayOf: React$PropType$ArrayOf;
19 | declare var element: React$PropType$Primitive; /* TODO */
20 | declare var instanceOf: React$PropType$InstanceOf;
21 | declare var node: React$PropType$Primitive; /* TODO */
22 | declare var objectOf: React$PropType$ObjectOf;
23 | declare var oneOf: React$PropType$OneOf;
24 | declare var oneOfType: React$PropType$OneOfType;
25 | declare var shape: React$PropType$Shape;
26 |
27 | declare function checkPropTypes(
28 | propTypes: $Subtype<{[_: $Keys]: $npm$propTypes$ReactPropsCheckType}>,
29 | values: V,
30 | location: string,
31 | componentName: string,
32 | getStack: ?(() => ?string)
33 | ) : void;
34 | }
35 |
--------------------------------------------------------------------------------
/packages/animate-components/flow-typed/npm/styled-components_v2.x.x.js:
--------------------------------------------------------------------------------
1 | // flow-typed signature: 3a2f61dde69e3311cdc6d0f14863a9ef
2 | // flow-typed version: b2ad6292df/styled-components_v2.x.x/flow_>=v0.25.x
3 |
4 | // @flow
5 |
6 | type $npm$styledComponents$Interpolation = ((executionContext: Object) => string) | string | number;
7 | type $npm$styledComponents$NameGenerator = (hash: number) => string
8 |
9 | type $npm$styledComponents$StyledComponent = (
10 | strings: Array,
11 | ...interpolations: Array<$npm$styledComponents$Interpolation>
12 | ) => ReactClass<*>;
13 |
14 |
15 | type $npm$styledComponents$Theme = {[key: string]: mixed};
16 | type $npm$styledComponents$ThemeProviderProps = {
17 | theme: $npm$styledComponents$Theme | ((outerTheme: $npm$styledComponents$Theme) => void)
18 | };
19 | type $npm$styledComponents$Component =
20 | | ReactClass<*>
21 | | (props: *) => React$Element<*>;
22 |
23 | class Npm$StyledComponents$ThemeProvider extends React$Component {
24 | props: $npm$styledComponents$ThemeProviderProps;
25 | }
26 |
27 | type $npm$styledComponents$StyleSheetManagerProps = {
28 | sheet: mixed
29 | }
30 |
31 | class Npm$StyledComponents$StyleSheetManager extends React$Component {
32 | props: $npm$styledComponents$StyleSheetManagerProps;
33 | }
34 |
35 | class Npm$StyledComponents$ServerStyleSheet {
36 | instance: StyleSheet
37 | collectStyles: (children: any) => React$Element<*>
38 | getStyleTags: () => string
39 | getStyleElement: () => React$Element<*>
40 | }
41 |
42 | declare module 'styled-components' {
43 | declare type Interpolation = $npm$styledComponents$Interpolation;
44 | declare type NameGenerator = $npm$styledComponents$NameGenerator;
45 |
46 | declare type StyledComponent = $npm$styledComponents$StyledComponent;
47 |
48 | declare type Theme = $npm$styledComponents$Theme;
49 | declare type ThemeProviderProps = $npm$styledComponents$ThemeProviderProps;
50 | declare type Component = $npm$styledComponents$Component;
51 |
52 | declare module.exports: {
53 | injectGlobal: (strings: Array, ...interpolations: Array) => void,
54 | css: (strings: Array, ...interpolations: Array) => Array,
55 | keyframes: (strings: Array, ...interpolations: Array) => string,
56 | withTheme: (component: Component) => React$Component<*, ThemeProviderProps, *>,
57 | ServerStyleSheet: typeof Npm$StyledComponents$ServerStyleSheet,
58 | StyleSheetManager: typeof Npm$StyledComponents$StyleSheetManager,
59 | ThemeProvider: typeof Npm$StyledComponents$ThemeProvider,
60 | (baseComponent: Component): StyledComponent,
61 | a: StyledComponent,
62 | abbr: StyledComponent,
63 | address: StyledComponent,
64 | area: StyledComponent,
65 | article: StyledComponent,
66 | aside: StyledComponent,
67 | audio: StyledComponent,
68 | b: StyledComponent,
69 | base: StyledComponent,
70 | bdi: StyledComponent,
71 | bdo: StyledComponent,
72 | big: StyledComponent,
73 | blockquote: StyledComponent,
74 | body: StyledComponent,
75 | br: StyledComponent,
76 | button: StyledComponent,
77 | canvas: StyledComponent,
78 | caption: StyledComponent,
79 | cite: StyledComponent,
80 | code: StyledComponent,
81 | col: StyledComponent,
82 | colgroup: StyledComponent,
83 | data: StyledComponent,
84 | datalist: StyledComponent,
85 | dd: StyledComponent,
86 | del: StyledComponent,
87 | details: StyledComponent,
88 | dfn: StyledComponent,
89 | dialog: StyledComponent,
90 | div: StyledComponent,
91 | dl: StyledComponent,
92 | dt: StyledComponent,
93 | em: StyledComponent,
94 | embed: StyledComponent,
95 | fieldset: StyledComponent,
96 | figcaption: StyledComponent,
97 | figure: StyledComponent,
98 | footer: StyledComponent,
99 | form: StyledComponent,
100 | h1: StyledComponent,
101 | h2: StyledComponent,
102 | h3: StyledComponent,
103 | h4: StyledComponent,
104 | h5: StyledComponent,
105 | h6: StyledComponent,
106 | head: StyledComponent,
107 | header: StyledComponent,
108 | hgroup: StyledComponent,
109 | hr: StyledComponent,
110 | html: StyledComponent,
111 | i: StyledComponent,
112 | iframe: StyledComponent,
113 | img: StyledComponent,
114 | input: StyledComponent,
115 | ins: StyledComponent,
116 | kbd: StyledComponent,
117 | keygen: StyledComponent,
118 | label: StyledComponent,
119 | legend: StyledComponent,
120 | li: StyledComponent,
121 | link: StyledComponent,
122 | main: StyledComponent,
123 | map: StyledComponent,
124 | mark: StyledComponent,
125 | menu: StyledComponent,
126 | menuitem: StyledComponent,
127 | meta: StyledComponent,
128 | meter: StyledComponent,
129 | nav: StyledComponent,
130 | noscript: StyledComponent,
131 | object: StyledComponent,
132 | ol: StyledComponent,
133 | optgroup: StyledComponent,
134 | option: StyledComponent,
135 | output: StyledComponent,
136 | p: StyledComponent,
137 | param: StyledComponent,
138 | picture: StyledComponent,
139 | pre: StyledComponent,
140 | progress: StyledComponent,
141 | q: StyledComponent,
142 | rp: StyledComponent,
143 | rt: StyledComponent,
144 | ruby: StyledComponent,
145 | s: StyledComponent,
146 | samp: StyledComponent,
147 | script: StyledComponent,
148 | section: StyledComponent,
149 | select: StyledComponent,
150 | small: StyledComponent,
151 | source: StyledComponent,
152 | span: StyledComponent,
153 | strong: StyledComponent,
154 | style: StyledComponent,
155 | sub: StyledComponent,
156 | summary: StyledComponent,
157 | sup: StyledComponent,
158 | table: StyledComponent,
159 | tbody: StyledComponent,
160 | td: StyledComponent,
161 | textarea: StyledComponent,
162 | tfoot: StyledComponent,
163 | th: StyledComponent,
164 | thead: StyledComponent,
165 | time: StyledComponent,
166 | title: StyledComponent,
167 | tr: StyledComponent,
168 | track: StyledComponent,
169 | u: StyledComponent,
170 | ul: StyledComponent,
171 | var: StyledComponent,
172 | video: StyledComponent,
173 | wbr: StyledComponent,
174 |
175 | // SVG
176 | circle: StyledComponent,
177 | clipPath: StyledComponent,
178 | defs: StyledComponent,
179 | ellipse: StyledComponent,
180 | g: StyledComponent,
181 | image: StyledComponent,
182 | line: StyledComponent,
183 | linearGradient: StyledComponent,
184 | mask: StyledComponent,
185 | path: StyledComponent,
186 | pattern: StyledComponent,
187 | polygon: StyledComponent,
188 | polyline: StyledComponent,
189 | radialGradient: StyledComponent,
190 | rect: StyledComponent,
191 | stop: StyledComponent,
192 | svg: StyledComponent,
193 | text: StyledComponent,
194 | tspan: StyledComponent,
195 | };
196 | }
197 |
198 | declare module 'styled-components/native' {
199 | declare type Interpolation = $npm$styledComponents$Interpolation;
200 | declare type NameGenerator = $npm$styledComponents$NameGenerator;
201 |
202 | declare type StyledComponent = $npm$styledComponents$StyledComponent;
203 |
204 | declare type Theme = $npm$styledComponents$Theme;
205 | declare type ThemeProviderProps = $npm$styledComponents$ThemeProviderProps;
206 | declare type Component = $npm$styledComponents$Component;
207 |
208 | declare module.exports: {
209 | css: (strings: Array, ...interpolations: Array) => Array,
210 | withTheme: (component: Component) => React$Component<*, ThemeProviderProps, *>,
211 | keyframes: (strings: Array, ...interpolations: Array) => string,
212 | ThemeProvider: typeof Npm$StyledComponents$ThemeProvider,
213 |
214 | (baseComponent: Component): StyledComponent,
215 |
216 | ActivityIndicator: StyledComponent,
217 | ActivityIndicatorIOS: StyledComponent,
218 | ART: StyledComponent,
219 | Button: StyledComponent,
220 | DatePickerIOS: StyledComponent,
221 | DrawerLayoutAndroid: StyledComponent,
222 | FlatList: StyledComponent,
223 | Image: StyledComponent,
224 | ImageEditor: StyledComponent,
225 | ImageStore: StyledComponent,
226 | KeyboardAvoidingView: StyledComponent,
227 | ListView: StyledComponent,
228 | MapView: StyledComponent,
229 | Modal: StyledComponent,
230 | Navigator: StyledComponent,
231 | NavigatorIOS: StyledComponent,
232 | Picker: StyledComponent,
233 | PickerIOS: StyledComponent,
234 | ProgressBarAndroid: StyledComponent,
235 | ProgressViewIOS: StyledComponent,
236 | RecyclerViewBackedScrollView: StyledComponent,
237 | RefreshControl: StyledComponent,
238 | ScrollView: StyledComponent,
239 | SectionList: StyledComponent,
240 | SegmentedControlIOS: StyledComponent,
241 | Slider: StyledComponent,
242 | SliderIOS: StyledComponent,
243 | SnapshotViewIOS: StyledComponent,
244 | StatusBar: StyledComponent,
245 | SwipeableListView: StyledComponent,
246 | Switch: StyledComponent,
247 | SwitchAndroid: StyledComponent,
248 | SwitchIOS: StyledComponent,
249 | TabBarIOS: StyledComponent,
250 | Text: StyledComponent,
251 | TextInput: StyledComponent,
252 | ToastAndroid: StyledComponent,
253 | ToolbarAndroid: StyledComponent,
254 | Touchable: StyledComponent,
255 | TouchableHighlight: StyledComponent,
256 | TouchableNativeFeedback: StyledComponent,
257 | TouchableOpacity: StyledComponent,
258 | TouchableWithoutFeedback: StyledComponent,
259 | View: StyledComponent,
260 | ViewPagerAndroid: StyledComponent,
261 | VirtualizedList: StyledComponent,
262 | WebView: StyledComponent,
263 | };
264 | }
265 |
--------------------------------------------------------------------------------
/packages/animate-components/index.js:
--------------------------------------------------------------------------------
1 | import {
2 | flipObj,
3 | specialObj,
4 | slideObj,
5 | rotateObj,
6 | PObj,
7 | lightObj,
8 | fadeObj,
9 | expanseObj,
10 | bounceObj,
11 | bingoObj,
12 | } from './animations/index';
13 | import Merge from './containers/merge';
14 | import Delay from './containers/Delay';
15 | import Disappear from './containers/Disappear';
16 | import hoc from './containers/HOC';
17 |
18 | const { Bounce, BounceUp, BounceRight, BounceLeft, BounceDown } = bounceObj;
19 | const {
20 | FadeIn,
21 | FadeInUp,
22 | FadeInRight,
23 | FadeInLeft,
24 | FadeInDown,
25 | FadeInUpBig,
26 | FadeInRightBig,
27 | FadeInLeftBig,
28 | } = fadeObj;
29 | const { Flip, FlipInX, FlipInY, FlipOutX, FlipOutY } = flipObj;
30 | const { LightOut, LightIn } = lightObj;
31 | const {
32 | RotateIn,
33 | RotateRight,
34 | RotateLeft,
35 | RotateUpRight,
36 | RotateUpLeft,
37 | } = rotateObj;
38 | const {
39 | Flash,
40 | RollOut,
41 | RollIn,
42 | Rubber,
43 | Swing,
44 | Zoom,
45 | Hinge,
46 | Pulse,
47 | ExpandUp,
48 | Entrance,
49 | Hatch,
50 | StarWars,
51 | } = specialObj;
52 | const { SlideUp, SlideRight, SlideLeft, SlideDown } = slideObj;
53 | const { PDown, PUp, PRight, PLeft } = PObj;
54 | const { PuffOut, PuffIn, VanishOut, VanishIn } = bingoObj;
55 | const { ExpanseUp, ExpanseRight, ExpanseDown, ExpanseLeft } = expanseObj;
56 |
57 | /** Animation components */
58 | export {
59 | Bounce,
60 | BounceUp,
61 | BounceRight,
62 | BounceLeft,
63 | BounceDown,
64 | FadeIn,
65 | FadeInUp,
66 | FadeInRight,
67 | FadeInLeft,
68 | FadeInDown,
69 | FadeInUpBig,
70 | FadeInLeftBig,
71 | FadeInRightBig,
72 | Flip,
73 | FlipInX,
74 | FlipInY,
75 | FlipOutX,
76 | FlipOutY,
77 | LightOut,
78 | LightIn,
79 | RotateIn,
80 | RotateRight,
81 | RotateLeft,
82 | RotateUpRight,
83 | RotateUpLeft,
84 | Flash,
85 | RollOut,
86 | RollIn,
87 | Rubber,
88 | Swing,
89 | Zoom,
90 | Hinge,
91 | Pulse,
92 | SlideUp,
93 | SlideDown,
94 | SlideLeft,
95 | SlideRight,
96 | StarWars,
97 | ExpandUp,
98 | Entrance,
99 | Hatch,
100 | PDown,
101 | PUp,
102 | PRight,
103 | PLeft,
104 | PuffIn,
105 | PuffOut,
106 | VanishIn,
107 | VanishOut,
108 | ExpanseLeft,
109 | ExpanseRight,
110 | ExpanseDown,
111 | ExpanseUp,
112 | Merge,
113 | Delay,
114 | Disappear,
115 | hoc,
116 | };
117 |
--------------------------------------------------------------------------------
/packages/animate-components/main.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./dist/animate-components.min.js');
2 |
--------------------------------------------------------------------------------
/packages/animate-components/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "animate-components",
3 | "version": "1.4.6",
4 | "description": "Elemental components for animations in React",
5 | "keywords": [
6 | "react",
7 | "keyframes",
8 | "animate",
9 | "high order component",
10 | "composed components",
11 | "animations",
12 | "styled",
13 | "merge",
14 | "delay",
15 | "element type"
16 | ],
17 | "main": "main.js",
18 | "scripts": {
19 | "prebuild": "rm -rf build",
20 | "prepublishOnly": "yarn test && yarn flow && yarn webpack:build",
21 | "test": "./node_modules/.bin/jest",
22 | "test:watch": "./node_modules/.bin/jest --watch",
23 | "test:coverage": "./node_modules/.bin/jest --coverage",
24 | "builder": "node ../../scripts/check.js",
25 | "lint": "./node_modules/.bin/eslint ./containers ./mods ./utils",
26 | "start": "../../node_modules/.bin/webpack-dev-server --watch --open --config ../../starter/webpack.config.js",
27 | "flow": "./node_modules/.bin/flow",
28 | "webpack:build": "NODE_ENV=production ./node_modules/.bin/webpack --config ./webpack/webpack.config.js --display-max-modules 0 --display-optimization-bailout"
29 | },
30 | "files": [
31 | "dist",
32 | "main.js"
33 | ],
34 | "author": "Nitin Tulswani ",
35 | "license": "MIT",
36 | "dependencies": {
37 | "animate-keyframes": "^0.1.6",
38 | "element-utils": "^0.1.2",
39 | "html-tags": "^1.1.1",
40 | "prop-types": "^15.5.8"
41 | },
42 | "peerDependencies": {
43 | "react": "^16.0.0",
44 | "react-dom": "^16.0.0"
45 | },
46 | "jest": {
47 | "testEnvironment": "node"
48 | },
49 | "homepage": "https://github.com/nitin42/animate-components",
50 | "devDependencies": {
51 | "aphrodite": "^1.2.1",
52 | "babel-cli": "^6.24.1",
53 | "babel-eslint": "^7.2.3",
54 | "babel-jest": "^19.0.0",
55 | "babel-loader": "^6.4.1",
56 | "babel-plugin-transform-class-properties": "^6.23.0",
57 | "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
58 | "babel-plugin-transform-flow-strip-types": "^6.22.0",
59 | "babel-plugin-transform-object-rest-spread": "^6.23.0",
60 | "babel-plugin-transform-react-remove-prop-types": "^0.4.6",
61 | "babel-preset-es2015": "^6.24.1",
62 | "babel-preset-flow": "^6.23.0",
63 | "babel-preset-react": "^6.24.1",
64 | "babel-preset-stage-0": "^6.24.1",
65 | "babili": "^0.0.12",
66 | "babili-webpack-plugin": "^0.1.1",
67 | "clean-webpack-plugin": "^0.1.16",
68 | "compression-webpack-plugin": "^0.4.0",
69 | "css-loader": "^0.28.0",
70 | "enzyme": "^2.8.0",
71 | "eslint": "^3.19.0",
72 | "eslint-config-airbnb": "^15.0.1",
73 | "eslint-plugin-flowtype": "^2.33.0",
74 | "eslint-plugin-import": "^2.2.0",
75 | "eslint-plugin-jsx-a11y": "^5.0.3",
76 | "eslint-plugin-react": "^7.0.1",
77 | "extract-text-webpack-plugin": "^2.1.0",
78 | "flow-bin": "^0.48.0",
79 | "html-webpack-plugin": "^2.28.0",
80 | "html-webpack-template": "^6.0.1",
81 | "jest": "^20.0.4",
82 | "jest-styled-components": "^2.0.0",
83 | "lerna": "^2.0.0-rc.5",
84 | "react-test-renderer": "^15.6.1",
85 | "style-loader": "^0.16.1",
86 | "styled-components": "^2.1.0",
87 | "webpack": "^3.0.0"
88 | },
89 | "repository": {
90 | "type": "git",
91 | "url": "https://github.com/nitin42/animate-components",
92 | "bugs": {
93 | "url": "https://github.com/nitin42/animate-components/issues"
94 | }
95 | }
96 | }
97 |
--------------------------------------------------------------------------------
/packages/animate-components/utils/keyValidators.js:
--------------------------------------------------------------------------------
1 | const names = (key, propValue) => {
2 | if (key === 'name' && typeof propValue[key] !== 'string') {
3 | /* eslint-disable no-console */
4 | console.error(
5 | 'Warning: Failed propType. Prop value for animation name should be a string.',
6 | );
7 | }
8 | };
9 |
10 | const duration = (key, propValue) => {
11 | if (key === 'duration' && typeof propValue[key] !== 'string') {
12 | /* eslint-disable no-console */
13 | console.error(
14 | 'Warning: Failed propType. Prop value for animation duration should be a string. For eg - \'2s\'',
15 | );
16 | }
17 | };
18 |
19 | const timingFunction = (key, propValue) => {
20 | if (key === 'timingFunction' && typeof propValue[key] === 'string') {
21 | const arr = [
22 | 'linear',
23 | 'ease',
24 | 'ease-in',
25 | 'ease-out',
26 | 'ease-in-out',
27 | 'step-start',
28 | 'step-end',
29 | ];
30 |
31 | const err = `
32 | Warning: Invalid timing Function '${propValue[key]}' passed to the Merge component. The prop
33 | value for 'timingFunction' should be one of ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out',
34 | 'step-start', 'step-end']. Note steps(#, start|end) is supported via forceInterpolate prop. Refer to the docs for more info.
35 | `;
36 |
37 | /* eslint-disable no-console */
38 | return arr.includes(propValue[key]) ? null : console.error(err);
39 | } else if (key === 'timingFunction' && typeof propValue[key] !== 'string') {
40 | console.error(
41 | 'Warning: Failed propType. Prop value for tf should be a string. For eg - \'ease-out\'',
42 | );
43 | }
44 | };
45 |
46 | const direction = (key, propValue) => {
47 | if (key === 'direction' && typeof propValue[key] !== 'string') {
48 | /* eslint-disable no-console */
49 | console.error(
50 | 'Warning: Failed propType. Prop value for \'direction\' should be a string.',
51 | );
52 | }
53 | };
54 |
55 | const interpolateValidators = (key) => {
56 | const keys = ['steps', 'direction'];
57 | const err = `Warning: Unknown prop '${key}' passed to the Merge component.`;
58 |
59 | /* eslint-disable no-console */
60 | return keys.includes(key) ? null : console.error(err);
61 | };
62 |
63 | const propValidators = (key) => {
64 | const keys = ['name', 'duration', 'timingFunction'];
65 | const err = `Warning: Unknown prop '${key}' passed to the Merge component. Prop should be one of [${keys}]`;
66 |
67 | /* eslint-disable no-console */
68 | return keys.includes(key) ? null : console.error(err);
69 | };
70 |
71 | export {
72 | names,
73 | duration,
74 | timingFunction,
75 | propValidators,
76 | direction,
77 | interpolateValidators,
78 | };
79 |
--------------------------------------------------------------------------------
/packages/animate-components/utils/state.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | // Utilities for changing the component state based on a particular prop.
4 | const derive = (props: Object, AnimationName: string): string => {
5 | const {
6 | duration,
7 | timingFunction,
8 | delay,
9 | direction,
10 | iterations,
11 | fillMode,
12 | playState,
13 | forceInterpolate,
14 | } = props;
15 |
16 | if (forceInterpolate) {
17 | return `${AnimationName} ${duration} steps(${forceInterpolate.steps}, ${forceInterpolate.direction}) ${delay} ${iterations} ${fillMode} ${playState}`;
18 | }
19 |
20 | return `${AnimationName} ${duration} ${timingFunction} ${delay} ${iterations} ${direction} ${fillMode} ${playState}`;
21 | };
22 |
23 | export default derive;
24 |
--------------------------------------------------------------------------------
/packages/animate-components/webpack/config.js:
--------------------------------------------------------------------------------
1 | const webpack = require('webpack');
2 | const { join, resolve } = require('path');
3 | const CompressionPlugin = require('compression-webpack-plugin');
4 | const BabiliPlugin = require('babili-webpack-plugin');
5 | const CleanWebpackPlugin = require('clean-webpack-plugin');
6 |
7 | const pkg = require('../package.json');
8 |
9 | const common = {
10 | exclude: [
11 | /node_modules/,
12 | /__tests__/,
13 | /docs/,
14 | /coverage/,
15 | /dist/,
16 | /examples/,
17 | /scripts/,
18 | /starter/,
19 | ]
20 | };
21 |
22 | const jsLoader = () => {
23 | return {
24 | test: /\.js$/,
25 | exclude: common.exclude,
26 | use: ['babel-loader']
27 | };
28 | };
29 |
30 | const styleLoader = () => {
31 | return {
32 | test: /\.css$/,
33 | exclude: common.exclude,
34 | use: ['style-loader', 'css-loader']
35 | };
36 | };
37 |
38 | let output = () => {
39 | return {
40 | filename: '[name].min.js',
41 | path: resolve(__dirname, '../dist'),
42 | libraryTarget: 'umd',
43 | library: 'animateComponents',
44 | publicPath: '/',
45 | pathinfo: true
46 | };
47 | };
48 |
49 | const plugins = () => {
50 | return [
51 | new webpack.LoaderOptionsPlugin({
52 | minimize: true,
53 | debug: false,
54 | options: {
55 | context: __dirname
56 | }
57 | }),
58 | new webpack.optimize.ModuleConcatenationPlugin(),
59 | // Better results
60 | new BabiliPlugin(),
61 | new webpack.DefinePlugin({
62 | 'process.env': {
63 | NODE_ENV: JSON.stringify('production')
64 | }
65 | }),
66 | // new webpack.optimize.UglifyJsPlugin(),
67 | new CompressionPlugin({
68 | asset: '[path].gz[query]',
69 | algorithm: 'gzip',
70 | test: /\.js$|\.css$|\.html$/,
71 | threshold: 10240,
72 | minRatio: 0.8
73 | }),
74 | new CleanWebpackPlugin([resolve(__dirname, 'dist')])
75 | ];
76 | };
77 |
78 | const externals = () => {
79 | return {
80 | react: 'react',
81 | 'react-dom': 'react-dom',
82 | 'prop-types': 'prop-types',
83 | 'html-tags': 'html-tags',
84 | 'animate-keyframes': 'animate-keyframes',
85 | 'element-utils': 'element-utils'
86 | };
87 | };
88 |
89 | const entry = () => {
90 | return {
91 | [pkg.name]: join(__dirname, '../index.js')
92 | };
93 | };
94 |
95 | module.exports = {
96 | jsLoader,
97 | output,
98 | styleLoader,
99 | plugins,
100 | externals,
101 | entry
102 | };
103 |
--------------------------------------------------------------------------------
/packages/animate-components/webpack/webpack.config.js:
--------------------------------------------------------------------------------
1 | const {
2 | jsLoader,
3 | styleLoader,
4 | output,
5 | plugins,
6 | externals,
7 | entry
8 | } = require('./config');
9 |
10 | // All configurations in ./config.js
11 | module.exports = {
12 | entry: entry(),
13 | output: output(),
14 | devtool: 'cheap-module-source-map',
15 | cache: true,
16 | module: {
17 | rules: [jsLoader(), styleLoader()]
18 | },
19 | target: 'web',
20 | externals: externals(),
21 | plugins: plugins()
22 | };
23 |
--------------------------------------------------------------------------------
/packages/animate-keyframes/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["babili", "flow", "es2015"],
3 | "plugins": ["transform-flow-strip-types"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/animate-keyframes/.flowconfig:
--------------------------------------------------------------------------------
1 | [include]
2 | ./keyframes.js
3 | ./main.js
4 |
5 | [ignore]
6 | .*/node_modules/styled-components/.*
7 | .*/node_modules/
8 |
--------------------------------------------------------------------------------
/packages/animate-keyframes/.gitignore:
--------------------------------------------------------------------------------
1 | # dependencies
2 | /node_modules
3 | build
4 | coverage
5 | dist
6 | entry.js
7 | index.js
8 |
9 | # misc
10 | .DS_Store
11 | .env
12 | npm-debug.log*
13 | lerna-debug.log
14 | yarn.lock
15 | yarn-error.log
16 |
--------------------------------------------------------------------------------
/packages/animate-keyframes/README.md:
--------------------------------------------------------------------------------
1 | ## animate-keyframes
2 | 
3 |
4 | > ***Keyframes for animations***
5 |
6 | ## Install
7 | ```
8 | npm install animate-keyframes
9 | ```
10 |
11 | ## Usage
12 | Keyframes are required when you use [Merge](https://github.com/nitin42/animate-components/blob/master/packages/animate-components/docs/usage.md#merge-component) and [Disappear](https://github.com/nitin42/animate-components/blob/master/packages/animate-components/docs/usage.md#disappear-component) Component. Earlier they were bundled within the same package ([`animate-components`](../animate-components)) so there are few changes when importing them.
13 |
14 | To import any keyframe,
15 |
16 | ```
17 | import { fadeIn } from 'animate-keyframes';
18 | ```
19 |
20 | ## List of keyframes
21 |
22 | ### Bounce
23 |
24 | * `bounce`
25 | * `bounceUp`
26 | * `bounceRight`
27 | * `bounceLeft`
28 | * `bounceDown`
29 |
30 | ### Fade
31 |
32 | * `fadeIn`
33 | * `up`
34 | * `right`
35 | * `left`
36 | * `down`
37 | * `downBig`
38 | * `upBig`
39 | * `leftBig`
40 | * `rightBig`
41 |
42 | ### Flip
43 |
44 | * `flip`
45 | * `flipX`
46 | * `flipY`
47 |
48 | ### LightSpeed
49 |
50 | * `lightOut`
51 | * `lightIn`
52 |
53 | ### Rotate
54 |
55 | * `rotateIn`
56 | * `rotateRight`
57 | * `rotateLeft`
58 | * `rotateUpRight`
59 | * `rotateUpLeft`
60 |
61 | ### Slide
62 |
63 | * `slideUp`
64 | * `slideDown`
65 | * `slideLeft`
66 | * `slideRight`
67 |
68 | ### Special
69 |
70 | * `flash`
71 | * `rollOut`
72 | * `rollIn`
73 | * `rubber`
74 | * `swing`
75 | * `zoom`
76 | * `hinge`
77 | * `pulse`
78 | * `expandUp`
79 | * `entrance`
80 | * `hatch`
81 | * `starWars`
82 |
83 | ### Perspective
84 |
85 | * `perspectiveDown`
86 | * `perspectiveUp`
87 | * `perspectiveLeft`
88 | * `perspectiveRight`
89 |
90 | ### Bingo
91 |
92 | * `puffmeout`
93 | * `puffmein`
94 | * `vanishout`
95 | * `vanishin`
96 |
97 | ### Expanse
98 |
99 | * `expanseUp`
100 | * `expanseDown`
101 | * `expanseLeft`
102 | * `expanseRight`
103 |
--------------------------------------------------------------------------------
/packages/animate-keyframes/flow-typed/npm/styled-components_v2.x.x.js:
--------------------------------------------------------------------------------
1 | // flow-typed signature: 3a2f61dde69e3311cdc6d0f14863a9ef
2 | // flow-typed version: b2ad6292df/styled-components_v2.x.x/flow_>=v0.25.x
3 |
4 | // @flow
5 |
6 | type $npm$styledComponents$Interpolation = ((executionContext: Object) => string) | string | number;
7 | type $npm$styledComponents$NameGenerator = (hash: number) => string
8 |
9 | type $npm$styledComponents$StyledComponent = (
10 | strings: Array,
11 | ...interpolations: Array<$npm$styledComponents$Interpolation>
12 | ) => ReactClass<*>;
13 |
14 |
15 | type $npm$styledComponents$Theme = {[key: string]: mixed};
16 | type $npm$styledComponents$ThemeProviderProps = {
17 | theme: $npm$styledComponents$Theme | ((outerTheme: $npm$styledComponents$Theme) => void)
18 | };
19 | type $npm$styledComponents$Component =
20 | | ReactClass<*>
21 | | (props: *) => React$Element<*>;
22 |
23 | class Npm$StyledComponents$ThemeProvider extends React$Component {
24 | props: $npm$styledComponents$ThemeProviderProps;
25 | }
26 |
27 | type $npm$styledComponents$StyleSheetManagerProps = {
28 | sheet: mixed
29 | }
30 |
31 | class Npm$StyledComponents$StyleSheetManager extends React$Component {
32 | props: $npm$styledComponents$StyleSheetManagerProps;
33 | }
34 |
35 | class Npm$StyledComponents$ServerStyleSheet {
36 | instance: StyleSheet
37 | collectStyles: (children: any) => React$Element<*>
38 | getStyleTags: () => string
39 | getStyleElement: () => React$Element<*>
40 | }
41 |
42 | declare module 'styled-components' {
43 | declare type Interpolation = $npm$styledComponents$Interpolation;
44 | declare type NameGenerator = $npm$styledComponents$NameGenerator;
45 |
46 | declare type StyledComponent = $npm$styledComponents$StyledComponent;
47 |
48 | declare type Theme = $npm$styledComponents$Theme;
49 | declare type ThemeProviderProps = $npm$styledComponents$ThemeProviderProps;
50 | declare type Component = $npm$styledComponents$Component;
51 |
52 | declare module.exports: {
53 | injectGlobal: (strings: Array, ...interpolations: Array) => void,
54 | css: (strings: Array, ...interpolations: Array) => Array,
55 | keyframes: (strings: Array, ...interpolations: Array) => string,
56 | withTheme: (component: Component) => React$Component<*, ThemeProviderProps, *>,
57 | ServerStyleSheet: typeof Npm$StyledComponents$ServerStyleSheet,
58 | StyleSheetManager: typeof Npm$StyledComponents$StyleSheetManager,
59 | ThemeProvider: typeof Npm$StyledComponents$ThemeProvider,
60 | (baseComponent: Component): StyledComponent,
61 | a: StyledComponent,
62 | abbr: StyledComponent,
63 | address: StyledComponent,
64 | area: StyledComponent,
65 | article: StyledComponent,
66 | aside: StyledComponent,
67 | audio: StyledComponent,
68 | b: StyledComponent,
69 | base: StyledComponent,
70 | bdi: StyledComponent,
71 | bdo: StyledComponent,
72 | big: StyledComponent,
73 | blockquote: StyledComponent,
74 | body: StyledComponent,
75 | br: StyledComponent,
76 | button: StyledComponent,
77 | canvas: StyledComponent,
78 | caption: StyledComponent,
79 | cite: StyledComponent,
80 | code: StyledComponent,
81 | col: StyledComponent,
82 | colgroup: StyledComponent,
83 | data: StyledComponent,
84 | datalist: StyledComponent,
85 | dd: StyledComponent,
86 | del: StyledComponent,
87 | details: StyledComponent,
88 | dfn: StyledComponent,
89 | dialog: StyledComponent,
90 | div: StyledComponent,
91 | dl: StyledComponent,
92 | dt: StyledComponent,
93 | em: StyledComponent,
94 | embed: StyledComponent,
95 | fieldset: StyledComponent,
96 | figcaption: StyledComponent,
97 | figure: StyledComponent,
98 | footer: StyledComponent,
99 | form: StyledComponent,
100 | h1: StyledComponent,
101 | h2: StyledComponent,
102 | h3: StyledComponent,
103 | h4: StyledComponent,
104 | h5: StyledComponent,
105 | h6: StyledComponent,
106 | head: StyledComponent,
107 | header: StyledComponent,
108 | hgroup: StyledComponent,
109 | hr: StyledComponent,
110 | html: StyledComponent,
111 | i: StyledComponent,
112 | iframe: StyledComponent,
113 | img: StyledComponent,
114 | input: StyledComponent,
115 | ins: StyledComponent,
116 | kbd: StyledComponent,
117 | keygen: StyledComponent,
118 | label: StyledComponent,
119 | legend: StyledComponent,
120 | li: StyledComponent,
121 | link: StyledComponent,
122 | main: StyledComponent,
123 | map: StyledComponent,
124 | mark: StyledComponent,
125 | menu: StyledComponent,
126 | menuitem: StyledComponent,
127 | meta: StyledComponent,
128 | meter: StyledComponent,
129 | nav: StyledComponent,
130 | noscript: StyledComponent,
131 | object: StyledComponent,
132 | ol: StyledComponent,
133 | optgroup: StyledComponent,
134 | option: StyledComponent,
135 | output: StyledComponent,
136 | p: StyledComponent,
137 | param: StyledComponent,
138 | picture: StyledComponent,
139 | pre: StyledComponent,
140 | progress: StyledComponent,
141 | q: StyledComponent,
142 | rp: StyledComponent,
143 | rt: StyledComponent,
144 | ruby: StyledComponent,
145 | s: StyledComponent,
146 | samp: StyledComponent,
147 | script: StyledComponent,
148 | section: StyledComponent,
149 | select: StyledComponent,
150 | small: StyledComponent,
151 | source: StyledComponent,
152 | span: StyledComponent,
153 | strong: StyledComponent,
154 | style: StyledComponent,
155 | sub: StyledComponent,
156 | summary: StyledComponent,
157 | sup: StyledComponent,
158 | table: StyledComponent,
159 | tbody: StyledComponent,
160 | td: StyledComponent,
161 | textarea: StyledComponent,
162 | tfoot: StyledComponent,
163 | th: StyledComponent,
164 | thead: StyledComponent,
165 | time: StyledComponent,
166 | title: StyledComponent,
167 | tr: StyledComponent,
168 | track: StyledComponent,
169 | u: StyledComponent,
170 | ul: StyledComponent,
171 | var: StyledComponent,
172 | video: StyledComponent,
173 | wbr: StyledComponent,
174 |
175 | // SVG
176 | circle: StyledComponent,
177 | clipPath: StyledComponent,
178 | defs: StyledComponent,
179 | ellipse: StyledComponent,
180 | g: StyledComponent,
181 | image: StyledComponent,
182 | line: StyledComponent,
183 | linearGradient: StyledComponent,
184 | mask: StyledComponent,
185 | path: StyledComponent,
186 | pattern: StyledComponent,
187 | polygon: StyledComponent,
188 | polyline: StyledComponent,
189 | radialGradient: StyledComponent,
190 | rect: StyledComponent,
191 | stop: StyledComponent,
192 | svg: StyledComponent,
193 | text: StyledComponent,
194 | tspan: StyledComponent,
195 | };
196 | }
197 |
198 | declare module 'styled-components/native' {
199 | declare type Interpolation = $npm$styledComponents$Interpolation;
200 | declare type NameGenerator = $npm$styledComponents$NameGenerator;
201 |
202 | declare type StyledComponent = $npm$styledComponents$StyledComponent;
203 |
204 | declare type Theme = $npm$styledComponents$Theme;
205 | declare type ThemeProviderProps = $npm$styledComponents$ThemeProviderProps;
206 | declare type Component = $npm$styledComponents$Component;
207 |
208 | declare module.exports: {
209 | css: (strings: Array, ...interpolations: Array) => Array,
210 | withTheme: (component: Component) => React$Component<*, ThemeProviderProps, *>,
211 | keyframes: (strings: Array, ...interpolations: Array) => string,
212 | ThemeProvider: typeof Npm$StyledComponents$ThemeProvider,
213 |
214 | (baseComponent: Component): StyledComponent,
215 |
216 | ActivityIndicator: StyledComponent,
217 | ActivityIndicatorIOS: StyledComponent,
218 | ART: StyledComponent,
219 | Button: StyledComponent,
220 | DatePickerIOS: StyledComponent,
221 | DrawerLayoutAndroid: StyledComponent,
222 | FlatList: StyledComponent,
223 | Image: StyledComponent,
224 | ImageEditor: StyledComponent,
225 | ImageStore: StyledComponent,
226 | KeyboardAvoidingView: StyledComponent,
227 | ListView: StyledComponent,
228 | MapView: StyledComponent,
229 | Modal: StyledComponent,
230 | Navigator: StyledComponent,
231 | NavigatorIOS: StyledComponent,
232 | Picker: StyledComponent,
233 | PickerIOS: StyledComponent,
234 | ProgressBarAndroid: StyledComponent,
235 | ProgressViewIOS: StyledComponent,
236 | RecyclerViewBackedScrollView: StyledComponent,
237 | RefreshControl: StyledComponent,
238 | ScrollView: StyledComponent,
239 | SectionList: StyledComponent,
240 | SegmentedControlIOS: StyledComponent,
241 | Slider: StyledComponent,
242 | SliderIOS: StyledComponent,
243 | SnapshotViewIOS: StyledComponent,
244 | StatusBar: StyledComponent,
245 | SwipeableListView: StyledComponent,
246 | Switch: StyledComponent,
247 | SwitchAndroid: StyledComponent,
248 | SwitchIOS: StyledComponent,
249 | TabBarIOS: StyledComponent,
250 | Text: StyledComponent,
251 | TextInput: StyledComponent,
252 | ToastAndroid: StyledComponent,
253 | ToolbarAndroid: StyledComponent,
254 | Touchable: StyledComponent,
255 | TouchableHighlight: StyledComponent,
256 | TouchableNativeFeedback: StyledComponent,
257 | TouchableOpacity: StyledComponent,
258 | TouchableWithoutFeedback: StyledComponent,
259 | View: StyledComponent,
260 | ViewPagerAndroid: StyledComponent,
261 | VirtualizedList: StyledComponent,
262 | WebView: StyledComponent,
263 | };
264 | }
265 |
--------------------------------------------------------------------------------
/packages/animate-keyframes/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./src/keyframes');
2 |
--------------------------------------------------------------------------------
/packages/animate-keyframes/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "animate-keyframes",
3 | "version": "0.1.6",
4 | "description": "Keyframes for animate-components",
5 | "main": "./dist/keyframes.js",
6 | "repository": "https://github.com/nitin42/animate-components",
7 | "author": "Nitin Tulswani",
8 | "license": "MIT",
9 | "scripts": {
10 | "prebuild": "rm -rf ./dist",
11 | "flow": "./node_modules/.bin/flow",
12 | "build": "./node_modules/.bin/babel src -d dist",
13 | "prepublishOnly": "yarn flow && yarn build"
14 | },
15 | "files": [
16 | "dist"
17 | ],
18 | "dependencies": {
19 | "styled-components": "^2.1.0"
20 | },
21 | "devDependencies": {
22 | "babel-cli": "^6.24.1",
23 | "babel-plugin-transform-flow-strip-types": "^6.22.0",
24 | "babel-preset-babili": "^0.1.4",
25 | "babel-preset-es2015": "^6.24.1",
26 | "babel-preset-flow": "^6.23.0",
27 | "flow-bin": "^0.48.0",
28 | "flow-typed": "^2.1.2"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/packages/animate-keyframes/src/keyframes.js:
--------------------------------------------------------------------------------
1 | import {
2 | Bouncing,
3 | Fade,
4 | Flippy,
5 | Light,
6 | Rotate,
7 | Special,
8 | Slide,
9 | Perspective,
10 | Bingo,
11 | Expanse
12 | } from "./main";
13 |
14 | const { bounce, bounceDown, bounceUp, bounceLeft, bounceRight } = Bouncing;
15 | const {
16 | fadeIn,
17 | left,
18 | leftBig,
19 | right,
20 | rightBig,
21 | down,
22 | downBig,
23 | up,
24 | upBig
25 | } = Fade;
26 | const { flip, flipInX, flipInY, flipOutX, flipOutY } = Flippy;
27 | const { lightIn, lightOut } = Light;
28 | const {
29 | rotateIn,
30 | rotateRight,
31 | rotateLeft,
32 | rotateUpLeft,
33 | rotateUpRight
34 | } = Rotate;
35 | const {
36 | flash,
37 | rollOut,
38 | rollIn,
39 | rubber,
40 | swing,
41 | zoom,
42 | hinge,
43 | hingeDrop,
44 | pulse,
45 | expandUp,
46 | entrance,
47 | hatch,
48 | starWars
49 | } = Special;
50 | const { slideUp, slideDown, slideLeft, slideRight } = Slide;
51 | const {
52 | perspectiveDown,
53 | perspectiveUp,
54 | perspectiveRight,
55 | perspectiveLeft
56 | } = Perspective;
57 | const { puffmeout, puffmein, vanishin, vanishout } = Bingo;
58 | const { expanseUp, expanseRight, expanseDown, expanseLeft } = Expanse;
59 |
60 | export {
61 | bounce,
62 | bounceDown,
63 | bounceLeft,
64 | bounceRight,
65 | bounceUp,
66 | fadeIn,
67 | left,
68 | down,
69 | downBig,
70 | leftBig,
71 | rightBig,
72 | right,
73 | up,
74 | upBig,
75 | flip,
76 | flipInX,
77 | flipInY,
78 | flipOutX,
79 | flipOutY,
80 | lightIn,
81 | lightOut,
82 | rotateIn,
83 | rotateLeft,
84 | rotateRight,
85 | rotateUpLeft,
86 | rotateUpRight,
87 | flash,
88 | rollOut,
89 | rollIn,
90 | rubber,
91 | swing,
92 | zoom,
93 | hinge,
94 | hingeDrop,
95 | pulse,
96 | expandUp,
97 | entrance,
98 | hatch,
99 | starWars,
100 | slideDown,
101 | slideLeft,
102 | slideRight,
103 | slideUp,
104 | perspectiveDown,
105 | perspectiveUp,
106 | perspectiveLeft,
107 | perspectiveRight,
108 | puffmein,
109 | puffmeout,
110 | vanishout,
111 | vanishin,
112 | expanseDown,
113 | expanseUp,
114 | expanseLeft,
115 | expanseRight
116 | };
117 |
--------------------------------------------------------------------------------
/packages/animate-keyframes/src/main.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import { keyframes } from 'styled-components';
4 |
5 | type keyframe = string;
6 |
7 | type KeyframeObject = {
8 | [key: string | any]: keyframe
9 | };
10 |
11 | // Bingo
12 | const Bingo: KeyframeObject = {
13 | puffmeout: keyframes`
14 | 0% {
15 | opacity: 1;
16 | -ms-transform-origin: 50% 50%;
17 | transform-origin: 50% 50%;
18 | -ms-transform: scale(1, 1);
19 | transform: scale(1, 1);
20 | -webkit-filter: blur(0px);
21 | filter: blur(0px);
22 | }
23 | 100% {
24 | opacity: 0;
25 | -ms-transform-origin: 50% 50%;
26 | transform-origin: 50% 50%;
27 | -ms-transform: scale(2, 2);
28 | transform: scale(2, 2);
29 | -webkit-filter: blur(3px);
30 | filter: blur(3px);
31 | }
32 | `,
33 | puffmein: keyframes`
34 | 0% {
35 | opacity: 0;
36 | -ms-transform-origin: 50% 50%;
37 | transform-origin: 50% 50%;
38 | -ms-transform: scale(2, 2);
39 | transform: scale(2, 2);
40 | -webkit-filter: blur(3px);
41 | filter: blur(3px);
42 | }
43 | 100% {
44 | opacity: 1;
45 | -ms-transform-origin: 50% 50%;
46 | transform-origin: 50% 50%;
47 | -ms-transform: scale(1, 1);
48 | transform: scale(1, 1);
49 | -webkit-filter: blur(0px);
50 | filter: blur(0px);
51 | }
52 | `,
53 | vanishout: keyframes`
54 | 0% {
55 | opacity: 1;
56 | -ms-transform-origin: 50% 50%;
57 | transform-origin: 50% 50%;
58 | -ms-transform: scale(1, 1);
59 | transform: scale(1, 1);
60 | -webkit-filter: blur(0px);
61 | filter: blur(0px);
62 | }
63 | 100% {
64 | opacity: 0;
65 | -ms-transform-origin: 50% 50%;
66 | transform-origin: 50% 50%;
67 | -ms-transform: scale(2, 2);
68 | transform: scale(2, 2);
69 | -webkit-filter: blur(18px);
70 | filter: blur(18px);
71 | }
72 | `,
73 | vanishin: keyframes`
74 | 0% {
75 | opacity: 0;
76 | -ms-transform-origin: 50% 50%;
77 | transform-origin: 50% 50%;
78 | -ms-transform: scale(2, 2);
79 | transform: scale(2, 2);
80 | -webkit-filter: blur(18px);
81 | filter: blur(18px);
82 | }
83 | 100% {
84 | opacity: 1;
85 | -ms-transform-origin: 50% 50%;
86 | transform-origin: 50% 50%;
87 | -ms-transform: scale(1, 1);
88 | transform: scale(1, 1);
89 | -webkit-filter: blur(0px);
90 | filter: blur(0px);
91 | }
92 | `,
93 | };
94 |
95 | const Bouncing: KeyframeObject = {
96 | bounce: keyframes`
97 | from {
98 | animation-timing-function: cubic-bezier(0.200, 0.620, 0.340, 1.000);
99 | }
100 | 0% {
101 | opacity: 0;
102 | transform: scale3d(.3, .3, .3);
103 | }
104 | 20% {
105 | transform: scale3d(1.1, 1.1, 1.1);
106 | }
107 | 40% {
108 | transform: scale3d(.9, .9, .9);
109 | }
110 | 60% {
111 | opacity: 1;
112 | transform: scale3d(1.1, 1.1, 1.1);
113 | }
114 | 80% {
115 | transform: scale3d(.97, .97, .97);
116 | }
117 | to {
118 | opacity: 1;
119 | transform: scale3d(1, 1, 1);
120 | }
121 | `,
122 | bounceDown: keyframes`
123 | from {
124 | animation-timing-function: cubic-bezier(0.200, 0.620, 0.340, 1.000);
125 | }
126 | 0% {
127 | transform: translate3d(0, -2000px, 0);
128 | }
129 | 60% {
130 | transform: translate3d(0, 25px, 0);
131 | }
132 | 75% {
133 | transform: translate3d(0, -15px, 0);
134 | }
135 | 90% {
136 | transform: translate3d(0, 5px, 0);
137 | }
138 | to {
139 | transform: translate3d(0, 0, 0);
140 | }
141 | `,
142 | bounceUp: keyframes`
143 | from {
144 | animation-timing-function: cubic-bezier(0.200, 0.620, 0.340, 1.000);
145 | }
146 | 0% {
147 | transform: translate3d(0, 2000px, 0);
148 | }
149 | 60% {
150 | transform: translate3d(0, -25px, 0);
151 | }
152 | 75% {
153 | transform: translate3d(0, 10px, 0);
154 | }
155 | 90% {
156 | transform: translate3d(0, -5px, 0);
157 | }
158 | to {
159 | transform: translate3d(0, 0, 0);
160 | }
161 | `,
162 | bounceLeft: keyframes`
163 | from, 60% 75% 90%, to {
164 | animation-timing-function: cubic-bezier(0.200, 0.620, 0.340, 1.000);
165 | }
166 | 0% {
167 | opacity: 0;
168 | transform: translate3d(-2000px, 0, 0);
169 | }
170 | 60% {
171 | opacity: 1;
172 | transform: translate3d(25px, 0, 0);
173 | }
174 | 75% {
175 | transform: translate3d(-10px, 0, 0);
176 | }
177 | 90% {
178 | transform: translate3d(5px, 0, 0);
179 | }
180 | to {
181 | transform: none;
182 | }
183 | `,
184 | bounceRight: keyframes`
185 | from, 60% 75% 90%, to {
186 | animation-timing-function: cubic-bezier(0.200, 0.620, 0.340, 1.000);
187 | }
188 | 0% {
189 | opacity: 0;
190 | transform: translate3d(2000px, 0, 0);
191 | }
192 | 60% {
193 | opacity: 1;
194 | transform: translate3d(-25px, 0, 0);
195 | }
196 | 75% {
197 | transform: translate3d(10px, 0, 0);
198 | }
199 | 90% {
200 | transform: translate3d(-5px, 0, 0);
201 | }
202 | to {
203 | transform: none;
204 | }
205 | `,
206 | };
207 |
208 | const Expanse: KeyframeObject = {
209 | expanseUp: keyframes`
210 | 0% {
211 | opacity: 0;
212 | -ms-transform-origin: 50% 0%;
213 | transform-origin: 50% 0%;
214 | -ms-transform: scale(.2) translate(0%, -200%);
215 | transform: scale(.2) translate(0%, -200%);
216 | }
217 | 100% {
218 | opacity: 1;
219 | -ms-transform-origin: 50% 0%;
220 | transform-origin: 50% 0%;
221 | -ms-transform: scale(1) translate(0%, 0%);
222 | transform: scale(1) translate(0%, 0%);
223 | }
224 | `,
225 | expanseDown: keyframes`
226 | 0% {
227 | opacity: 0;
228 | -ms-transform-origin: 50% 100%;
229 | transform-origin: 50% 100%;
230 | -ms-transform: scale(.2) translate(0%, 200%);
231 | transform: scale(.2) translate(0%, 200%);
232 | }
233 | 100% {
234 | opacity: 1;
235 | -ms-transform-origin: 50% 100%;
236 | transform-origin: 50% 100%;
237 | -ms-transform: scale(1) translate(0%, 0%);
238 | transform: scale(1) translate(0%, 0%);
239 | }
240 | `,
241 | expanseLeft: keyframes`
242 | 0% {
243 | opacity: 0;
244 | -ms-transform-origin: 0% 50%;
245 | transform-origin: 0% 50%;
246 | -ms-transform: scale(.2) translate(-200%, 0%);
247 | transform: scale(.2) translate(-200%, 0%);
248 | }
249 | 100% {
250 | opacity: 1;
251 | -ms-transform-origin: 0% 50%;
252 | transform-origin: 0% 50%;
253 | -ms-transform: scale(1) translate(0%, 0%);
254 | transform: scale(1) translate(0%, 0%);
255 | }
256 | `,
257 | expanseRight: keyframes`
258 | 0% {
259 | opacity: 0;
260 | -ms-transform-origin: 100% 50%;
261 | transform-origin: 100% 50%;
262 | -ms-transform: scale(.2) translate(200%, 0%);
263 | transform: scale(.2) translate(200%, 0%);
264 | }
265 | 100% {
266 | opacity: 1;
267 | -ms-transform-origin: 100% 50%;
268 | transform-origin: 100% 50%;
269 | -ms-transform: scale(1) translate(0%, 0%);
270 | transform: scale(1) translate(0%, 0%);
271 | }
272 | `,
273 | };
274 |
275 | const Fade: KeyframeObject = {
276 | fadeIn: keyframes`
277 | 0% {
278 | opacity: 0;
279 | }
280 | 100% {
281 | opacity: 1;
282 | }
283 | `,
284 | left: keyframes`
285 | from {
286 | opacity: 0;
287 | transform: translate3d(-100%, 0, 0);
288 | }
289 | to {
290 | opacity: 1;
291 | -ms-transform: none;
292 | transform: none;
293 | }
294 | `,
295 | leftBig: keyframes`
296 | from {
297 | opacity: 0;
298 | transform: translate3d(-2000px, 0, 0);
299 | }
300 | to {
301 | opacity: 1;
302 | -ms-transform: none;
303 | transform: none;
304 | }
305 | `,
306 | right: keyframes`
307 | from {
308 | opacity: 0;
309 | transform: translate3d(100%, 0, 0);
310 | }
311 | to {
312 | opacity: 1;
313 | -ms-transform: none;
314 | transform: none;
315 | }
316 | `,
317 | rightBig: keyframes`
318 | from {
319 | opacity: 0;
320 | transform: translate3d(2000px, 0, 0);
321 | }
322 | to {
323 | opacity: 1;
324 | -ms-transform: none;
325 | transform: none;
326 | }
327 | `,
328 | down: keyframes`
329 | from {
330 | opacity: 0;
331 | transform: translate3d(0, -100%, 0);
332 | }
333 | to {
334 | opacity: 1;
335 | -ms-transform: none;
336 | transform: none;
337 | }
338 | `,
339 | downBig: keyframes`
340 | from {
341 | opacity: 0;
342 | transform: translate3d(0, -2000px, 0);
343 | }
344 | to {
345 | opacity: 1;
346 | -ms-transform: none;
347 | transform: none;
348 | }
349 | `,
350 | up: keyframes`
351 | from {
352 | opacity: 0;
353 | transform: translate3d(0, 100%, 0);
354 | }
355 | to {
356 | opacity: 1;
357 | -ms-transform: none;
358 | transform: none;
359 | }
360 | `,
361 | upBig: keyframes`
362 | from {
363 | opacity: 0;
364 | transform: translate3d(0, 2000px, 0);
365 | }
366 | to {
367 | opacity: 1;
368 | -ms-transform: none;
369 | transform: none;
370 | }
371 | `,
372 | };
373 |
374 | const Flippy: KeyframeObject = {
375 | flip: keyframes`
376 | from {
377 | transform: perspective(450px) rotate3d(0, 1, 0, -360deg);
378 | animation-timing-function: ease-out;
379 | }
380 | 40% {
381 | transform: perspective(450px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
382 | animation-timing-function: ease-out;
383 | }
384 | 50% {
385 | transform: perspective(450px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170px);
386 | animation-timing-function: ease-in;
387 | }
388 | 80% {
389 | transform: perspective(450px) scale3d(.90, .90, .90);
390 | animation-timing-function: ease-in;
391 | }
392 | to {
393 | transform: perspective(450px);
394 | animation-timing-function: ease-in;
395 | }
396 | `,
397 | flipInX: keyframes`
398 | from {
399 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
400 | animation-timing-function: ease-in;
401 | opacity: 0;
402 | }
403 | 40% {
404 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
405 | animation-timing-function: ease-in;
406 | }
407 | 60% {
408 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
409 | opacity: 1;
410 | }
411 | 80% {
412 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
413 | }
414 | to {
415 | transform: perspective(400px);
416 | }
417 | `,
418 | flipInY: keyframes`
419 | from {
420 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
421 | animation-timing-function: ease-in;
422 | opacity: 0;
423 | }
424 | 40% {
425 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
426 | animation-timing-function: ease-in;
427 | }
428 | 60% {
429 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
430 | opacity: 1;
431 | }
432 | 80% {
433 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
434 | }
435 | to {
436 | transform: perspective(400px);
437 | }
438 | `,
439 | flipOutX: keyframes`
440 | from {
441 | transform: perspective(400px);
442 | }
443 | 40% {
444 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
445 | animation-timing-function: ease-in;
446 | }
447 | 60% {
448 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
449 | opacity: 1;
450 | }
451 | 80% {
452 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
453 | }
454 | to {
455 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
456 | animation-timing-function: ease-in;
457 | opacity: 0;
458 | }
459 | `,
460 | flipOutY: keyframes`
461 | from {
462 | transform: perspective(400px);
463 | }
464 | 40% {
465 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
466 | animation-timing-function: ease-in;
467 | }
468 | 60% {
469 | transform: perspective(400px) rotate3d(0, 1, 0, 2-deg);
470 | opacity: 1;
471 | }
472 | 80% {
473 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
474 | }
475 | to {
476 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
477 | animation-timing-function: ease-in;
478 | opacity: 0;
479 | }
480 | `,
481 | };
482 |
483 | const Light: KeyframeObject = {
484 | lightIn: keyframes`
485 | from {
486 | transform: translate3d(100%, 0, 0) skew(-30deg);
487 | opacity: 0;
488 | }
489 | 40% {
490 | -ms-transform: skew(20deg);
491 | transform: skew(20deg);
492 | opacity: 1;
493 | }
494 | 80% {
495 | -ms-transform: skew(-5deg);
496 | transform: skew(-5deg);
497 | opacity: 1;
498 | }
499 | to {
500 | -ms-transform: none;
501 | transform: none;
502 | opacity: 1;
503 | }
504 | `,
505 | lightOut: keyframes`
506 | from {
507 | opacity: 1;
508 | }
509 | to {
510 | transform: translate3d(100%, 0, 0) skew(30deg);
511 | opacity: 0;
512 | }
513 | `,
514 | };
515 |
516 | const Perspective: KeyframeObject = {
517 | perspectiveDown: keyframes`
518 | 0% {
519 | -ms-transform-origin: 0 100%;
520 | transform-origin: 0 100%;
521 | transform: perspective(800px) rotateX(0deg);
522 | }
523 | 100% {
524 | -ms-transform-origin: 0 100%;
525 | transform-origin: 0 100%;
526 | transform: perspective(800px) rotateX(-180deg);
527 | }
528 | `,
529 | perspectiveUp: keyframes`
530 | 0% {
531 | -ms-transform-origin: 0 0;
532 | transform-origin: 0 0;
533 | transform: perspective(800px) rotateX(0deg);
534 | }
535 | 100% {
536 | -ms-transform-origin: 0 0;
537 | transform-origin: 0 0;
538 | transform: perspective(800px) rotateX(180deg);
539 | }
540 | `,
541 | perspectiveRight: keyframes`
542 | 0% {
543 | -ms-transform-origin: 100% 0;
544 | transform-origin: 100% 0;
545 | transform: perspective(800px) rotateY(0deg);
546 | }
547 | 100% {
548 | -ms-transform-origin: 100% 0;
549 | transform-origin: 100% 0;
550 | transform: perspective(800px) rotateY(180deg);
551 | }
552 | `,
553 | perspectiveLeft: keyframes`
554 | 0% {
555 | -ms-transform-origin: 0 0;
556 | transform-origin: 0 0;
557 | transform: perspective(800px) rotateY(0deg);
558 | }
559 | 100% {
560 | -ms-transform-origin: 0 0;
561 | transform-origin: 0 0;
562 | transform: perspective(800px) rotateY(-180deg);
563 | }
564 | `,
565 | };
566 |
567 | const Rotate: KeyframeObject = {
568 | rotateIn: keyframes`
569 | from {
570 | -ms-transform-origin: center;
571 | transform-origin: center;
572 | transform: rotate3d(0, 0, 1, -200deg);
573 | opacity: 0;
574 | }
575 | to {
576 | -ms-transform: none;
577 | transform: none;
578 | opacity: 1;
579 | }
580 | `,
581 | rotateLeft: keyframes`
582 | from {
583 | -ms-transform-origin: left bottom;
584 | transform-origin: left bottom;
585 | transform: rotate3d(0, 0, 1, -45deg);
586 | opacity: 0;
587 | }
588 | to {
589 | -ms-transform-origin: left bottom;
590 | transform-origin: left bottom;
591 | -ms-transform: none;
592 | transform: none;
593 | opacity: 1;
594 | }
595 | `,
596 | rotateRight: keyframes`
597 | from {
598 | -ms-transform-origin: right bottom;
599 | transform-origin: right bottom;
600 | transform: rotate3d(0, 0, 1, 45deg);
601 | opacity: 0;
602 | }
603 | to {
604 | -ms-transform-origin: right bottom;
605 | transform-origin: right bottom;
606 | -ms-transform: none;
607 | transform: none;
608 | opacity: 1;
609 | }
610 | `,
611 | rotateUpRight: keyframes`
612 | from {
613 | -ms-transform-origin: right bottom;
614 | transform-origin: right bottom;
615 | transform: rotate3d(0, 0, 1, -45deg);
616 | opacity: 0;
617 | }
618 | to {
619 | -ms-transform-origin: right bottom;
620 | transform-origin: right bottom;
621 | -ms-transform: none;
622 | transform: none;
623 | opacity: 1;
624 | }
625 | `,
626 | rotateUpLeft: keyframes`
627 | from {
628 | -ms-transform-origin: left bottom;
629 | transform-origin: left bottom;
630 | transform: rotate3d(0, 0, 1, 45deg);
631 | opacity: 0;
632 | }
633 | to {
634 | -ms-transform-origin: left bottom;
635 | transform-origin: left bottom;
636 | -ms-transform: none;
637 | transform: none;
638 | opacity: 1;
639 | }
640 | `,
641 | };
642 |
643 | const Slide: KeyframeObject = {
644 | slideDown: keyframes`
645 | from {
646 | transform: translate3d(0, -100%, 0);
647 | }
648 | to {
649 | transform: translate3d(0, 0, 0);
650 | }
651 | `,
652 |
653 | slideUp: keyframes`
654 | from {
655 | transform: translate3d(0, 100%, 0);
656 | }
657 | to {
658 | transform: translate3d(0, 0, 0);
659 | }
660 | `,
661 |
662 | slideLeft: keyframes`
663 | from {
664 | transform: translate3d(-100%, 0, 0);
665 | }
666 | to {
667 | transform: translate3d(0, 0, 0);
668 | }
669 | `,
670 |
671 | slideRight: keyframes`
672 | from {
673 | transform: translate3d(100%, 0, 0);
674 | }
675 | to {
676 | transform: translate3d(0, 0, 0);
677 | }
678 | `,
679 | };
680 |
681 | const Special: KeyframeObject = {
682 | flash: keyframes`
683 | from {
684 | opacity: 1;
685 | }
686 | 25% {
687 | opacity: 0;
688 | }
689 | 50% {
690 | opacity: 1;
691 | }
692 | 75% {
693 | opacity: 0;
694 | }
695 | to {
696 | opacity: 1;
697 | }
698 | `,
699 | rollIn: keyframes`
700 | from {
701 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
702 | opacity: 0;
703 | }
704 | to {
705 | -ms-transform: none;
706 | transform: none;
707 | opacity: 1;
708 | }
709 | `,
710 | rollOut: keyframes`
711 | from {
712 | opacity: 1;
713 | }
714 | to {
715 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
716 | opacity: 0;
717 | }
718 | `,
719 | rubber: keyframes`
720 | from {
721 | transform: scale3d(1, 1, 1);
722 | }
723 | 30% {
724 | transform: scale3d(1.25, 0.75, 1);
725 | }
726 | 40% {
727 | transform: scale3d(0.75, 1.25, 1);
728 | }
729 | 50% {
730 | transform: scale3d(1.15, 0.85, 1);
731 | }
732 | 65% {
733 | transform: scale3d(.95, 1.05, 1);
734 | }
735 | 75% {
736 | transform: scale3d(1.05, .95, 1);
737 | }
738 | to {
739 | transform: scale3d(1, 1, 1);
740 | }
741 | `,
742 | swing: keyframes`
743 | 20% {
744 | transform: rotate3d(0, 0, 1, 15deg);
745 | }
746 | 40% {
747 | transform: rotate3d(0, 0, 1, -10deg);
748 | }
749 | 60% {
750 | transform: rotate3d(0, 0, 1, 5deg);
751 | }
752 | 80% {
753 | transform: rotate3d(0, 0, 1, -5deg);
754 | }
755 | to {
756 | transform: rotate3d(0, 0, 1, 0deg);
757 | }
758 | `,
759 | zoom: keyframes`
760 | from {
761 | opacity: 0;
762 | transform: scale3d(.4, .4, .4);
763 | }
764 | to {
765 | opacity: 1;
766 | }
767 | `,
768 | hinge: keyframes`
769 | from {
770 | -ms-transform-origin: top-left;
771 | transform-origin: top-left;
772 | animation-timing-function: ease-in-out;
773 | opacity: 1;
774 | }
775 | 20%, 40% {
776 | -ms-transform-origin: top-left;
777 | transform-origin: top-left;
778 | -ms-transform: rotate(0, 0, 1, 80deg);
779 | transform: rotate(0, 0, 1, 80deg);
780 | animation-timing-function: ease-in-out;
781 | opacity: 1;
782 | }
783 | 60%, 80% {
784 | -ms-transform-origin: top-left;
785 | transform-origin: top-left;
786 | -ms-transform: rotate(0, 0, 1, 20deg);
787 | transform: rotate(0, 0, 1, 20deg);
788 | animation-timing-function: ease-in-out;
789 | opacity: 1;
790 | }
791 | to {
792 | transform: translate3d(0, 700px, 0);
793 | opacity: 0;
794 | }
795 | `,
796 | hingeDrop: keyframes`
797 | from {
798 | -ms-transform-origin: top-left;
799 | transform-origin: top left;
800 | animation-timing-function: ease-in-out;
801 | opacity: 1;
802 | }
803 |
804 | 20%, 60% {
805 | -ms-transform: rotate(0, 0, 1, 80deg);
806 | transform: rotate3d(0, 0, 1, 80deg);
807 | -ms-transform-origin: top-left;
808 | transform-origin: top left;
809 | animation-timing-function: ease-in-out;
810 | }
811 |
812 | 40%, 80% {
813 | -ms-transform: rotate(0, 0, 1, 60deg);
814 | transform: rotate3d(0, 0, 1, 60deg);
815 | -ms-transform-origin: top-left;
816 | transform-origin: top left;
817 | animation-timing-function: ease-in-out;
818 | opacity: 1;
819 | }
820 |
821 | to {
822 | transform: translate3d(0, 700px, 0);
823 | opacity: 0;
824 | }
825 | `,
826 | pulse: keyframes`
827 | from {
828 | transform: scale3d(1, 1, 1);
829 | }
830 | 50% {
831 | transform: scale3d(1.4, 1.4, 1.4);
832 | }
833 | to {
834 | transform: scale3d(1, 1, 1);
835 | }
836 | `,
837 | expandUp: keyframes`
838 | 0% {
839 | transform: translateY(100%) scale(0.6) scaleY(0.5);
840 | }
841 | 60%{
842 | transform: translateY(-7%) scaleY(1.12);
843 | }
844 | 75%{
845 | transform: translateY(3%);
846 | }
847 | 100% {
848 | transform: translateY(0%) scale(1) scaleY(1);
849 | }
850 | `,
851 | entrance: keyframes`
852 | 0% {
853 | transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
854 | opacity: 0.1;
855 | }
856 | 30% {
857 | transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
858 | opacity: 1;
859 | }
860 | 45% {
861 | transform: scale(0.98);
862 | opacity: 1;
863 | }
864 | 60% {
865 | transform: scale(1.01);
866 | opacity: 1;
867 | }
868 | 75% {
869 | transform: scale(0.99);
870 | opacity: 1;
871 | }
872 | 90% {
873 | transform: scale(1.01);
874 | opacity: 1;
875 | }
876 | 100% {
877 | transform: scale(1);
878 | opacity: 1;
879 | }
880 | `,
881 | hatch: keyframes`
882 | 0% {
883 | transform: scaleY(0.6);
884 | }
885 | 20% {
886 | transform: rotate(-2deg) scaleY(1.05);
887 | }
888 | 35% {
889 | transform: rotate(2deg) scaleY(1);
890 | }
891 | 50% {
892 | transform: rotate(-2deg);
893 | }
894 | 65% {
895 | transform: rotate(1deg);
896 | }
897 | 80% {
898 | transform: rotate(-1deg);
899 | }
900 | 100% {
901 | transform: none;
902 | }
903 | `,
904 | starWars: keyframes`
905 | 0% {
906 | opacity: 0;
907 | transform: scale(1.5) translateY(-0.75em);
908 | }
909 | 20% {
910 | opacity: 1;
911 | }
912 | 90% {
913 | opacity: 1;
914 | transform: scale(1);
915 | }
916 | 100% {
917 | opacity: 0;
918 | transform: translateZ(-1000em);
919 | }
920 | `,
921 | };
922 |
923 | export {
924 | Bouncing,
925 | Fade,
926 | Flippy,
927 | Light,
928 | Rotate,
929 | Special,
930 | Slide,
931 | Perspective,
932 | Bingo,
933 | Expanse,
934 | }
935 |
--------------------------------------------------------------------------------
/packages/element-utils/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "development": {
4 | "presets": ["flow", "es2015", "react"]
5 | },
6 | "production": {
7 | "presets": ["babili", "flow", "es2015", "react"]
8 | }
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/packages/element-utils/.flowconfig:
--------------------------------------------------------------------------------
1 | [include]
2 | ./getElement.js
3 | ./Render.js
4 |
5 | [ignore]
6 | .*/node_modules/
7 |
--------------------------------------------------------------------------------
/packages/element-utils/.gitignore:
--------------------------------------------------------------------------------
1 | # dependencies
2 | /node_modules
3 | dist
4 |
5 | # misc
6 | .DS_Store
7 | .env
8 | npm-debug.log*
9 | lerna-debug.log
10 | yarn.lock
11 | yarn-error.log
12 |
--------------------------------------------------------------------------------
/packages/element-utils/README.md:
--------------------------------------------------------------------------------
1 | # element-utils
2 |
3 | This package contains utility functions for [`animate-components`](../animate-components).
4 |
5 | * **getElementType** - Get the element type from the prop passed to animation component.
6 | * **avoidNesting** - Avoid DOM nesting of same elements.
7 | * **Render** - Render the components with some helpers.
8 |
--------------------------------------------------------------------------------
/packages/element-utils/__tests__/mods.test.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { getElementType, avoidNest } from "../src/getElement";
3 | import Render from "../src/Render";
4 |
5 | class App extends Component {
6 | render() {
7 | return (
8 |
9 |
Hello
10 |
11 | );
12 | }
13 | }
14 |
15 | App.defaultProps = {
16 | as: "div"
17 | };
18 |
19 | class NotDefault extends Component {
20 | render() {
21 | return (
22 |
23 |
Hello
24 |
25 | );
26 | }
27 | }
28 |
29 | describe("avoidNest", () => {
30 | it("should be a function", () => {
31 | expect(typeof avoidNest).toBe("function");
32 | });
33 |
34 | it("return elementType prop if child type and prop 'as' are same. ", () => {
35 | const child = { type: "h1" };
36 |
37 | const elementType = "div";
38 |
39 | expect(avoidNest(elementType, child, App)).toBe("div");
40 | });
41 |
42 | it("return elementType prop if no child passed", () => {
43 | const elementType = "div";
44 |
45 | expect(avoidNest(elementType, "", App)).toBe("div");
46 | });
47 |
48 | it("return elementType prop if its type is 'div'", () => {
49 | const child = {
50 | type: "div"
51 | };
52 |
53 | const elementType = "div";
54 |
55 | expect(avoidNest(elementType, child, App)).toBe("div");
56 | });
57 | });
58 |
59 | describe("getElementType", () => {
60 | it("should be a function", () => {
61 | expect(typeof getElementType).toBe("function");
62 | });
63 |
64 | it("return default elementType if (as === default.as)", () => {
65 | const props = {
66 | as: "div"
67 | };
68 |
69 | expect(getElementType(App, props)).toBe("div");
70 | });
71 |
72 | it("return prop 'as' if (as !== default.as) ", () => {
73 | const props = {
74 | as: "h1"
75 | };
76 |
77 | expect(getElementType(App, props)).toBe("h1");
78 | });
79 |
80 | it("returns prop 'as' if no default prop", () => {
81 | const props = {
82 | as: "h2"
83 | };
84 |
85 | expect(getElementType(NotDefault, props)).toBe("h2");
86 | });
87 |
88 | it("return div if no default and as prop", () => {
89 | const props = {
90 | as: ""
91 | };
92 |
93 | expect(getElementType(NotDefault, props)).toBe("div");
94 | });
95 | });
96 |
97 | describe("Render Function - Returns an element type and renders the component with the styles and other html attributes", () => {
98 | let props = {
99 | as: "div",
100 | children: {
101 | type: "p",
102 | props: {
103 | children: "Hello"
104 | }
105 | }
106 | };
107 |
108 | let state = {
109 | styles: {
110 | animation: "fadeIn 3s"
111 | }
112 | };
113 |
114 | let rest = {
115 | className: "main"
116 | };
117 |
118 | let output = Render(App, props, state, rest);
119 |
120 | it("should be a function", () => {
121 | expect(typeof Render).toBe("function");
122 | });
123 |
124 | it("should return an element type", () => {
125 | expect(output.type).toBe("div");
126 | });
127 |
128 | it("should render the children (when component is not passed explicitly through prop)", () => {
129 | expect(output.props.children).toEqual({
130 | props: { children: "Hello" },
131 | type: "p"
132 | });
133 | });
134 |
135 | it("should render the component when passed through component prop", () => {
136 | props.component = NotDefault;
137 | props.children = {};
138 | output = Render(App, props, state, rest);
139 | expect(typeof output.props.children.type).toBe("function");
140 | });
141 |
142 | describe("attributes", () => {
143 | it("should include the styles and animation", () => {
144 | expect(output.props.style).toEqual({ animation: "fadeIn 3s" });
145 | });
146 |
147 | it("should include the html attributes", () => {
148 | expect(output.props.className).toBe("main");
149 | });
150 | });
151 | });
152 |
--------------------------------------------------------------------------------
/packages/element-utils/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "element-utils",
3 | "version": "0.1.2",
4 | "description": "Utility functions for React elements",
5 | "main": "./dist/index.js",
6 | "repository": "https://github.com/nitin42/animate-components/",
7 | "author": "Nitin Tulswani",
8 | "license": "MIT",
9 | "scripts": {
10 | "flow": "./node_modules/.bin/flow",
11 | "prebuild": "rm -rf ./dist",
12 | "build": "NODE_ENV=production ./node_modules/.bin/babel src -d dist",
13 | "test": "NODE_ENV=development ./node_modules/.bin/jest",
14 | "test:watch": "NODE_ENV=development ./node_modules/.bin/jest --watch",
15 | "prepublishOnly": "yarn flow && yarn test && yarn build"
16 | },
17 | "files": [
18 | "dist"
19 | ],
20 | "devDependencies": {
21 | "babel-cli": "^6.24.1",
22 | "babel-plugin-transform-flow-strip-types": "^6.22.0",
23 | "babel-preset-babili": "^0.1.4",
24 | "babel-preset-es2015": "^6.24.1",
25 | "babel-preset-flow": "^6.23.0",
26 | "babel-preset-react": "^6.24.1",
27 | "flow-bin": "^0.48.0",
28 | "jest": "^20.0.4"
29 | },
30 | "dependencies": {
31 | "react": "^16.0.0"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/packages/element-utils/src/Render.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import React from "react";
4 | import { avoidNest, getElementType } from "./getElement";
5 |
6 | const Render = (
7 | ComposedComponent: any,
8 | props: Object,
9 | state: Object,
10 | rest: any,
11 | DisplayName: any
12 | ): ?React$Element => {
13 | const ElementType = getElementType(ComposedComponent, props);
14 | const { styles } = state;
15 | const Wrapper = props.component;
16 | const NormalizedComponent =
17 | avoidNest(ElementType, props, DisplayName) || "div";
18 |
19 | return (
20 |
21 | {Wrapper ? React.createElement(Wrapper, props.children) : props.children}
22 |
23 | );
24 | };
25 |
26 | export default Render;
27 |
--------------------------------------------------------------------------------
/packages/element-utils/src/getElement.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | // Component name passed as string in HOC and React class in merge
4 | const avoidNest = (
5 | elementAs: string,
6 | props: Object,
7 | DisplayName: any
8 | ): string => {
9 | let elementType = elementAs;
10 | if (!props.children) return elementType;
11 |
12 | if (elementType === "div") return elementType; // Wrap with div (default)
13 |
14 | const { type } = props.children;
15 | if (type === elementType) {
16 | elementType = "div"; // Wrap with div and don't mutate the children element type.
17 | console.warn(
18 | `'${DisplayName}' component rendered with an element type 'div' (DOM nesting validated). You provided an element type '${props.as}' to the prop 'as' which was similar to the children type '${type}'. More info - https://goo.gl/wsXFiF`
19 | );
20 | return elementType;
21 | }
22 |
23 | return elementType;
24 | };
25 |
26 | const getElementType = (Component: any, props: Object): string => {
27 | const { defaultProps = {} } = Component;
28 | if (props.as && props.as !== defaultProps.as) return props.as;
29 |
30 | return defaultProps.as || "div";
31 | };
32 |
33 | export { avoidNest, getElementType };
34 |
--------------------------------------------------------------------------------
/packages/element-utils/src/index.js:
--------------------------------------------------------------------------------
1 | import { avoidNest, getElementType } from './getElement';
2 | import Render from './Render';
3 |
4 | export {
5 | avoidNest,
6 | getElementType,
7 | Render,
8 | }
9 |
--------------------------------------------------------------------------------
/scripts/check.js:
--------------------------------------------------------------------------------
1 | const shell = require('shelljs');
2 | const clearConsole = require('react-dev-utils/clearConsole');
3 | const chalk = require('chalk');
4 |
5 | const tty_mode = process.stdout.isTTY;
6 |
7 | let log = (arg) => console.log(arg);
8 |
9 | let build = () => {
10 | log(chalk.green("\nBuilding the project..."));
11 | shell.exec('yarn build >&-', (code, stderr) => {
12 | if (code !== 0) {
13 | log(chalk.red("\n⚠️ Build failed."));
14 | } else log(chalk.yellow("\n✅ Build completed."))
15 | lint();
16 | });
17 | }
18 |
19 | let lint = () => {
20 | log(chalk.green("\nRunning ESLint plugin..."));
21 | shell.exec('yarn lint >&-', (code) => {
22 | if (code !== 0) {
23 | log(chalk.red("\n⚠️ There were some errors. Run `yarn lint` to check the errors.\n"));
24 | } else log(chalk.yellow("\n✅ No errors.\n"))
25 | });
26 | }
27 |
28 | let main = () => {
29 | if (tty_mode) {
30 | clearConsole();
31 | }
32 | build();
33 | }
34 |
35 | main();
36 |
--------------------------------------------------------------------------------
/starter/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import glamorous from 'glamorous-native';
3 | import reactPrimitives from 'react-primitives';
4 |
5 | function createNative(componentConstructor, tag) {
6 | if (typeof tag !== 'string' && typeof tag !== 'function') {
7 | throw new Error(`Cannot create glamorous component for ${tag}`);
8 | }
9 |
10 | return componentConstructor(tag);
11 | }
12 |
13 | const composer = (tag) => createNative(glamorous, tag)
14 |
15 | const NativeAlias = composer(reactPrimitives['View']);
16 |
17 | const StyledView = NativeAlias({ color: 'red', fontSize: '1.3em' });
18 |
19 | class App extends Component {
20 | render() {
21 | return (
22 |
23 | Hello
24 |
25 | );
26 | }
27 | }
28 |
29 | export default App;
30 |
--------------------------------------------------------------------------------
/starter/comp.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | export default class Comp extends Component {
4 | render () {
5 | return (
6 | Hello World
7 | )
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/starter/index.css:
--------------------------------------------------------------------------------
1 | .main {
2 | color: violet;
3 | }
4 |
--------------------------------------------------------------------------------
/starter/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from 'react-dom';
3 |
4 | import App from './App';
5 |
6 | render(
6 | };
7 |
8 | type Delay$Component$State = {
9 | show: boolean
10 | };
11 |
12 | type Merge$Component$Props = {
13 | one: Object,
14 | two: Object,
15 | as: string,
16 | style?: Object,
17 | component?: Function,
18 | children?: React$Element
19 | };
20 |
21 | type Merge$Component$State = {
22 | styles: Object
23 | };
24 |
25 | type Disappear$Component$Props = {
26 | name: string,
27 | duration: string,
28 | as: string,
29 | timingFunction: string,
30 | component?: Function,
31 | children?: React$Element,
32 | rest?: any
33 | };
34 |
35 | type High$Order$Component$Props = {
36 | duration: string,
37 | timingFunction: string,
38 | delay: string,
39 | direction: string,
40 | iterations: string,
41 | backfaceVisible: string,
42 | fillMode: string,
43 | playState: string,
44 | as: string,
45 | component?: Function,
46 | children?: React$Element,
47 | forceInterpolate?: Object,
48 | style?: Object
49 | };
50 |
51 | type High$Order$Component$State = {
52 | styles: Object
53 | };
54 |
55 | class HighOrderComponent extends React$Component {
56 | props: High$Order$Component$Props;
57 | state: High$Order$Component$State;
58 | setAnimation: (Props: High$Order$Component$Props) => void;
59 | }
60 |
61 | class Disappear$Component extends React$Component {
62 | props: Disappear$Component$Props;
63 | performAndDisapper: (prop: Disappear$Component$Props) => void;
64 | }
65 |
66 | class Merge$Component extends React$Component {
67 | props: Merge$Component$Props;
68 | state: Merge$Component$State;
69 | }
70 |
71 | class Delay$Component extends React$Component {
72 | props: Delay$Component$Props;
73 | state: Delay$Component$State;
74 | setShowValue: () => void;
75 | }
76 |
77 | declare module "animate-components" {
78 | declare type High$Order$Component = typeof HighOrderComponent;
79 |
80 | declare module.exports: {
81 | Bounce: High$Order$Component,
82 | BounceUp: High$Order$Component,
83 | BounceRight: High$Order$Component,
84 | BounceLeft: High$Order$Component,
85 | BounceDown: High$Order$Component,
86 | FadeIn: High$Order$Component,
87 | FadeInUp: High$Order$Component,
88 | FadeInRight: High$Order$Component,
89 | FadeInLeft: High$Order$Component,
90 | FadeInDown: High$Order$Component,
91 | FadeInUpBig: High$Order$Component,
92 | FadeInLeftBig: High$Order$Component,
93 | FadeInRightBig: High$Order$Component,
94 | Flip: High$Order$Component,
95 | FlipX: High$Order$Component,
96 | FlipY: High$Order$Component,
97 | LightOut: High$Order$Component,
98 | LightIn: High$Order$Component,
99 | RotateIn: High$Order$Component,
100 | RotateRight: High$Order$Component,
101 | RotateLeft: High$Order$Component,
102 | RotateUpRight: High$Order$Component,
103 | RotateUpLeft: High$Order$Component,
104 | Flash: High$Order$Component,
105 | RollOut: High$Order$Component,
106 | RollIn: High$Order$Component,
107 | Rubber: High$Order$Component,
108 | Swing: High$Order$Component,
109 | Zoom: High$Order$Component,
110 | Hinge: High$Order$Component,
111 | Pulse: High$Order$Component,
112 | SlideUp: High$Order$Component,
113 | SlideDown: High$Order$Component,
114 | SlideLeft: High$Order$Component,
115 | SlideRight: High$Order$Component,
116 | StarWars: High$Order$Component,
117 | ExpandUp: High$Order$Component,
118 | Entrance: High$Order$Component,
119 | Hatch: High$Order$Component,
120 | PDown: High$Order$Component,
121 | PUp: High$Order$Component,
122 | PRight: High$Order$Component,
123 | PLeft: High$Order$Component,
124 | PuffIn: High$Order$Component,
125 | PuffOut: High$Order$Component,
126 | VanishIn: High$Order$Component,
127 | VanishOut: High$Order$Component,
128 | ExpanseLeft: High$Order$Component,
129 | ExpanseRight: High$Order$Component,
130 | ExpanseDown: High$Order$Component,
131 | ExpanseUp: High$Order$Component,
132 | Merge: typeof Merge$Component,
133 | Delay: typeof Delay$Component,
134 | Disappear: typeof Disappear$Component,
135 | hoc: High$Order$Component
136 | };
137 | }
138 |
--------------------------------------------------------------------------------
8 | 
3 | 
4 |