diff --git a/Examples/MakeItRain/yarn.lock b/Examples/MakeItRain/yarn.lock index 1ede02b..0244b7d 100644 --- a/Examples/MakeItRain/yarn.lock +++ b/Examples/MakeItRain/yarn.lock @@ -68,18 +68,6 @@ ajv@^5.1.0: fast-json-stable-stringify "^2.0.0" json-schema-traverse "^0.3.0" -align-text@^0.1.1, align-text@^0.1.3: - version "0.1.4" - resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117" - dependencies: - kind-of "^3.0.2" - longest "^1.0.1" - repeat-string "^1.5.2" - -amdefine@>=0.0.4: - version "1.0.1" - resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5" - ansi-escapes@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.0.0.tgz#ec3e8b4e9f8064fc02c3ac9b65f1c275bda8ef92" @@ -220,10 +208,6 @@ async-limiter@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8" -async@^1.4.0: - version "1.5.2" - resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a" - async@^2.1.4, async@^2.4.0: version "2.6.0" resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4" @@ -987,10 +971,6 @@ callsites@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50" -camelcase@^1.0.2: - version "1.2.1" - resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39" - camelcase@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd" @@ -999,13 +979,6 @@ caseless@~0.12.0: version "0.12.0" resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc" -center-align@^0.1.1: - version "0.1.3" - resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad" - dependencies: - align-text "^0.1.3" - lazy-cache "^1.0.3" - chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98" @@ -1049,14 +1022,6 @@ clipboardy@^1.2.2: arch "^2.1.0" execa "^0.8.0" -cliui@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1" - dependencies: - center-align "^0.1.1" - right-align "^0.1.1" - wordwrap "0.0.2" - cliui@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d" @@ -1330,7 +1295,7 @@ debug@~2.2.0: dependencies: ms "0.7.1" -decamelize@^1.0.0, decamelize@^1.1.1: +decamelize@^1.1.1: version "1.2.0" resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290" @@ -1928,14 +1893,15 @@ gulplog@^1.0.0: glogg "^1.0.0" handlebars@^4.0.3: - version "4.0.11" - resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc" + version "4.7.7" + resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1" dependencies: - async "^1.4.0" - optimist "^0.6.1" - source-map "^0.4.4" + minimist "^1.2.5" + neo-async "^2.6.0" + source-map "^0.6.1" + wordwrap "^1.0.0" optionalDependencies: - uglify-js "^2.6" + uglify-js "^3.1.4" har-schema@^1.0.5: version "1.0.5" @@ -2614,6 +2580,10 @@ js-tokens@^3.0.0, js-tokens@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" +"js-tokens@^3.0.0 || ^4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" + js-yaml@^3.7.0: version "3.10.0" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc" @@ -2727,10 +2697,6 @@ klaw@^1.0.0: optionalDependencies: graceful-fs "^4.1.9" -lazy-cache@^1.0.3: - version "1.0.4" - resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e" - lcid@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835" @@ -2889,16 +2855,18 @@ lodash@^4.13.1, lodash@^4.14.0, lodash@^4.16.6, lodash@^4.17.4, lodash@^4.3.0, l version "4.17.5" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511" -longest@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097" - loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1: version "1.3.1" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" dependencies: js-tokens "^3.0.0" +loose-envify@^1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" + dependencies: + js-tokens "^3.0.0 || ^4.0.0" + lru-cache@^4.0.1: version "4.1.1" resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55" @@ -3077,9 +3045,9 @@ minimist@0.0.8: version "0.0.8" resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d" -minimist@^1.1.0, minimist@^1.1.1, minimist@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284" +minimist@^1.1.0, minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5: + version "1.2.5" + resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602" minimist@~0.0.1: version "0.0.10" @@ -3146,6 +3114,10 @@ negotiator@0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9" +neo-async@^2.6.0: + version "2.6.2" + resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f" + node-fetch@^1.0.1, node-fetch@^1.3.3: version "1.7.3" resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef" @@ -3518,7 +3490,7 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0: +prop-types@^15.5.8, prop-types@^15.6.0: version "15.6.0" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856" dependencies: @@ -3526,6 +3498,14 @@ prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0: loose-envify "^1.3.1" object-assign "^4.1.1" +prop-types@^15.7.2: + version "15.7.2" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" + dependencies: + loose-envify "^1.4.0" + object-assign "^4.1.1" + react-is "^16.8.1" + pseudomap@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3" @@ -3597,11 +3577,15 @@ react-devtools-core@3.0.0: shell-quote "^1.6.1" ws "^2.0.3" -react-native-animatable@^1.2.4: - version "1.2.4" - resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.2.4.tgz#b5fb7657e8f6edadbc26697057a327fb920b3039" +react-is@^16.8.1: + version "16.13.1" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" + +react-native-animatable@*: + version "1.3.3" + resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.3.3.tgz#a13a4af8258e3bb14d0a9d839917e9bb9274ec8a" dependencies: - prop-types "^15.5.10" + prop-types "^15.7.2" react-native@0.53.0: version "0.53.0" @@ -3920,12 +3904,6 @@ restore-cursor@^2.0.0: onetime "^2.0.0" signal-exit "^3.0.2" -right-align@^0.1.1: - version "0.1.3" - resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef" - dependencies: - align-text "^0.1.1" - rimraf@2, rimraf@^2.5.1, rimraf@^2.5.4, rimraf@^2.6.1: version "2.6.2" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36" @@ -4115,17 +4093,11 @@ source-map-support@^0.5.0: dependencies: source-map "^0.6.0" -source-map@^0.4.4: - version "0.4.4" - resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b" - dependencies: - amdefine ">=0.0.4" - -source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1, source-map@~0.5.6: +source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.6: version "0.5.7" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" -source-map@^0.6.0, source-map@~0.6.1: +source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" @@ -4414,18 +4386,9 @@ uglify-es@^3.1.9: commander "~2.13.0" source-map "~0.6.1" -uglify-js@^2.6: - version "2.8.29" - resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd" - dependencies: - source-map "~0.5.1" - yargs "~3.10.0" - optionalDependencies: - uglify-to-browserify "~1.0.0" - -uglify-to-browserify@~1.0.0: - version "1.0.2" - resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7" +uglify-js@^3.1.4: + version "3.13.5" + resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.13.5.tgz#5d71d6dbba64cf441f32929b1efce7365bb4f113" uid-number@^0.0.6: version "0.0.6" @@ -4584,14 +4547,6 @@ win-release@^1.0.0: dependencies: semver "^5.0.1" -window-size@0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d" - -wordwrap@0.0.2: - version "0.0.2" - resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f" - wordwrap@^1.0.0, wordwrap@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb" @@ -4743,12 +4698,3 @@ yargs@^9.0.0: which-module "^2.0.0" y18n "^3.2.1" yargs-parser "^7.0.0" - -yargs@~3.10.0: - version "3.10.0" - resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1" - dependencies: - camelcase "^1.0.2" - cliui "^2.1.0" - decamelize "^1.0.0" - window-size "0.1.0" diff --git a/README.md b/README.md index a4da901..7f36205 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # react-native-animatable + Declarative transitions and animations for React Native ## Installation @@ -10,7 +11,7 @@ Declarative transitions and animations for React Native To animate things you must use the `createAnimatableComponent` composer similar to the `Animated.createAnimatedComponent`. The common components `View`, `Text` and `Image` are precomposed and exposed under the `Animatable` namespace. If you have your own component that you wish to animate, simply wrap it with a `Animatable.View` or compose it with: ```js -import * as Animatable from 'react-native-animatable'; +import * as Animatable from "react-native-animatable"; MyCustomComponent = Animatable.createAnimatableComponent(MyCustomComponent); ``` @@ -24,7 +25,7 @@ MyCustomComponent = Animatable.createAnimatableComponent(MyCustomComponent); #### Looping -To make looping animations simply set the `iterationCount` to `infinite`. Most animations except the attention seekers work best when setting `direction` to `alternate`. +To make looping animations simply set the `iterationCount` to `infinite`. Most animations except the attention seekers work best when setting `direction` to `alternate`. ```html Up and down you go @@ -35,12 +36,11 @@ To make looping animations simply set the `iterationCount` to `infinite`. Most a #### Generic transitions -You can create your own simple transitions of a style property of your own choosing. The following example will increase the font size by 5 for every tap – all animated, all declarative! If you don't supply a `duration` property, a spring animation will be used. - -*Note: If you are using colors, please use `rgba()` syntax.* +You can create your own simple transitions of a style property of your own choosing. The following example will increase the font size by 5 for every tap – all animated, all declarative! If you don't supply a `duration` property, a spring animation will be used. -*Note: Transitions require `StyleSheet.flatten` available in React Native 0.15 or later. If you are running on anything lower, please polyfill as described under imperative usage.* +_Note: If you are using colors, please use `rgba()` syntax._ +_Note: Transitions require `StyleSheet.flatten` available in React Native 0.15 or later. If you are running on anything lower, please polyfill as described under imperative usage._ ```html this.setState({fontSize: (this.state.fontSize || 10) + 5 })}> @@ -49,36 +49,41 @@ You can create your own simple transitions of a style property of your own choos ``` #### Properties -*Note: Other properties will be passed down to underlying component.* - -| Prop | Description | Default | -|---|---|---| -|**`animation`**|Name of the animation, see below for available animations. |*None*| -|**`duration`**|For how long the animation will run (milliseconds). |`1000`| -|**`delay`**|Optionally delay animation (milliseconds). |`0`| -|**`direction`**|Direction of animation, especially useful for repeating animations. Valid values: `normal`, `reverse`, `alternate`, `alternate-reverse`. |`normal`| -|**`easing`**|Timing function for the animation. Valid values: custom function or `linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`, `ease-in-cubic`, `ease-out-cubic`, `ease-in-out-cubic`, `ease-in-circ`, `ease-out-circ`, `ease-in-out-circ`, `ease-in-expo`, `ease-out-expo`, `ease-in-out-expo`, `ease-in-quad`, `ease-out-quad`, `ease-in-out-quad`, `ease-in-quart`, `ease-out-quart`, `ease-in-out-quart`, `ease-in-quint`, `ease-out-quint`, `ease-in-out-quint`, `ease-in-sine`, `ease-out-sine`, `ease-in-out-sine`, `ease-in-back`, `ease-out-back`, `ease-in-out-back`. |`ease`| -|**`iterationCount`**|How many times to run the animation, use `infinite` for looped animations. |`1`| -|**`transition`**|What `style` property to transition, for example `opacity`, `rotate` or `fontSize`. Use array for multiple properties. |*None*| -|**`onAnimationBegin`**|A function that is called when the animation has been started. |*None*| -|**`onAnimationEnd`**|A function that is called when the animation has been completed successfully or cancelled. Function is called with an `endState` argument, refer to `endState.finished` to see if the animation completed or not. |*None*| -|**`useNativeDriver`**|Whether to use native or JavaScript animation driver. Native driver can help with performance but cannot handle all types of styling and requires you to integrate that module on iOS. |`false`| -### Imperative Usage +_Note: Other properties will be passed down to underlying component._ + +| Prop | Description | Default | +| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | +| **`animation`** | Name of the animation, see below for available animations. | _None_ | +| **`duration`** | For how long the animation will run (milliseconds). | `1000` | +| **`delay`** | Optionally delay animation (milliseconds). | `0` | +| **`direction`** | Direction of animation, especially useful for repeating animations. Valid values: `normal`, `reverse`, `alternate`, `alternate-reverse`. | `normal` | +| **`easing`** | Timing function for the animation. Valid values: custom function or `linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`, `ease-in-cubic`, `ease-out-cubic`, `ease-in-out-cubic`, `ease-in-circ`, `ease-out-circ`, `ease-in-out-circ`, `ease-in-expo`, `ease-out-expo`, `ease-in-out-expo`, `ease-in-quad`, `ease-out-quad`, `ease-in-out-quad`, `ease-in-quart`, `ease-out-quart`, `ease-in-out-quart`, `ease-in-quint`, `ease-out-quint`, `ease-in-out-quint`, `ease-in-sine`, `ease-out-sine`, `ease-in-out-sine`, `ease-in-back`, `ease-out-back`, `ease-in-out-back`. | `ease` | +| **`iterationCount`** | How many times to run the animation, use `infinite` for looped animations. | `1` | +| **`transition`** | What `style` property to transition, for example `opacity`, `rotate` or `fontSize`. Use array for multiple properties. | _None_ | +| **`onAnimationBegin`** | A function that is called when the animation has been started. | _None_ | +| **`onAnimationEnd`** | A function that is called when the animation has been completed successfully or cancelled. Function is called with an `endState` argument, refer to `endState.finished` to see if the animation completed or not. | _None_ | +| **`useNativeDriver`** | Whether to use native or JavaScript animation driver. Native driver can help with performance but cannot handle all types of styling and requires you to integrate that module on iOS. | `false` | +### Imperative Usage #### Animations -All animations are exposed as functions on Animatable elements, they take an optional `duration` argument. They return a promise that is resolved when animation completes successfully or is cancelled. +All animations are exposed as functions on Animatable elements, they take an optional `duration` argument. They return a promise that is resolved when animation completes successfully or is cancelled. ```js -import * as Animatable from 'react-native-animatable'; +import * as Animatable from "react-native-animatable"; class ExampleView extends Component { - handleViewRef = ref => this.view = ref; - - bounce = () => this.view.bounce(800).then(endState => console.log(endState.finished ? 'bounce finished' : 'bounce cancelled')); - + handleViewRef = (ref) => (this.view = ref); + + bounce = () => + this.view + .bounce(800) + .then((endState) => + console.log(endState.finished ? "bounce finished" : "bounce cancelled") + ); + render() { return ( @@ -91,27 +96,29 @@ class ExampleView extends Component { } ``` -To stop any ongoing animations, just invoke `stopAnimation()` on that element. +To stop any ongoing animations, just invoke `stopAnimation()` on that element. #### Generic transitions ##### `transition(fromValues, toValues[[, duration], easing])` -Will transition between given styles. If no `duration` or `easing` is passed a spring animation will be used. +Will transition between given styles. If no `duration` or `easing` is passed a spring animation will be used. ##### `transitionTo(toValues[[, duration], easing])` -This function will try to determine the current styles and pass it along to `transition()` as `fromValues`. +This function will try to determine the current styles and pass it along to `transition()` as `fromValues`. ```js -import * as Animatable from 'react-native-animatable'; +import * as Animatable from "react-native-animatable"; class ExampleView extends Component { - handleTextRef = ref => this.text = ref; - + handleTextRef = (ref) => (this.text = ref); + render() { return ( - this.text.transitionTo({ opacity: 0.2 })}> + this.text.transitionTo({ opacity: 0.2 })} + > Fade me! ); @@ -121,13 +128,13 @@ class ExampleView extends Component { ## Custom Animations -Animations can be referred to by a global name or a definition object. +Animations can be referred to by a global name or a definition object. ### Animation Definition Schema -An animation definition is a plain object that contains an optional `easing` property, an optional `style` property for static non-animated styles (useful for `perspective`, `backfaceVisibility`, `zIndex` etc) and a list of keyframes. The keyframes are refered to by a number between 0 to 1 or `from` and `to`. Inspect the source in the `definitions` folder to see more in depth examples. +An animation definition is a plain object that contains an optional `easing` property, an optional `style` property for static non-animated styles (useful for `perspective`, `backfaceVisibility`, `zIndex` etc) and a list of keyframes. The keyframes are refered to by a number between 0 to 1 or `from` and `to`. Inspect the source in the `definitions` folder to see more in depth examples. -A simple fade in animation: +A simple fade in animation: ```js const fadeIn = { @@ -140,7 +147,7 @@ const fadeIn = { }; ``` -Combining multiple styles to create a zoom out animation: +Combining multiple styles to create a zoom out animation: ```js const zoomOut = { @@ -159,7 +166,7 @@ const zoomOut = { }; ``` -To make your animations globally available by referring to them by a name, you can register them with `initializeRegistryWithDefinitions`. This function can also be used to replace built in animations in case you want to tweak some value. +To make your animations globally available by referring to them by a name, you can register them with `initializeRegistryWithDefinitions`. This function can also be used to replace built in animations in case you want to tweak some value. ```js Animatable.initializeRegistryWithDefinitions({ @@ -174,18 +181,17 @@ Animatable.initializeRegistryWithDefinitions({ [![18922912_1935104760082516_4717918248927023870_o](https://user-images.githubusercontent.com/378279/36341201-fd11e80c-13ea-11e8-8585-ab1d0c5ae27d.jpg)](https://www.youtube.com/watch?v=3SITFIGz4xo) -The talk __*A Novel Approach to Declarative Animations in React Native*__ from React Europe 2017 about this library and animations/transitions in general is [available on YouTube](https://www.youtube.com/watch?v=3SITFIGz4xo). +The talk **_A Novel Approach to Declarative Animations in React Native_** from React Europe 2017 about this library and animations/transitions in general is [available on YouTube](https://www.youtube.com/watch?v=3SITFIGz4xo). ## `MakeItRain` example -See [`Examples/MakeItRain`](https://github.com/oblador/react-native-animatable/tree/master/Examples/MakeItRain) folder for the example project from the talk. +See [`Examples/MakeItRain`](https://github.com/oblador/react-native-animatable/tree/master/Examples/MakeItRain) folder for the example project from the talk. [![MakeItRain Example](https://user-images.githubusercontent.com/378279/36341976-06326ad6-13f7-11e8-8fe1-ab947bbea5c8.gif)](https://github.com/oblador/react-native-animatable/tree/master/Examples/MakeItRain) - ## `AnimatableExplorer` example -See [`Examples/AnimatableExplorer`](https://github.com/oblador/react-native-animatable/tree/master/Examples/AnimatableExplorer) folder for an example project demoing animations available out of the box and more. +See [`Examples/AnimatableExplorer`](https://github.com/oblador/react-native-animatable/tree/master/Examples/AnimatableExplorer) folder for an example project demoing animations available out of the box and more. ![Animatable Explorer](https://user-images.githubusercontent.com/378279/36341974-f697e5d8-13f6-11e8-8e2a-21d8c2a4b340.gif) @@ -197,121 +203,115 @@ Animations are heavily inspired by [Animated.css](https://daneden.github.io/anim ![animatable-attention](https://cloud.githubusercontent.com/assets/378279/10590307/ef73b1ba-767d-11e5-8fb9-9779d3a53a50.gif) -* `bounce` -* `flash` -* `jello` -* `pulse` -* `rotate` -* `rubberBand` -* `shake` -* `swing` -* `tada` -* `wobble` +- `bounce` +- `flash` +- `jello` +- `pulse` +- `rotate` +- `rubberBand` +- `shake` +- `swing` +- `tada` +- `wobble` ### Bouncing Entrances ![animatable-bouncein](https://cloud.githubusercontent.com/assets/378279/10590306/ef572bbc-767d-11e5-8440-8e61d401537a.gif) -* `bounceIn` -* `bounceInDown` -* `bounceInUp` -* `bounceInLeft` -* `bounceInRight` +- `bounceIn` +- `bounceInDown` +- `bounceInUp` +- `bounceInLeft` +- `bounceInRight` ### Bouncing Exits ![animatable-bounceout](https://cloud.githubusercontent.com/assets/378279/10590305/ef56e4cc-767d-11e5-9562-6cd3210faf34.gif) -* `bounceOut` -* `bounceOutDown` -* `bounceOutUp` -* `bounceOutLeft` -* `bounceOutRight` +- `bounceOut` +- `bounceOutDown` +- `bounceOutUp` +- `bounceOutLeft` +- `bounceOutRight` ### Fading Entrances ![animatable-fadein](https://cloud.githubusercontent.com/assets/378279/10590304/ef4f09b4-767d-11e5-9a43-06e97e8ee2c1.gif) -* `fadeIn` -* `fadeInDown` -* `fadeInDownBig` -* `fadeInUp` -* `fadeInUpBig` -* `fadeInLeft` -* `fadeInLeftBig` -* `fadeInRight` -* `fadeInRightBig` +- `fadeIn` +- `fadeInDown` +- `fadeInDownBig` +- `fadeInUp` +- `fadeInUpBig` +- `fadeInLeft` +- `fadeInLeftBig` +- `fadeInRight` +- `fadeInRightBig` ### Fading Exits ![animatable-fadeout](https://cloud.githubusercontent.com/assets/378279/10590303/ef3e9598-767d-11e5-83bc-bd48d6017131.gif) -* `fadeOut` -* `fadeOutDown` -* `fadeOutDownBig` -* `fadeOutUp` -* `fadeOutUpBig` -* `fadeOutLeft` -* `fadeOutLeftBig` -* `fadeOutRight` -* `fadeOutRightBig` +- `fadeOut` +- `fadeOutDown` +- `fadeOutDownBig` +- `fadeOutUp` +- `fadeOutUpBig` +- `fadeOutLeft` +- `fadeOutLeftBig` +- `fadeOutRight` +- `fadeOutRightBig` ### Flippers ![animatable-flip](https://cloud.githubusercontent.com/assets/378279/10590296/ef3076ca-767d-11e5-9f62-6b9c696dad51.gif) -* `flipInX` -* `flipInY` -* `flipOutX` -* `flipOutY` +- `flipInX` +- `flipInY` +- `flipOutX` +- `flipOutY` ### Lightspeed ![animatable-lightspeed](https://cloud.githubusercontent.com/assets/378279/10590301/ef374c8e-767d-11e5-83ad-b249d2731f43.gif) -* `lightSpeedIn` -* `lightSpeedOut` +- `lightSpeedIn` +- `lightSpeedOut` ### Sliding Entrances ![animatable-slidein](https://cloud.githubusercontent.com/assets/378279/10590300/ef36dfe2-767d-11e5-932b-1cccce78087b.gif) -* `slideInDown` -* `slideInUp` -* `slideInLeft` -* `slideInRight` +- `slideInDown` +- `slideInUp` +- `slideInLeft` +- `slideInRight` ### Sliding Exits ![animatable-slideout](https://cloud.githubusercontent.com/assets/378279/10590299/ef35a3ca-767d-11e5-94e0-441fd49b6444.gif) -* `slideOutDown` -* `slideOutUp` -* `slideOutLeft` -* `slideOutRight` +- `slideOutDown` +- `slideOutUp` +- `slideOutLeft` +- `slideOutRight` ### Zooming Entrances ![animatable-zoomin](https://cloud.githubusercontent.com/assets/378279/10590302/ef37d438-767d-11e5-8480-a212e21c2192.gif) -* `zoomIn` -* `zoomInDown` -* `zoomInUp` -* `zoomInLeft` -* `zoomInRight` +- `zoomIn` +- `zoomInDown` +- `zoomInUp` +- `zoomInLeft` +- `zoomInRight` ### Zooming Exits ![animatable-zoomout](https://cloud.githubusercontent.com/assets/378279/10590298/ef33fa52-767d-11e5-80fe-6b8dbb5e53d0.gif) -* `zoomOut` -* `zoomOutDown` -* `zoomOutUp` -* `zoomOutLeft` -* `zoomOutRight` - -## [Changelog](https://github.com/oblador/react-native-animatable/releases) - -## License - -[MIT License](http://opensource.org/licenses/mit-license.html). © Joel Arvidsson 2015 +- `zoomOut` +- `zoomOutDown` +- `zoomOutUp` +- `zoomOutLeft` +- `zoomOutRight`