0
# Built-in Animations
1

2
Comprehensive collection of 50+ pre-built animations across 11 categories, heavily inspired by Animate.css. All animations are ready to use by name with any animatable component.
3

4
## Capabilities
5

6
### Attention Seekers
7

8
Animations designed to catch the user's attention and draw focus to specific elements.
9

10
```javascript { .api }
11
type AttentionSeekerAnimations = 
12
  | 'bounce'      // Bouncing effect animation
13
  | 'flash'       // Flashing opacity animation  
14
  | 'jello'       // Jello-like skew animation
15
  | 'pulse'       // Pulsing scale animation
16
  | 'rotate'      // Full 360-degree rotation
17
  | 'rubberBand'  // Rubber band stretch effect
18
  | 'shake'       // Horizontal shaking motion
19
  | 'swing'       // Pendulum swing rotation
20
  | 'tada'        // Celebration-style scale and rotation
21
  | 'wobble';     // Wobbling translation and rotation
22
```
23

24
**Usage Examples:**
25

26
```javascript
27
// Continuous pulse for heart icon
28
<Animatable.Text 
29
  animation="pulse" 
30
  easing="ease-out" 
31
  iterationCount="infinite" 
32
  style={{ textAlign: 'center' }}
33
>
34
  ❤️
35
</Animatable.Text>
36

37
// Shake on error
38
<Animatable.View animation="shake" duration={500}>
39
  <Text style={{ color: 'red' }}>Invalid input!</Text>
40
</Animatable.View>
41

42
// Celebrate success
43
<Animatable.View animation="tada" duration={1000}>
44
  <Text>🎉 Success!</Text>
45
</Animatable.View>
46
```
47

48
### Bouncing Entrances
49

50
Entrance animations with bouncing effects, ideal for creating playful entry transitions.
51

52
```javascript { .api }
53
type BouncingEntranceAnimations = 
54
  | 'bounceIn'      // Bounce in from scale
55
  | 'bounceInDown'  // Bounce in from top
56
  | 'bounceInUp'    // Bounce in from bottom
57
  | 'bounceInLeft'  // Bounce in from left
58
  | 'bounceInRight'; // Bounce in from right
59
```
60

61
### Bouncing Exits
62

63
Exit animations with bouncing effects for smooth element removal.
64

65
```javascript { .api }
66
type BouncingExitAnimations = 
67
  | 'bounceOut'      // Bounce out with scale
68
  | 'bounceOutDown'  // Bounce out to bottom
69
  | 'bounceOutUp'    // Bounce out to top
70
  | 'bounceOutLeft'  // Bounce out to left
71
  | 'bounceOutRight'; // Bounce out to right
72
```
73

74
### Fading Entrances
75

76
Smooth fade-in animations with optional directional movement, perfect for content reveals.
77

78
```javascript { .api }
79
type FadingEntranceAnimations = 
80
  | 'fadeIn'         // Simple fade in
81
  | 'fadeInDown'     // Fade in from top with translation
82
  | 'fadeInUp'       // Fade in from bottom with translation
83
  | 'fadeInLeft'     // Fade in from left with translation
84
  | 'fadeInRight'    // Fade in from right with translation
85
  | 'fadeInDownBig'  // Fade in from far top
86
  | 'fadeInUpBig'    // Fade in from far bottom
87
  | 'fadeInLeftBig'  // Fade in from far left
88
  | 'fadeInRightBig'; // Fade in from far right
89
```
90

91
**Usage Examples:**
92

93
```javascript
94
// Simple fade in for modal
95
<Animatable.View animation="fadeIn" duration={300}>
96
  <Modal>
97
    <Text>Modal content</Text>
98
  </Modal>
99
</Animatable.View>
100

101
// Staggered list item entrances
102
{items.map((item, index) => (
103
  <Animatable.View 
104
    key={item.id}
105
    animation="fadeInUp"
106
    delay={index * 100}
107
    duration={600}
108
  >
109
    <ListItem data={item} />
110
  </Animatable.View>
111
))}
112
```
113

114
### Fading Exits
115

116
Smooth fade-out animations with optional directional movement for element removal.
117

118
```javascript { .api }
119
type FadingExitAnimations = 
120
  | 'fadeOut'         // Simple fade out
121
  | 'fadeOutDown'     // Fade out to bottom with translation
122
  | 'fadeOutUp'       // Fade out to top with translation
123
  | 'fadeOutLeft'     // Fade out to left with translation
124
  | 'fadeOutRight'    // Fade out to right with translation
125
  | 'fadeOutDownBig'  // Fade out to far bottom
126
  | 'fadeOutUpBig'    // Fade out to far top
127
  | 'fadeOutLeftBig'  // Fade out to far left
128
  | 'fadeOutRightBig'; // Fade out to far right
129
```
130

131
### Flippers
132

133
3D flip animations around X and Y axes for card-like transitions.
134

135
```javascript { .api }
136
type FlipperAnimations = 
137
  | 'flipInX'   // Flip in around X axis
138
  | 'flipInY'   // Flip in around Y axis
139
  | 'flipOutX'  // Flip out around X axis
140
  | 'flipOutY'; // Flip out around Y axis
141
```
142

143
**Usage Examples:**
144

