0
# Easing Functions
1

2
Pre-built easing functions for animations and smooth transitions. Includes polynomial, exponential, elastic, and bounce easing curves.
3

4
## Capabilities
5

6
### Function Generators
7

8
Higher-order functions that create customized easing functions.
9

10
```typescript { .api }
11
/**
12
 * Creates exponential ease-in function with exponent k
13
 * @param k - Exponent value (higher = steeper curve)
14
 * @returns Ease-in function
15
 */
16
function defEaseInExp(k: number): (t: number) => number;
17

18
/**
19
 * Creates exponential ease-out function with exponent k
20
 * @param k - Exponent value (higher = steeper curve)
21
 * @returns Ease-out function
22
 */
23
function defEaseOutExp(k: number): (t: number) => number;
24

25
/**
26
 * Creates exponential ease-in-out function with exponent k
27
 * @param k - Exponent value (higher = steeper curve)
28
 * @returns Ease-in-out function
29
 */
30
function defEaseInOutExp(k: number): (t: number) => number;
31
```
32

33
**Usage Examples:**
34

35
```typescript
36
import { defEaseInExp, defEaseOutExp } from "@thi.ng/math/easing";
37

38
// Create custom exponential easing functions
39
const strongEaseIn = defEaseInExp(4);
40
const gentleEaseOut = defEaseOutExp(2);
41

42
// Use in animations
43
const value = strongEaseIn(0.5); // Strong acceleration
44
const softValue = gentleEaseOut(0.7); // Gentle deceleration
45
```
46

47
### Linear Easing
48

49
```typescript { .api }
50
/**
51
 * Linear interpolation (no easing)
52
 * @param t - Time parameter [0,1]
53
 * @returns Linear value
54
 */
55
function easeLinear(t: number): number;
56
```
57

58
### Polynomial Easing
59

60
Polynomial easing functions with different degrees for varying curve steepness.
61

62
```typescript { .api }
63
/** Quadratic ease-in: t² */
64
function easeIn2(t: number): number;
65

66
/** Quadratic ease-out: 1-(1-t)² */
67
function easeOut2(t: number): number;
68

69
/** Quadratic ease-in-out: combination of ease-in and ease-out */
70
function easeInOut2(t: number): number;
71

72
/** Cubic ease-in: t³ */
73
function easeIn3(t: number): number;
74

75
/** Cubic ease-out: 1-(1-t)³ */
76
function easeOut3(t: number): number;
77

78
/** Cubic ease-in-out: combination of ease-in and ease-out */
79
function easeInOut3(t: number): number;
80

81
/** Quartic ease-in: t⁴ */
82
function easeIn4(t: number): number;
83

84
/** Quartic ease-out: 1-(1-t)⁴ */
85
function easeOut4(t: number): number;
86

87
/** Quartic ease-in-out: combination of ease-in and ease-out */
88
function easeInOut4(t: number): number;
89

90
/** Quintic ease-in: t⁵ */
91
function easeIn5(t: number): number;
92

93
/** Quintic ease-out: 1-(1-t)⁵ */
94
function easeOut5(t: number): number;
95

96
/** Quintic ease-in-out: combination of ease-in and ease-out */
97
function easeInOut5(t: number): number;
98
```
99

100
**Usage Examples:**
101

102
```typescript
103
import { easeIn3, easeOut3, easeInOut3 } from "@thi.ng/math/easing";
104

105
// Cubic easing variations
106
const accelerating = easeIn3(0.3); // Slow start, fast end
107
const decelerating = easeOut3(0.7); // Fast start, slow end
108
const smooth = easeInOut3(0.5); // Smooth acceleration/deceleration
109
```
110

111
### Back Easing
112

113
Back easing functions that overshoot the target before settling.
114

115
```typescript { .api }
116
/** Back ease-in: overshoots backwards before forward motion */
117
function easeInBack(t: number): number;
118

119
/** Back ease-out: overshoots forward past target then returns */
120
function easeOutBack(t: number): number;
121

122
/** Back ease-in-out: combination of back ease-in and ease-out */
123
function easeInOutBack(t: number): number;
124
```
125

126
### Bounce Easing
127

128
Bounce easing functions that simulate bouncing ball physics.
129

