1
-
2
1
<img width =" 1100 " alt =" header " src =" https://github.com/user-attachments/assets/f007398e-68f6-446a-8580-8a0fb3fab57a " />
3
2
4
3
Ready-to-use CSS Animation presets for React Native Reanimated
@@ -16,7 +15,7 @@ yarn add react-native-css-animations
16
15
17
16
Add ` spin ` style object to an ` Animated ` component add a linear spinning animation. Great for loaders.
18
17
19
- <img src =" https://github.com/user-attachments/assets/d3a87650-83f4-476b-bf85-832a3a2d0fea " alt =" Spin animation demo " align =" right " width =" 350 " />
18
+ <img src =" https://github.com/user-attachments/assets/d3a87650-83f4-476b-bf85-832a3a2d0fea " alt =" Spin animation demo " align =" right " width =" 275 " />
20
19
21
20
``` typescript
22
21
import { spin } from ' react-native-css-animations' ;
@@ -31,9 +30,9 @@ function App() {
31
30
32
31
### Ping
33
32
34
- Add `ping` style object to an `Animated` component to make the element scale and fade. Great for attention grabbing elements like notifications.
33
+ Add `ping` style object to an `Animated` component to make the element scale and fade. Great for attention grabbing elements like notifications.
35
34
36
- <img src="https:// github.com/user-attachments/assets/51c604b4-621b-4821-ab9a-f289f15e07ae" alt="Ping animation demo" align="right" width="350 " />
35
+ <img src="https:// github.com/user-attachments/assets/51c604b4-621b-4821-ab9a-f289f15e07ae" alt="Ping animation demo" align="right" width="275 " />
37
36
38
37
` ` ` typescript
39
38
import { ping } from 'react-native-css-animations';
@@ -50,7 +49,7 @@ function App() {
50
49
51
50
Add ` pulse ` style object to an ` Animated ` component to make it fade in and out . Great for skeleton loaders .
52
51
53
- < img src = " https://github.com/user-attachments/assets/d36924b1-f4f8-4bd4-b3dd-a298d3b2f4b6" alt = " Pulse animation demo" align = " right" width = " 350 " / >
52
+ < img src = " https://github.com/user-attachments/assets/d36924b1-f4f8-4bd4-b3dd-a298d3b2f4b6" alt = " Pulse animation demo" align = " right" width = " 275 " / >
54
53
55
54
` ` ` typescript
56
55
import { pulse } from 'react-native-css-animations';
@@ -67,7 +66,7 @@ function App() {
67
66
68
67
Add ` bounce ` style object to an ` Animated ` component to make it bounce up and down . Great for scroll down indicators .
69
68
70
- < img src = " https://github.com/user-attachments/assets/81e75ed0-b7ec-4f56-a06a-c593a626cb39" alt = " Bounce animation demo" align = " right" width = " 350 " / >
69
+ < img src = " https://github.com/user-attachments/assets/81e75ed0-b7ec-4f56-a06a-c593a626cb39" alt = " Bounce animation demo" align = " right" width = " 275 " / >
71
70
72
71
` ` ` typescript
73
72
import { bounce } from 'react-native-css-animations';
0 commit comments