145
```javascript
146
// Card flip animation
147
<Animatable.View 
148
  animation={this.state.showBack ? "flipInY" : "flipOutY"}
149
  duration={600}
150
  style={styles.card}
151
>
152
  {this.state.showBack ? <BackContent /> : <FrontContent />}
153
</Animatable.View>
154
```
155

156
### Lightspeed
157

158
High-speed entrance and exit animations with skew effects for dynamic movement.
159

160
```javascript { .api }
161
type LightspeedAnimations = 
162
  | 'lightSpeedIn'  // Light speed entrance with skew
163
  | 'lightSpeedOut'; // Light speed exit with skew
164
```
165

166
### Sliding Entrances
167

168
Directional slide-in animations for smooth content presentation.
169

170
```javascript { .api }
171
type SlidingEntranceAnimations = 
172
  | 'slideInDown'  // Slide in from top
173
  | 'slideInUp'    // Slide in from bottom
174
  | 'slideInLeft'  // Slide in from left
175
  | 'slideInRight'; // Slide in from right
176
```
177

178
### Sliding Exits
179

180
Directional slide-out animations for clean content removal.
181

182
```javascript { .api }
183
type SlidingExitAnimations = 
184
  | 'slideOutDown'  // Slide out to bottom
185
  | 'slideOutUp'    // Slide out to top
186
  | 'slideOutLeft'  // Slide out to left
187
  | 'slideOutRight'; // Slide out to right
188
```
189

190
**Usage Examples:**
191

192
```javascript
193
// Drawer animation
194
<Animatable.View 
195
  animation={this.state.drawerOpen ? "slideInLeft" : "slideOutLeft"}
196
  duration={300}
197
  style={styles.drawer}
198
>
199
  <DrawerContent />
200
</Animatable.View>
201

202
// Page transitions
203
<Animatable.View 
204
  animation="slideInRight" 
205
  duration={400}
206
  style={styles.page}
207
>
208
  <PageContent />
209
</Animatable.View>
210
```
211

212
### Zooming Entrances
213

214
Scale-based entrance animations with optional directional movement.
215

216
```javascript { .api }
217
type ZoomingEntranceAnimations = 
218
  | 'zoomIn'      // Zoom in from scale
219
  | 'zoomInDown'  // Zoom in from top
220
  | 'zoomInUp'    // Zoom in from bottom
221
  | 'zoomInLeft'  // Zoom in from left
222
  | 'zoomInRight'; // Zoom in from right
223
```
224

225
### Zooming Exits
226

227
Scale-based exit animations with optional directional movement.
228

229
```javascript { .api }
230
type ZoomingExitAnimations = 
231
  | 'zoomOut'      // Zoom out to scale
232
  | 'zoomOutDown'  // Zoom out to bottom
233
  | 'zoomOutUp'    // Zoom out to top
234
  | 'zoomOutLeft'  // Zoom out to left
235
  | 'zoomOutRight'; // Zoom out to right
236
```
237

238
**Usage Examples:**
239

240
```javascript
241
// Button press feedback
242
<Animatable.TouchableOpacity 
243
  animation="zoomIn" 
244
  duration={150}
245
  onPress={this.handlePress}
246
>
247
  <Text>Press me!</Text>
248
</Animatable.TouchableOpacity>
249

250
// Image gallery entrance
251
<Animatable.Image 
252
  source={{ uri: imageUrl }}
253
  animation="zoomInUp"
254
  duration={800}
255
  style={styles.galleryImage}
256
/>
257
```
258

259
## Complete Animation Type
260

261
```javascript { .api }
262
type Animation = 
263
  | AttentionSeekerAnimations
264
  | BouncingEntranceAnimations 
265
  | BouncingExitAnimations
266
  | FadingEntranceAnimations
267
  | FadingExitAnimations
268
  | FlipperAnimations
269
  | LightspeedAnimations
270
  | SlidingEntranceAnimations
271
  | SlidingExitAnimations
272
  | ZoomingEntranceAnimations
273
  | ZoomingExitAnimations;
274
```
275

276
## Animation Usage Patterns
277

278
### Entrance Sequences
279

280
```javascript
281
// Stagger multiple elements
282
const items = ['item1', 'item2', 'item3'];
283

284
{items.map((item, index) => (
285
  <Animatable.View
286
    key={item}
287
    animation="fadeInUp"
288
    delay={index * 150}
289
    duration={600}
290
  >
291
    <Text>{item}</Text>
292
  </Animatable.View>
293
))}
294
```
295

296
### Page Transitions
297

298
```javascript
299
// Screen transition
300
<Animatable.View 
301
  animation={this.state.entering ? "slideInRight" : "slideOutLeft"}
302
  duration={300}
303
  style={{ flex: 1 }}
304
>
305
  <ScreenContent />
306
</Animatable.View>
307
```
308

309
### Loading States
310

311
```javascript
312
// Loading indicator
313
<Animatable.View 
314
  animation="pulse" 
315
  iterationCount="infinite"
316
  easing="ease-in-out"
317
>
318
  <ActivityIndicator size="large" />
319
</Animatable.View>
320
```
321

322
### Error Feedback
323

324
```javascript
325
// Shake on validation error
326
{this.state.hasError && (
327
  <Animatable.View animation="shake" duration={500}>
328
    <Text style={styles.error}>Please fix the errors above</Text>
329
  </Animatable.View>
330
)}
331
```