0
# Easing Functions
1

2
Velocity provides a comprehensive library of easing functions for natural motion, including CSS standard easings, mathematical curves, and physics-based easings.
3

4
## Basic Easings
5

6
```typescript { .api }
7
interface BasicEasings {
8
  linear: VelocityEasingFn;
9
  swing: VelocityEasingFn;
10
  spring: VelocityEasingFn;
11
}
12
```
13

14
### Linear
15
Constant rate of change with no acceleration or deceleration.
16

17
### Swing  
18
Default easing with gentle acceleration and deceleration (similar to ease-in-out).
19

20
### Spring
21
Physics-based spring motion with natural bounce characteristics.
22

23
## CSS Standard Easings
24

25
```typescript { .api }
26
interface CSSEasings {
27
  ease: VelocityEasingFn;
28
  "ease-in": VelocityEasingFn;
29
  "ease-out": VelocityEasingFn;
30
  "ease-in-out": VelocityEasingFn;
31
}
32
```
33

34
### Ease
35
CSS standard easing (equivalent to cubic-bezier(0.25, 0.1, 0.25, 1)).
36

37
### Ease-In
38
Slow start, fast finish (equivalent to cubic-bezier(0.42, 0, 1, 1)).
39

40
### Ease-Out
41
Fast start, slow finish (equivalent to cubic-bezier(0, 0, 0.58, 1)).
42

43
### Ease-In-Out
44
Slow start and finish, fast middle (equivalent to cubic-bezier(0.42, 0, 0.58, 1)).
45

46
## Sine Easings
47

48
```typescript { .api }
49
interface SineEasings {
50
  easeInSine: VelocityEasingFn;
51
  easeOutSine: VelocityEasingFn;
52
  easeInOutSine: VelocityEasingFn;
53
}
54
```
55

56
Sine wave-based easings providing smooth, gentle curves.
57

58
## Quadratic Easings
59

60
```typescript { .api }
61
interface QuadraticEasings {
62
  easeInQuad: VelocityEasingFn;
63
  easeOutQuad: VelocityEasingFn;
64
  easeInOutQuad: VelocityEasingFn;
65
}
66
```
67

68
Quadratic (power of 2) acceleration curves.
69

70
## Cubic Easings
71

72
```typescript { .api }
73
interface CubicEasings {
74
  easeInCubic: VelocityEasingFn;
75
  easeOutCubic: VelocityEasingFn;
76
  easeInOutCubic: VelocityEasingFn;
77
}
78
```
79

80
Cubic (power of 3) acceleration curves with more pronounced effects than quadratic.
81

82
## Quartic Easings
83

84
```typescript { .api }
85
interface QuarticEasings {
86
  easeInQuart: VelocityEasingFn;
87
  easeOutQuart: VelocityEasingFn; 
88
  easeInOutQuart: VelocityEasingFn;
89
}
90
```
91

92
Quartic (power of 4) acceleration curves with strong acceleration effects.
93

94
## Quintic Easings
95

96
```typescript { .api }
97
interface QuinticEasings {
98
  easeInQuint: VelocityEasingFn;
99
  easeOutQuint: VelocityEasingFn;
100
  easeInOutQuint: VelocityEasingFn;
101
}
102
```
103

104
Quintic (power of 5) acceleration curves with very strong acceleration effects.
105

106
## Exponential Easings
107

108
```typescript { .api }
109
interface ExponentialEasings {
110
  easeInExpo: VelocityEasingFn;
111
  easeOutExpo: VelocityEasingFn;
112
  easeInOutExpo: VelocityEasingFn;
113
}
114
```
115

116
Exponential curves providing sharp acceleration changes.
117

118
## Circular Easings
119

120
```typescript { .api }
121
interface CircularEasings {
122
  easeInCirc: VelocityEasingFn;
123
  easeOutCirc: VelocityEasingFn;
124
  easeInOutCirc: VelocityEasingFn;
125
}
126
```
127

128
Circular curves based on quarter-circle arcs.
129

130
## Back Easings
131

132
```typescript { .api }
133
interface BackEasings {
134
  easeInBack: VelocityEasingFn;
135
  easeOutBack: VelocityEasingFn;
136
  easeInOutBack: VelocityEasingFn;
137
}
138
```
139

140
Back easings that overshoot the target before settling, creating a "pull-back" effect.
141

142
## Elastic Easings
143

144
```typescript { .api }
145
interface ElasticEasings {
146
  easeInElastic: VelocityEasingFn;
147
  easeOutElastic: VelocityEasingFn;
148
  easeInOutElastic: VelocityEasingFn;
149
}
150
```
151

152
Elastic easings that oscillate around the target like a rubber band.
153

154
## Bounce Easings
155

156
```typescript { .api }
157
interface BounceEasings {
158
  easeInBounce: VelocityEasingFn;
159
  easeOutBounce: VelocityEasingFn;
160
  easeInOutBounce: VelocityEasingFn;
161
}
162
```
163

164
Bounce easings that simulate a bouncing ball effect.
165

166
## Step Easings
167

