0
# Animation Utilities
1

2
Advanced animation behaviors for React Native Reanimated including pausable animations and physics-based bouncing effects.
3

4
```typescript
5
import type { Animation } from "react-native-reanimated";
6
```
7

8
## Capabilities
9

10
### Pausable Animations
11

12
Creates a wrapper around any animation that can be paused and resumed using a SharedValue boolean.
13

14
```typescript { .api }
15
/**
16
 * Creates a pausable animation wrapper
17
 * @param nextAnimation - The animation to wrap (can be function or animation object)
18
 * @param paused - SharedValue<boolean> controlling pause state
19
 * @returns Animation that can be paused/resumed
20
 */
21
function withPause(
22
  nextAnimation: any,
23
  paused: Animated.SharedValue<boolean>
24
): number;
25

26
interface PausableAnimation extends Animation<PausableAnimation> {
27
  lastTimestamp: number;
28
  elapsed: number;
29
}
30
```
31

32
**Usage Example:**
33

34
```typescript
35
import { withPause } from "react-native-redash";
36
import Animated, { 
37
  useSharedValue, 
38
  withSpring, 
39
  useAnimatedStyle 
40
} from "react-native-reanimated";
41

42
const paused = useSharedValue(false);
43
const progress = useSharedValue(0);
44

45
// Start pausable animation
46
progress.value = withPause(withSpring(1), paused);
47

48
// Pause the animation
49
paused.value = true;
50

51
// Resume the animation
52
paused.value = false;
53

54
const animatedStyle = useAnimatedStyle(() => ({
55
  opacity: progress.value
56
}));
57
```
58

59
### Bouncing Physics
60

61
Adds bouncing behavior to physics-based animations when they hit specified boundaries.
62

63
```typescript { .api }
64
/**
65
 * Add bouncing behavior to physics-based animations
66
 * @param nextAnimation - Physics animation with velocity (e.g., withDecay)
67
 * @param lowerBound - Lower boundary for bouncing
68
 * @param upperBound - Upper boundary for bouncing
69
 * @returns Animation that bounces between bounds
70
 */
71
function withBouncing(
72
  nextAnimation: any,
73
  lowerBound: number,
74
  upperBound: number
75
): number;
76

77
interface PhysicsAnimation extends Animation<PhysicsAnimation> {
78
  velocity: number;
79
  current: number;
80
}
81
```
82

83
**Usage Example:**
84

85
```typescript
86
import { withBouncing } from "react-native-redash";
87
import Animated, { 
88
  useSharedValue, 
89
  withDecay, 
90
  useAnimatedGestureHandler 
91
} from "react-native-reanimated";
92
import { PanGestureHandler } from "react-native-gesture-handler";
93

94
const translateX = useSharedValue(0);
95

96
const gestureHandler = useAnimatedGestureHandler({
97
  onEnd: (event) => {
98
    // Bounce between 0 and 300 pixels
99
    translateX.value = withBouncing(
100
      withDecay({ velocity: event.velocityX }),
101
      0,
102
      300
103
    );
104
  }
105
});
106

107
const animatedStyle = useAnimatedStyle(() => ({
108
  transform: [{ translateX: translateX.value }]
109
}));
110
```
111

112
## Types
113

114
```typescript { .api }
115
interface PausableAnimation extends Animation<PausableAnimation> {
116
  /** Timestamp of the last frame before pause */
117
  lastTimestamp: number;
118
  /** Time elapsed while paused */
119
  elapsed: number;
120
}
121

122
interface PhysicsAnimation extends Animation<PhysicsAnimation> {
123
  /** Current velocity of the animation */
124
  velocity: number;
125
  /** Current value of the animation */
126
  current: number;
127
}
128
```