{"id":24967053,"url":"https://github.com/software-mansion-labs/react-native-css-animations","last_synced_at":"2025-04-09T18:16:26.439Z","repository":{"id":273690403,"uuid":"917052831","full_name":"software-mansion-labs/react-native-css-animations","owner":"software-mansion-labs","description":"React Native CSS Animation presets for Reanimated 4","archived":false,"fork":false,"pushed_at":"2025-01-27T10:57:49.000Z","size":3207,"stargazers_count":52,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-09T18:16:22.001Z","etag":null,"topics":["react-native","react-native-reanimated"],"latest_commit_sha":null,"homepage":"https://docs.swmansion.com/react-native-reanimated/docs/next/category/css-animations","language":"TypeScript","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/software-mansion-labs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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}},"created_at":"2025-01-15T09:08:16.000Z","updated_at":"2025-04-01T07:15:10.000Z","dependencies_parsed_at":"2025-01-22T12:23:30.126Z","dependency_job_id":"539ec34c-ca50-4d6e-a79c-8529700a9e37","html_url":"https://github.com/software-mansion-labs/react-native-css-animations","commit_stats":null,"previous_names":["software-mansion-labs/react-native-css-animations"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/software-mansion-labs%2Freact-native-css-animations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/software-mansion-labs%2Freact-native-css-animations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/software-mansion-labs%2Freact-native-css-animations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/software-mansion-labs%2Freact-native-css-animations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/software-mansion-labs","download_url":"https://codeload.github.com/software-mansion-labs/react-native-css-animations/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248085322,"owners_count":21045139,"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":["react-native","react-native-reanimated"],"created_at":"2025-02-03T12:36:54.947Z","updated_at":"2025-04-09T18:16:26.421Z","avatar_url":"https://github.com/software-mansion-labs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg width=\"1100\" alt=\"header\" src=\"https://github.com/user-attachments/assets/cbf6ecfa-8a0f-4841-8fc0-982aa04e618e\" /\u003e\n\nReady-to-use CSS Animation presets for [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/)\n\n\u003e [!TIP]\n\u003e Since version 4.0, React Native Reanimated comes with a native support for CSS Animations and Transitions. Read [the full announcement to learn more](https://blog.swmansion.com/reanimated-4-is-new-but-also-very-familiar-b926dd59aa40).\n\n## Installation\n\n\u003cpre\u003e\nyarn add \u003ca href=\"https://github.com/software-mansion/react-native-reanimated/docs/next/category/css-animations\" target=\"_blank\"\u003ereact-native-reanimated@next\u003c/a\u003e\nyarn add react-native-css-animations\n\u003c/pre\u003e\n\n## Usage\n\n### Spin\n\nAdd `spin` style object to an `Animated` component add a linear spinning animation. Great for loaders.\n\n\u003cimg src=\"https://github.com/user-attachments/assets/d3a87650-83f4-476b-bf85-832a3a2d0fea\" alt=\"Spin animation demo\" align=\"right\" width=\"275\" /\u003e\n\n```jsx\nimport { spin } from 'react-native-css-animations';\nimport Animated from 'react-native-reanimated';\n\nfunction App() {\n  return \u003cAnimated.View style={[styles.spinner, spin]} /\u003e;\n}\n```\n\n### Ping\n\nAdd `ping` style object to an `Animated` component to make the element scale and fade. Great for attention grabbing elements like notifications.\n\n\u003cimg src=\"https://github.com/user-attachments/assets/51c604b4-621b-4821-ab9a-f289f15e07ae\" alt=\"Ping animation demo\" align=\"right\" width=\"275\" /\u003e\n\n```jsx\nimport { ping } from 'react-native-css-animations';\nimport Animated from 'react-native-reanimated';\n\nfunction App() {\n  return \u003cAnimated.View style={[styles.notification, ping]} /\u003e;\n}\n```\n\n### Pulse\n\nAdd `pulse` style object to an `Animated` component to make it fade in and out. Great for skeleton loaders.\n\n\u003cimg src=\"https://github.com/user-attachments/assets/d36924b1-f4f8-4bd4-b3dd-a298d3b2f4b6\" alt=\"Pulse animation demo\" align=\"right\" width=\"275\"/\u003e\n\n```jsx\nimport { pulse } from 'react-native-css-animations';\nimport Animated from 'react-native-reanimated';\n\nfunction App() {\n  return \u003cAnimated.View style={[styles.skeleton, pulse]} /\u003e;\n}\n```\n\n### Bounce\n\nAdd `bounce` style object to an `Animated` component to make it bounce up and down. Great for scroll down indicators.\n\n\u003cimg src=\"https://github.com/user-attachments/assets/81e75ed0-b7ec-4f56-a06a-c593a626cb39\" alt=\"Bounce animation demo\" align=\"right\" width=\"275\" /\u003e\n\n```jsx\nimport { bounce } from 'react-native-css-animations';\nimport Animated from 'react-native-reanimated';\n\nfunction App() {\n  return \u003cAnimated.View style={[styles.arrow, bounce]} /\u003e;\n}\n```\n\n### Shimmer\n\nAdd `shimmer` style object to an `Animated` component to make it animate from left to right indefinitely. Great for shimmer loading effect.\n\n\u003cimg src=\"https://github.com/user-attachments/assets/2f020a43-1577-485e-b58f-9a8fc660528b\" alt=\"Shimmer animation demo\" align=\"right\" width=\"275\" /\u003e\n\n```jsx\nimport { shimmer } from 'react-native-css-animations';\nimport Animated from 'react-native-reanimated';\n\nfunction App() {\n  return \u003cAnimated.View style={[styles.gradient, shimmer]} /\u003e;\n}\n```\n\n## Alternative API\n\nThe following animations are also available in a form of React Native components.\n\n```jsx\nimport {\n  Spin,\n  Ping,\n  Pulse,\n  Bounce,\n  Shimmer,\n} from 'react-native-css-animations';\n\nfunction App() {\n  return (\n    \u003cBounce style={styles.arrow}\u003e\n      \u003cArrowIcon /\u003e\n    \u003c/Bounce\u003e\n  );\n}\n```\n\n## Customizing animation presets\n\nYou can customize the animation style objects by overriding the styles like so:\n\n```diff\nimport { shimmer } from 'react-native-css-animations';\nimport Animated from 'react-native-reanimated';\n\nfunction App() {\n  return \u003cAnimated.View\n    style={[\n      styles.gradient,\n      shimmer,\n+      {\n+        animationName: {\n+          to: { transform: [{ translateX: '100%' }] },\n+        },\n+      },\n    ]}\n  \u003e\n}\n```\n\n## Examples\n\nSee how the examples where implemented in [our Example app](https://github.com/software-mansion-labs/react-native-css-animations/blob/main/example/src/App.tsx).\n\n## Credits\n\nMost of the examples and animations were adopted from [Tailwind CSS](https://tailwindcss.com/docs/animation).\n\n## React Native CSS Animations were brought to you by Software Mansion\n\nWe are a software agency with experience in building web and mobile apps. Core React Native Contributors and experts in dealing with all kinds of React Native issues. We can help you build your next dream product – [Hire us](https://swmansion.com/contact/projects?utm_source=css-animations\u0026utm_medium=readme).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoftware-mansion-labs%2Freact-native-css-animations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoftware-mansion-labs%2Freact-native-css-animations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoftware-mansion-labs%2Freact-native-css-animations/lists"}