168
```typescript { .api }
169
interface StepEasings {
170
  "at-start": VelocityEasingFn;
171
  "at-end": VelocityEasingFn;
172
  during: VelocityEasingFn;
173
}
174
```
175

176
Step-based easings for discrete value changes.
177

178
## Custom Easing Functions
179

180
### Bezier Generator
181

182
```typescript { .api }
183
function generateBezier(
184
  x1: number,
185
  y1: number, 
186
  x2: number,
187
  y2: number
188
): VelocityEasingFn;
189
```
190

191
Creates custom cubic-bezier easing functions.
192

193
### Spring Physics
194

195
```typescript { .api }
196
interface SpringEasing {
197
  (tension: number, friction: number): VelocityEasingFn;
198
}
199
```
200

201
Physics-based spring easings with configurable tension and friction parameters.
202

203
## Easing Types
204

205
```typescript { .api }
206
type VelocityEasingType = 
207
  | VelocityEasingFn
208
  | keyof VelocityEasings
209
  | [number, number, number, number]  // cubic-bezier values
210
  | string;
211

212
type VelocityEasingFn = (
213
  percentComplete: number,
214
  startValue: number,
215
  endValue: number,
216
  duration: number
217
) => number;
218
```
219

220
## Usage Examples
221

222
### Basic Easing
223

224
```typescript
225
import Velocity from "velocity-animate";
226

227
// Use predefined easing
228
Velocity(element, { translateX: "200px" }, {
229
  duration: 1000,
230
  easing: "easeInOutQuad"
231
});
232

233
// Use CSS standard easing
234
Velocity(element, { opacity: 0 }, {
235
  duration: 500,
236
  easing: "ease-out"
237
});
238
```
239

240
### Advanced Easings
241

242
```typescript
243
// Elastic bounce effect
244
Velocity(element, { scale: 1.2 }, {
245
  duration: 800,
246
  easing: "easeOutElastic"
247
});
248

249
// Back overshoot effect
250
Velocity(element, { translateY: "-100px" }, {
251
  duration: 600,
252
  easing: "easeInOutBack"
253
});
254

255
// Bounce landing effect
256
Velocity(element, { translateY: "0px" }, {
257
  duration: 900,
258
  easing: "easeOutBounce"
259
});
260
```
261

262
### Custom Bezier Easings
263

264
```typescript
265
// Generate custom bezier easing
266
const customEasing = Velocity.Easings.generateBezier(0.25, 0.46, 0.45, 0.94);
267

268
Velocity(element, { rotateZ: "360deg" }, {
269
  duration: 1200,
270
  easing: customEasing
271
});
272

273
// Or use bezier array directly
274
Velocity(element, { translateX: "300px" }, {
275
  duration: 1000,
276
  easing: [0.68, -0.55, 0.265, 1.55]  // Back ease out
277
});
278
```
279

280
### Per-Property Easing
281

282
```typescript
283
// Different easing for each property using array notation
284
Velocity(element, {
285
  translateX: ["0px", "200px", "easeOutQuad"],
286
  translateY: ["0px", "-100px", "easeInBounce"],
287
  rotateZ: ["0deg", "180deg", "easeInOutElastic"],
288
  opacity: [1, 0.5, "linear"]
289
}, 1500);
290
```
291

292
### Spring Physics Easing
293

294
```typescript
295
// Custom spring with high tension, low friction (snappy)
296
const snappySpring = Velocity.Easings.spring(300, 10);
297

298
Velocity(element, { scale: 1.5 }, {
299
  duration: 800,
300
  easing: snappySpring
301
});
302

303
// Custom spring with low tension, high friction (smooth)
304
const smoothSpring = Velocity.Easings.spring(100, 25);
305

306
Velocity(element, { translateX: "250px" }, {
307
  duration: 1200,
308
  easing: smoothSpring
309
});
310
```
311

312
### Registering Custom Easings
313

314
```typescript
315
// Register a custom easing function
316
Velocity.Easings.myCustomEasing = function(t, b, c, d) {
317
  // t = current time
318
  // b = start value
319
  // c = change in value
320
  // d = duration
321
  return c * Math.sin(t / d * Math.PI / 2) + b;
322
};
323

324
// Use the custom easing
325
Velocity(element, { opacity: 0 }, {
326
  duration: 1000,
327
  easing: "myCustomEasing"
328
});
329
```
330

331
### Easing Comparison
332

333
```typescript
334
// Compare different easings on similar animations
335
const elements = document.querySelectorAll(".comparison");
336

337
// Linear movement
338
Velocity(elements[0], { translateX: "200px" }, { easing: "linear" });
339

340
// Ease out for natural deceleration
341
Velocity(elements[1], { translateX: "200px" }, { easing: "easeOutQuad" });
342

343
// Bounce for playful effect
344
Velocity(elements[2], { translateX: "200px" }, { easing: "easeOutBounce" });
345

346
// Elastic for attention-grabbing effect
347
Velocity(elements[3], { translateX: "200px" }, { easing: "easeOutElastic" });
348
```