130
```typescript { .api }
131
/** Bounce ease-in: bouncing effect at start */
132
function easeInBounce(t: number): number;
133

134
/** Bounce ease-out: bouncing effect at end */
135
function easeOutBounce(t: number): number;
136

137
/** Bounce ease-in-out: bouncing at both start and end */
138
function easeInOutBounce(t: number): number;
139
```
140

141
### Circular Easing
142

143
Circular easing based on quarter-circle curves.
144

145
```typescript { .api }
146
/** Circular ease-in: quarter circle curve */
147
function easeInCirc(t: number): number;
148

149
/** Circular ease-out: inverted quarter circle */
150
function easeOutCirc(t: number): number;
151

152
/** Circular ease-in-out: combination of circular curves */
153
function easeInOutCirc(t: number): number;
154
```
155

156
### Elastic Easing
157

158
Elastic easing functions that simulate elastic/spring behavior.
159

160
```typescript { .api }
161
/** Elastic ease-in: elastic oscillation at start */
162
function easeInElastic(t: number): number;
163

164
/** Elastic ease-out: elastic oscillation at end */
165
function easeOutElastic(t: number): number;
166

167
/** Elastic ease-in-out: elastic oscillation at both ends */
168
function easeInOutElastic(t: number): number;
169
```
170

171
### Exponential Easing
172

173
Exponential easing functions using base-2 exponentials.
174

175
```typescript { .api }
176
/** Exponential ease-in (base 2): 2^(10*(t-1)) */
177
function easeInExp2(t: number): number;
178

179
/** Exponential ease-out (base 2): -(2^(-10*t)) + 1 */
180
function easeOutExp2(t: number): number;
181

182
/** Exponential ease-in-out (base 2): combination of exponential curves */
183
function easeInOutExp2(t: number): number;
184
```
185

186
### Sinusoidal Easing
187

188
Easing functions based on sine wave curves.
189

190
```typescript { .api }
191
/** Sinusoidal ease-in: sine curve acceleration */
192
function easeInSine(t: number): number;
193

194
/** Sinusoidal ease-out: sine curve deceleration */
195
function easeOutSine(t: number): number;
196

197
/** Sinusoidal ease-in-out: smooth sine curve transition */
198
function easeInOutSine(t: number): number;
199
```
200

201
**Usage Examples:**
202

203
```typescript
204
import { 
205
  easeOutBounce, easeInBack, easeInElastic, 
206
  easeInOutCirc, easeOutExp2, easeInOutSine 
207
} from "@thi.ng/math/easing";
208

209
// Different easing effects for animations
210
const bounceEnd = easeOutBounce(0.8); // Bouncy landing
211
const overshoot = easeInBack(0.6); // Pull back before moving
212
const springy = easeInElastic(0.4); // Elastic oscillation
213
const smooth = easeInOutCirc(0.5); // Smooth circular transition
214
const explosive = easeOutExp2(0.3); // Fast exponential movement
215
const gentle = easeInOutSine(0.7); // Gentle sinusoidal curve
216

217
// Use in animation frameworks
218
function animate(startValue: number, endValue: number, progress: number) {
219
  const easedProgress = easeOutBounce(progress);
220
  return startValue + (endValue - startValue) * easedProgress;
221
}
222
```
223

224
## Animation Integration Examples
225

226
```typescript
227
import { easeInOut3, easeOutBounce, easeInBack } from "@thi.ng/math/easing";
228
import { mix } from "@thi.ng/math/mix";
229

230
// Simple property animation
231
function animateProperty(
232
  start: number, 
233
  end: number, 
234
  duration: number, 
235
  easingFn: (t: number) => number
236
) {
237
  return (time: number) => {
238
    const progress = Math.min(time / duration, 1);
239
    const easedProgress = easingFn(progress);
240
    return mix(start, end, easedProgress);
241
  };
242
}
243

244
// Usage examples
245
const smoothMove = animateProperty(0, 100, 1000, easeInOut3);
246
const bouncyScale = animateProperty(1, 2, 800, easeOutBounce);
247
const snapRotation = animateProperty(0, 360, 600, easeInBack);
248

249
// At animation time t
250
const position = smoothMove(500); // At 500ms
251
const scale = bouncyScale(400); // At 400ms
252
const rotation = snapRotation(300); // At 300ms
253
```