{"id":22434508,"url":"https://github.com/sieuhuflit/react-native-stagger-animation","last_synced_at":"2025-08-01T14:31:00.027Z","repository":{"id":40768140,"uuid":"263710821","full_name":"sieuhuflit/react-native-stagger-animation","owner":"sieuhuflit","description":"React native stagger animation effect","archived":false,"fork":false,"pushed_at":"2023-01-06T05:49:48.000Z","size":48922,"stargazers_count":4,"open_issues_count":19,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-12T10:07:53.929Z","etag":null,"topics":["animated","animation","animations","children","react","react-native","stagger","staggered","staggered-animation","staggered-grid-layout","staggered-grids","staggered-recycler-view","staggered-rendering","staggering"],"latest_commit_sha":null,"homepage":null,"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/sieuhuflit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-13T18:23:28.000Z","updated_at":"2024-05-11T21:38:55.000Z","dependencies_parsed_at":"2023-02-05T11:31:50.697Z","dependency_job_id":null,"html_url":"https://github.com/sieuhuflit/react-native-stagger-animation","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sieuhuflit%2Freact-native-stagger-animation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sieuhuflit%2Freact-native-stagger-animation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sieuhuflit%2Freact-native-stagger-animation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sieuhuflit%2Freact-native-stagger-animation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sieuhuflit","download_url":"https://codeload.github.com/sieuhuflit/react-native-stagger-animation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228383696,"owners_count":17911329,"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":["animated","animation","animations","children","react","react-native","stagger","staggered","staggered-animation","staggered-grid-layout","staggered-grids","staggered-recycler-view","staggered-rendering","staggering"],"created_at":"2024-12-05T23:08:37.081Z","updated_at":"2024-12-05T23:08:38.440Z","avatar_url":"https://github.com/sieuhuflit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eReact Native Stagger Animation\u003c/h1\u003e\n\n[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-button)\n[![npm version](https://img.shields.io/npm/v/react-native-stagger-animation.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-stagger-animation)\n[![npm](https://img.shields.io/npm/dt/react-native-stagger-animation.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-stagger-animation)\n![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./gif/demo_ios.gif\" alt=\"Demo\" width=\"40%\" /\u003e\n  \u003cimg src=\"./gif/demo_android.gif\" alt=\"Demo\" width=\"40%\"  /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eReact native stagger animation\u003c/b\u003e\u003c/br\u003e\n  \u003csub\u003eUse to create stagger animation effect for children view\u003csub\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n## ➤ Installation\n\nAdd the dependency:\n\n## ➤ Peer dependencies\n\n- Using `animated-pose`\n\n## ➤ Usage\n\n```jsx\nimport StaggerAnimation, { Transition } from 'react-native-stagger-animation';\n\n/**\n * Create stagger animation for header group\n */\nconst AnimatedStaggerHeader = StaggerAnimation.createAnimatedStagger();\nconst AnimatedViewHeader = StaggerAnimation.createAnimatedView({\n  transitionType: 'easeInOut',\n  duration: 900,\n});\n\nrender() {\n  // Visible state\n  const { isVisible } = this.state;\n  return (\n    \u003cTransition delayChildrenIn={150}\u003e\n      {isVisible \u0026\u0026 (\n        \u003cAnimatedStaggerHeader key=\"a\"\u003e\n          \u003cAnimatedViewHeader\u003e\n            \u003cText\u003eHi Stephen\u003c/Text\u003e\n            \u003cImage\n              source={require('../assets/avatar.jpg')}\n            /\u003e\n          \u003c/AnimatedViewHeader\u003e\n          \u003cAnimatedText\u003e\n            What sport are you going to play today ?\n          \u003c/AnimatedText\u003e\n        \u003c/AnimatedStaggerHeader\u003e\n      )}\n    \u003c/Transition\u003e\n  )\n}\n```\n\nNote : The `Transition` is using to pass any props stagger animation\n\n## ➤ Example\n\n- Check the example folder, then type to the terminal\n\n```bash\nexpo start\n```\n\n## ➤ Configuration\n\n| Property              |   Type   |  Default   | Description                             |\n| --------------------- | :------: | :--------: | --------------------------------------- |\n| createAnimatedStagger | function | () =\u003e null | Create the animate stagger wrapper view |\n| createAnimatedView    | function |  ()=\u003enull  | Create View animation component         |\n| createAnimatedText    | function |  ()=\u003enull  | Create Text animation component         |\n\n### ➤ Props\n\nTransition type\n\n- `spring`,\n- `linear`,\n- `easeIn`, `easeOut`, `easeInOut`\n- `circIn`, `circOut`, `circInOut`\n- `backIn`, `backOut`, `backInOut`\n- `anticipate`\n\n### Animate Spring configuration\n\n| Property           |  Type   | Default | Description                                   |\n| ------------------ | :-----: | :-----: | --------------------------------------------- |\n| type               | string  | linear  | Create the animate stagger wrapper view       |\n| stiffness?         | number  |   100   | Spring stiffness.                             |\n| damping?           | number  |   10    | Strength of opposing force.                   |\n| velocity?          | number  |    0    | Initial velocity.                             |\n| overshootClamping? | boolean |  false  | Clamps any overshoot beyond the target value. |\n| mass?              | number  |    1    | Mass of the moving object.                    |\n| useNativeDriver    | boolean |  false  | Use native driver                             |\n\n### Animate other transition type configuration\n\n| Property        |   Type   | Default | Description                                   |\n| --------------- | :------: | :-----: | --------------------------------------------- |\n| type            |  string  | linear  | Create the animate stagger wrapper view       |\n| duration        | function |   300   | Total duration of animation, in milliseconds. |\n| useNativeDriver | boolean  |  false  | Use native driver                             |\n\n## ➤ License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsieuhuflit%2Freact-native-stagger-animation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsieuhuflit%2Freact-native-stagger-animation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsieuhuflit%2Freact-native-stagger-animation/lists"}