{"id":4798,"url":"https://github.com/oblador/react-native-animatable","last_synced_at":"2025-05-15T01:03:55.865Z","repository":{"id":42970510,"uuid":"44462136","full_name":"oblador/react-native-animatable","owner":"oblador","description":"Standard set of easy to use animations and declarative transitions for React Native","archived":false,"fork":false,"pushed_at":"2023-10-26T16:46:05.000Z","size":1755,"stargazers_count":9914,"open_issues_count":171,"forks_count":699,"subscribers_count":112,"default_branch":"master","last_synced_at":"2025-05-07T23:44:24.226Z","etag":null,"topics":["animation","react-native","transition"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oblador.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["oblador"]}},"created_at":"2015-10-18T02:04:35.000Z","updated_at":"2025-05-07T08:00:56.000Z","dependencies_parsed_at":"2022-08-02T23:30:21.117Z","dependency_job_id":"b9237fcb-6cf4-4384-918e-e70ad64955d8","html_url":"https://github.com/oblador/react-native-animatable","commit_stats":{"total_commits":170,"total_committers":29,"mean_commits":5.862068965517241,"dds":"0.20588235294117652","last_synced_commit":"ccafe141921912f21f1ad006ba8c3fb2191d6afc"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oblador%2Freact-native-animatable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oblador%2Freact-native-animatable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oblador%2Freact-native-animatable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oblador%2Freact-native-animatable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oblador","download_url":"https://codeload.github.com/oblador/react-native-animatable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254254040,"owners_count":22039792,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","react-native","transition"],"created_at":"2024-01-05T20:17:24.517Z","updated_at":"2025-05-15T01:03:55.806Z","avatar_url":"https://github.com/oblador.png","language":"JavaScript","readme":"# react-native-animatable\nDeclarative transitions and animations for React Native\n\n[![Tests](https://github.com/oblador/react-native-animatable/actions/workflows/tests.yml/badge.svg)](https://github.com/oblador/react-native-animatable/actions/workflows/tests.yml) [![npm](https://img.shields.io/npm/v/react-native-animatable.svg)](https://npmjs.com/package/react-native-animatable) [![npm](https://img.shields.io/npm/dm/react-native-animatable.svg)](https://npmjs.com/package/react-native-animatable)\n\n## Installation\n\n`$ npm install react-native-animatable --save`\n\n## Usage\n\nTo 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:\n\n```js\nimport * as Animatable from 'react-native-animatable';\nMyCustomComponent = Animatable.createAnimatableComponent(MyCustomComponent);\n```\n\n### Declarative Usage\n\n#### Animations\n\n```html\n\u003cAnimatable.Text animation=\"zoomInUp\"\u003eZoom me up, Scotty\u003c/Animatable.Text\u003e\n```\n\n#### Looping\n\nTo make looping animations simply set the `iterationCount` to `infinite`. Most animations except the attention seekers work best when setting `direction` to `alternate`. \n\n```html\n\u003cAnimatable.Text animation=\"slideInDown\" iterationCount={5} direction=\"alternate\"\u003eUp and down you go\u003c/Animatable.Text\u003e\n\u003cAnimatable.Text animation=\"pulse\" easing=\"ease-out\" iterationCount=\"infinite\" style={{ textAlign: 'center' }}\u003e❤️\u003c/Animatable.Text\u003e\n```\n\n![Animatable looping demo](https://cloud.githubusercontent.com/assets/378279/10716023/9f4a6670-7b00-11e5-944c-d52a1dcf0884.gif)\n\n#### Generic transitions\n\nYou 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. \n\n*Note: If you are using colors, please use `rgba()` syntax.*\n\n*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.*\n\n\n```html\n\u003cTouchableOpacity onPress={() =\u003e this.setState({fontSize: (this.state.fontSize || 10) + 5 })}\u003e\n  \u003cAnimatable.Text transition=\"fontSize\" style={{fontSize: this.state.fontSize || 10}}\u003eSize me up, Scotty\u003c/Animatable.Text\u003e\n\u003c/TouchableOpacity\u003e\n```\n\n#### Properties\n*Note: Other properties will be passed down to underlying component.*\n\n| Prop | Description | Default |\n|---|---|---|\n|**`animation`**|Name of the animation, see below for available animations. |*None*|\n|**`duration`**|For how long the animation will run (milliseconds). |`1000`|\n|**`delay`**|Optionally delay animation (milliseconds). |`0`|\n|**`direction`**|Direction of animation, especially useful for repeating animations. Valid values: `normal`, `reverse`, `alternate`, `alternate-reverse`. |`normal`|\n|**`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`|\n|**`iterationCount`**|How many times to run the animation, use `infinite` for looped animations. |`1`|\n|**`iterationDelay`**|For how long to pause between animation iterations (milliseconds). |`0`|\n|**`transition`**|What `style` property to transition, for example `opacity`, `rotate` or `fontSize`. Use array for multiple properties.  |*None*|\n|**`onAnimationBegin`**|A function that is called when the animation has been started. |*None*|\n|**`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*|\n|**`onTransitionBegin`**|A function that is called when the transition of a style has been started. The function is called with a `property` argument to differentiate between styles. |*None*|\n|**`onTransitionEnd`**|A function that is called when the transition of a style has been completed successfully or cancelled. The function is called with a `property` argument to differentiate between styles. |*None*|\n|**`useNativeDriver`**|Whether to use native or JavaScript animation driver. Native driver can help with performance but cannot handle all types of styling.  |`false`|\n|**`isInteraction`**|Whether or not this animation creates an \"interaction handle\" on the InteractionManager.  |`false` if `iterationCount` is less than or equal to one|\n\n### Imperative Usage\n\n\n#### Animations\n\nAll 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. \n\n```js\nimport * as Animatable from 'react-native-animatable';\n\nclass ExampleView extends Component {\n  handleViewRef = ref =\u003e this.view = ref;\n  \n  bounce = () =\u003e this.view.bounce(800).then(endState =\u003e console.log(endState.finished ? 'bounce finished' : 'bounce cancelled'));\n  \n  render() {\n    return (\n      \u003cTouchableWithoutFeedback onPress={this.bounce}\u003e\n        \u003cAnimatable.View ref={this.handleViewRef}\u003e\n          \u003cText\u003eBounce me!\u003c/Text\u003e\n        \u003c/Animatable.View\u003e\n      \u003c/TouchableWithoutFeedback\u003e\n    );\n  }\n}\n```\n\nTo stop any ongoing animations, just invoke `stopAnimation()` on that element. \n\nYou can also animate imperatively by using the `animate()` function on the element for custom animations, for example:\n```\nthis.view.animate({ 0: { opacity: 0 }, 1: { opacity: 1 } });\n```\n\n#### Generic transitions\n\n##### `transition(fromValues, toValues[[, duration], easing])`\n\nWill transition between given styles. If no `duration` or `easing` is passed a spring animation will be used. \n\n##### `transitionTo(toValues[[, duration], easing])`\n\nThis function will try to determine the current styles and pass it along to `transition()` as `fromValues`. \n\n```js\nimport * as Animatable from 'react-native-animatable';\n\nclass ExampleView extends Component {\n  handleTextRef = ref =\u003e this.text = ref;\n  \n  render() {\n    return (\n      \u003cTouchableWithoutFeedback onPress={() =\u003e this.text.transitionTo({ opacity: 0.2 })}\u003e\n        \u003cAnimatable.Text ref={this.handleTextRef}\u003eFade me!\u003c/Animatable.Text\u003e\n      \u003c/TouchableWithoutFeedback\u003e\n    );\n  }\n}\n```\n\n## Custom Animations\n\nAnimations can be referred to by a global name or a definition object. \n\n### Animation Definition Schema\n\nAn 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. \n\nA simple fade in animation: \n\n```js\nconst fadeIn = {\n  from: {\n    opacity: 0,\n  },\n  to: {\n    opacity: 1,\n  },\n};\n```\n```html\n\u003cAnimatable.Text animation={fadeIn} \u003eFade me in\u003c/Animatable.Text\u003e\n```\n\nCombining multiple styles to create a zoom out animation: \n\n```js\nconst zoomOut = {\n  0: {\n    opacity: 1,\n    scale: 1,\n  },\n  0.5: {\n    opacity: 1,\n    scale: 0.3,\n  },\n  1: {\n    opacity: 0,\n    scale: 0,\n  },\n};\n```\n```html\n\u003cAnimatable.Text animation={zoomOut} \u003eZoom me out\u003c/Animatable.Text\u003e\n```\n\nTo 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. \n\n```js\nAnimatable.initializeRegistryWithDefinitions({\n  myFancyAnimation: {\n    from: { ... },\n    to: { ... },\n  }\n});\n```\n\n## React Europe Talk\n\n[![18922912_1935104760082516_4717918248927023870_o](https://user-images.githubusercontent.com/378279/36341201-fd11e80c-13ea-11e8-8585-ab1d0c5ae27d.jpg)](https://www.youtube.com/watch?v=3SITFIGz4xo)\n\nThe 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).\n\n## `MakeItRain` example\n\nSee [`Examples/MakeItRain`](https://github.com/oblador/react-native-animatable/tree/master/Examples/MakeItRain) folder for the example project from the talk. \n\n[![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)\n\n\n## `AnimatableExplorer` example\n\nSee [`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. \n\n![Animatable Explorer](https://user-images.githubusercontent.com/378279/36341974-f697e5d8-13f6-11e8-8e2a-21d8c2a4b340.gif)\n\n## Animations\n\nAnimations are heavily inspired by [Animated.css](https://daneden.github.io/animate.css/).\n\n### Attention Seekers\n\n![animatable-attention](https://cloud.githubusercontent.com/assets/378279/10590307/ef73b1ba-767d-11e5-8fb9-9779d3a53a50.gif)\n\n* `bounce`\n* `flash`\n* `jello`\n* `pulse`\n* `rotate`\n* `rubberBand`\n* `shake`\n* `swing`\n* `tada`\n* `wobble`\n\n### Bouncing Entrances\n\n![animatable-bouncein](https://cloud.githubusercontent.com/assets/378279/10590306/ef572bbc-767d-11e5-8440-8e61d401537a.gif)\n\n* `bounceIn`\n* `bounceInDown`\n* `bounceInUp`\n* `bounceInLeft`\n* `bounceInRight`\n\n### Bouncing Exits\n\n![animatable-bounceout](https://cloud.githubusercontent.com/assets/378279/10590305/ef56e4cc-767d-11e5-9562-6cd3210faf34.gif)\n\n* `bounceOut`\n* `bounceOutDown`\n* `bounceOutUp`\n* `bounceOutLeft`\n* `bounceOutRight`\n\n### Fading Entrances\n\n![animatable-fadein](https://cloud.githubusercontent.com/assets/378279/10590304/ef4f09b4-767d-11e5-9a43-06e97e8ee2c1.gif)\n\n* `fadeIn`\n* `fadeInDown`\n* `fadeInDownBig`\n* `fadeInUp`\n* `fadeInUpBig`\n* `fadeInLeft`\n* `fadeInLeftBig`\n* `fadeInRight`\n* `fadeInRightBig`\n\n### Fading Exits\n\n![animatable-fadeout](https://cloud.githubusercontent.com/assets/378279/10590303/ef3e9598-767d-11e5-83bc-bd48d6017131.gif)\n\n* `fadeOut`\n* `fadeOutDown`\n* `fadeOutDownBig`\n* `fadeOutUp`\n* `fadeOutUpBig`\n* `fadeOutLeft`\n* `fadeOutLeftBig`\n* `fadeOutRight`\n* `fadeOutRightBig`\n\n### Flippers\n\n![animatable-flip](https://cloud.githubusercontent.com/assets/378279/10590296/ef3076ca-767d-11e5-9f62-6b9c696dad51.gif)\n\n* `flipInX`\n* `flipInY`\n* `flipOutX`\n* `flipOutY`\n\n### Lightspeed\n\n![animatable-lightspeed](https://cloud.githubusercontent.com/assets/378279/10590301/ef374c8e-767d-11e5-83ad-b249d2731f43.gif)\n\n* `lightSpeedIn`\n* `lightSpeedOut`\n\n### Sliding Entrances\n\n![animatable-slidein](https://cloud.githubusercontent.com/assets/378279/10590300/ef36dfe2-767d-11e5-932b-1cccce78087b.gif)\n\n* `slideInDown`\n* `slideInUp`\n* `slideInLeft`\n* `slideInRight`\n\n### Sliding Exits\n\n![animatable-slideout](https://cloud.githubusercontent.com/assets/378279/10590299/ef35a3ca-767d-11e5-94e0-441fd49b6444.gif)\n\n* `slideOutDown`\n* `slideOutUp`\n* `slideOutLeft`\n* `slideOutRight`\n\n### Zooming Entrances\n\n![animatable-zoomin](https://cloud.githubusercontent.com/assets/378279/10590302/ef37d438-767d-11e5-8480-a212e21c2192.gif)\n\n* `zoomIn`\n* `zoomInDown`\n* `zoomInUp`\n* `zoomInLeft`\n* `zoomInRight`\n\n### Zooming Exits\n\n![animatable-zoomout](https://cloud.githubusercontent.com/assets/378279/10590298/ef33fa52-767d-11e5-80fe-6b8dbb5e53d0.gif)\n\n* `zoomOut`\n* `zoomOutDown`\n* `zoomOutUp`\n* `zoomOutLeft`\n* `zoomOutRight`\n\n## [Changelog](https://github.com/oblador/react-native-animatable/releases)\n\n## License\n\n[MIT License](http://opensource.org/licenses/mit-license.html). © Joel Arvidsson 2015\n","funding_links":["https://github.com/sponsors/oblador"],"categories":["Components","Index","JavaScript","组件","动画","Libraries","动画（Animation）"],"sub_categories":["Animation","Other Animations","UI","图形动画","Web相关","Releases"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foblador%2Freact-native-animatable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foblador%2Freact-native-animatable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foblador%2Freact-native-animatable/lists"}