{"id":13802620,"url":"https://github.com/shoutem/animation","last_synced_at":"2025-05-13T13:32:34.765Z","repository":{"id":10832281,"uuid":"66627566","full_name":"shoutem/animation","owner":"shoutem","description":"Animate your React Native components","archived":false,"fork":false,"pushed_at":"2023-03-06T17:27:58.000Z","size":4207,"stargazers_count":282,"open_issues_count":16,"forks_count":48,"subscribers_count":27,"default_branch":"develop","last_synced_at":"2024-04-26T17:45:01.887Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shoutem.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}},"created_at":"2016-08-26T07:42:54.000Z","updated_at":"2024-04-02T17:40:46.000Z","dependencies_parsed_at":"2024-01-13T10:42:32.268Z","dependency_job_id":"24eb2951-e780-4050-a892-004f4bf6f7d1","html_url":"https://github.com/shoutem/animation","commit_stats":{"total_commits":104,"total_committers":14,"mean_commits":7.428571428571429,"dds":0.6826923076923077,"last_synced_commit":"1d34d07a3ba634d4342081e92bf44ff50c411542"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shoutem%2Fanimation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shoutem%2Fanimation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shoutem%2Fanimation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shoutem%2Fanimation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shoutem","download_url":"https://codeload.github.com/shoutem/animation/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225229877,"owners_count":17441336,"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":[],"created_at":"2024-08-04T00:01:48.727Z","updated_at":"2024-11-18T18:30:29.993Z","avatar_url":"https://github.com/shoutem.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\n# Animations\n\u003chr /\u003e\n\nWhen building an application, there is a need to create animations to enrich the user experience. Although React Native [provides a way](https://facebook.github.io/react-native/docs/animations.html) to implement arbitrary animations, it is not an easy task to do it, even for simple animations. That's where `@shoutem/animation` package comes in. Package contains **animation components** that should be wrapped around components that you want to get animated and **driver** that controls the animations.\n\n## Install\n\n```bash\n$ npm install --save @shoutem/animation\n```\n\n## Docs\n\nAll the documentation is available on the [Developer portal](http://shoutem.github.io/docs/ui-toolkit/animation/introduction).\n\n## Community\n\nJoin [our community](https://www.facebook.com/groups/shoutem.community/) on Facebook. Also, feel free to ask a question on Stack Overflow using [\"shoutem\" tag](http://stackoverflow.com/tags/shoutem).\n\n## Examples\n\nTo see animation components in action, start by creating new React Native project:\n\n```bash\n$ react-native init HelloWorld\n```\n\nLocate to project and install `@shoutem/animation`:\n\n```bash\n$ cd HelloWorld\n$ npm install --save @shoutem/animation\n```\n\nNow, simply copy the following to your `index.ios.js` file of React Native project:\n\n```javascript\nimport React, { Component } from 'react';\nimport {\n  AppRegistry,\n  Text,\n  View,\n  ScrollView,\n  StyleSheet,\n} from 'react-native';\n\nimport {\n  FadeOut,\n  FadeIn,\n  ZoomOut,\n  ZoomIn,\n  ScrollDriver,\n} from '@shoutem/animation';\n\nexport default class App extends Component\u003c{}\u003e {\n  render() {\n    // Create new ScrollDriver that will animate animations\n    // when passing through scroll positions in input range\n    const driver = new ScrollDriver();\n    return (\n      \u003cScrollView {...driver.scrollViewProps}\u003e\n        \u003cView style={style.container}\u003e\n          {/* This will fade out and zoom in on scroll position 100 */}\n          \u003cZoomIn driver={driver} inputRange={[50, 100]} maxFactor={3}\u003e\n            \u003cFadeOut driver={driver} inputRange={[50, 100]}\u003e\n              \u003cText\u003eGood Bye\u003c/Text\u003e\n            \u003c/FadeOut\u003e\n          \u003c/ZoomIn\u003e\n          {/* This will fade in and zoom out on scroll position 200 */}\n          \u003cZoomOut driver={driver} inputRange={[150, 200]} maxFactor={3}\u003e\n            \u003cFadeIn driver={driver} inputRange={[150, 200]}\u003e\n              \u003cText\u003eHello\u003c/Text\u003e\n            \u003c/FadeIn\u003e\n          \u003c/ZoomOut\u003e\n        \u003c/View\u003e\n      \u003c/ScrollView\u003e\n    );\n  }\n}\n\nconst style = StyleSheet.create({\n  container: {\n    height: 800,\n    flexDirection: 'column',\n    justifyContent: 'space-around',\n    alignItems: 'center',\n  },\n});\n```\n\nFinally, run the app!\n\n```bash\n$ react-native run-ios\n```\n\nFor more complex animations, run application from `examples` folder:\n\n```bash\n$ git clone git@github.com:shoutem/animation.git\n$ cd animation/examples/ShoutemAnimation/\n$ npm install\n$ react-native run-ios\n```\n\n## UI Toolkit\n\nShoutem UI is a part of the Shoutem UI Toolkit that enables you to build professionally looking React Native apps with ease.  \n\nIt consists of three libraries:\n\n- [@shoutem/ui](https://github.com/shoutem/ui): beautiful and customizable UI components\n- [@shoutem/theme](https://github.com/shoutem/theme): “CSS-way” of styling entire app\n- [@shoutem/animation](https://github.com/shoutem/animation): declarative way of applying ready-made  animations\n\n## License\n\n[The BSD License](https://opensource.org/licenses/BSD-3-Clause)\n\nCopyright (c) 2016-present, [Shoutem](http://shoutem.github.io)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshoutem%2Fanimation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshoutem%2Fanimation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshoutem%2Fanimation/lists"}