https://github.com/software-mansion-labs/react-native-css-animations
React Native CSS Animation presets for Reanimated 4
https://github.com/software-mansion-labs/react-native-css-animations
react-native react-native-reanimated
Last synced: about 1 year ago
JSON representation
React Native CSS Animation presets for Reanimated 4
- Host: GitHub
- URL: https://github.com/software-mansion-labs/react-native-css-animations
- Owner: software-mansion-labs
- License: mit
- Created: 2025-01-15T09:08:16.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-27T10:57:49.000Z (over 1 year ago)
- Last Synced: 2025-04-09T18:16:22.001Z (about 1 year ago)
- Topics: react-native, react-native-reanimated
- Language: TypeScript
- Homepage: https://docs.swmansion.com/react-native-reanimated/docs/next/category/css-animations
- Size: 3.06 MB
- Stars: 52
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Ready-to-use CSS Animation presets for [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/)
> [!TIP]
> 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).
## Installation
yarn add react-native-reanimated@next
yarn add react-native-css-animations
## Usage
### Spin
Add `spin` style object to an `Animated` component add a linear spinning animation. Great for loaders.
```jsx
import { spin } from 'react-native-css-animations';
import Animated from 'react-native-reanimated';
function App() {
return ;
}
```
### Ping
Add `ping` style object to an `Animated` component to make the element scale and fade. Great for attention grabbing elements like notifications.
```jsx
import { ping } from 'react-native-css-animations';
import Animated from 'react-native-reanimated';
function App() {
return ;
}
```
### Pulse
Add `pulse` style object to an `Animated` component to make it fade in and out. Great for skeleton loaders.
```jsx
import { pulse } from 'react-native-css-animations';
import Animated from 'react-native-reanimated';
function App() {
return ;
}
```
### Bounce
Add `bounce` style object to an `Animated` component to make it bounce up and down. Great for scroll down indicators.
```jsx
import { bounce } from 'react-native-css-animations';
import Animated from 'react-native-reanimated';
function App() {
return ;
}
```
### Shimmer
Add `shimmer` style object to an `Animated` component to make it animate from left to right indefinitely. Great for shimmer loading effect.
```jsx
import { shimmer } from 'react-native-css-animations';
import Animated from 'react-native-reanimated';
function App() {
return ;
}
```
## Alternative API
The following animations are also available in a form of React Native components.
```jsx
import {
Spin,
Ping,
Pulse,
Bounce,
Shimmer,
} from 'react-native-css-animations';
function App() {
return (
);
}
```
## Customizing animation presets
You can customize the animation style objects by overriding the styles like so:
```diff
import { shimmer } from 'react-native-css-animations';
import Animated from 'react-native-reanimated';
function App() {
return
}
```
## Examples
See 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).
## Credits
Most of the examples and animations were adopted from [Tailwind CSS](https://tailwindcss.com/docs/animation).
## React Native CSS Animations were brought to you by Software Mansion
We 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&utm_medium=readme).