1
# Easing Functions
2

3
Comprehensive collection of easing functions for smooth animation curves and natural motion effects.
4

5
## Capabilities
6

7
### Linear Easing
8

9
Constant rate of change with no acceleration or deceleration.
10

11
```javascript { .api }
12
/**
13
 * Linear easing function with constant rate of change
14
 * @param t - Time parameter (0-1)
15
 * @returns Eased value (0-1)
16
 */
17
function linear(t: number): number;
18
```
19

20
**Usage Examples:**
21

22
```javascript
23
import { linear } from "svelte/easing";
24
import { tweened } from "svelte/motion";
25

26
// Constant speed animation
27
const progress = tweened(0, {
28
  duration: 1000,
29
  easing: linear
30
});
31

32
// Perfect for progress bars and loading indicators
33
progress.set(100);
34
```
35

36
### Quadratic Easing
37

38
Gentle acceleration/deceleration using quadratic curves.
39

40
```javascript { .api }
41
/**
42
 * Quadratic ease in - starts slow, accelerates
43
 * @param t - Time parameter (0-1)
44
 * @returns Eased value (0-1)
45
 */
46
function quadIn(t: number): number;
47

48
/**
49
 * Quadratic ease out - starts fast, decelerates
50
 * @param t - Time parameter (0-1)
51
 * @returns Eased value (0-1)
52
 */
53
function quadOut(t: number): number;
54

55
/**
56
 * Quadratic ease in-out - accelerates then decelerates
57
 * @param t - Time parameter (0-1)
58
 * @returns Eased value (0-1)
59
 */
60
function quadInOut(t: number): number;
61
```
62

63
**Usage Examples:**
64

65
```javascript
66
import { quadIn, quadOut, quadInOut } from "svelte/easing";
67

68
// Gentle acceleration
69
<div transition:fade={{ easing: quadIn }}>
70
  Fades in slowly then faster
71
</div>
72

73
// Gentle deceleration  
74
<div transition:slide={{ easing: quadOut }}>
75
  Slides fast then slows down
76
</div>
77

78
// Smooth in and out
79
<div transition:scale={{ easing: quadInOut }}>
80
  Smooth acceleration and deceleration
81
</div>
82
```
83

84
### Cubic Easing
85

86
Moderate acceleration/deceleration using cubic curves.
87

88
```javascript { .api }
89
/**
90
 * Cubic ease in - moderate acceleration
91
 * @param t - Time parameter (0-1)
92
 * @returns Eased value (0-1)
93
 */
94
function cubicIn(t: number): number;
95

96
/**
97
 * Cubic ease out - moderate deceleration
98
 * @param t - Time parameter (0-1)
99
 * @returns Eased value (0-1)
100
 */
101
function cubicOut(t: number): number;
102

103
/**
104
 * Cubic ease in-out - moderate acceleration then deceleration
105
 * @param t - Time parameter (0-1)
106
 * @returns Eased value (0-1)
107
 */
108
function cubicInOut(t: number): number;
109
```
110

111
**Usage Examples:**
112

113
```javascript
114
import { cubicOut, cubicInOut } from "svelte/easing";
115

116
// Most commonly used - natural feeling
117
<div transition:fly={{ easing: cubicOut }}>
118
  Natural deceleration
119
</div>
120

121
// Smooth both ways
122
<div transition:blur={{ easing: cubicInOut }}>
123
  Balanced acceleration/deceleration
124
</div>
125
```
126

127
### Quartic Easing
128

129
Strong acceleration/deceleration using quartic curves.
130

131
```javascript { .api }
132
/**
133
 * Quartic ease in - strong acceleration
134
 * @param t - Time parameter (0-1)
135
 * @returns Eased value (0-1)
136
 */
137
function quartIn(t: number): number;
138

139
/**
140
 * Quartic ease out - strong deceleration
141
 * @param t - Time parameter (0-1)
142
 * @returns Eased value (0-1)
143
 */
144
function quartOut(t: number): number;
145

146
/**
147
 * Quartic ease in-out - strong acceleration then deceleration
148
 * @param t - Time parameter (0-1)
149
 * @returns Eased value (0-1)
150
 */
151
function quartInOut(t: number): number;
152
```
153

154
### Quintic Easing
155

156
Very strong acceleration/deceleration using quintic curves.
157

158
```javascript { .api }
159
/**
160
 * Quintic ease in - very strong acceleration
161
 * @param t - Time parameter (0-1)
162
 * @returns Eased value (0-1)
163
 */
164
function quintIn(t: number): number;
165

166
/**
167
 * Quintic ease out - very strong deceleration
168
 * @param t - Time parameter (0-1)
169
 * @returns Eased value (0-1)
170
 */
171
function quintOut(t: number): number;
172

173
/**
174
 * Quintic ease in-out - very strong acceleration then deceleration
175
 * @param t - Time parameter (0-1)
176
 * @returns Eased value (0-1)
177
 */
178
function quintInOut(t: number): number;
179
```
180

181
### Sine Easing
182

183
Smooth, wave-like acceleration/deceleration using sine curves.
184

185
```javascript { .api }
186
/**
187
 * Sine ease in - smooth acceleration
188
 * @param t - Time parameter (0-1)
189
 * @returns Eased value (0-1)
190
 */
191
function sineIn(t: number): number;
192

193
/**
194
 * Sine ease out - smooth deceleration
195
 * @param t - Time parameter (0-1)
196
 * @returns Eased value (0-1)
197
 */
198
function sineOut(t: number): number;
199

200
/**
201
 * Sine ease in-out - smooth acceleration then deceleration
202
 * @param t - Time parameter (0-1)
203
 * @returns Eased value (0-1)
204
 */
205
function sineInOut(t: number): number;
206
```
207

208
**Usage Examples:**
209

210
```javascript
211
import { sineInOut } from "svelte/easing";
212

213
// Very smooth, organic feeling
214
<div transition:scale={{ easing: sineInOut }}>
215
  Organic, wave-like motion
216
</div>
217
```
218

219
### Exponential Easing
220

221
Dramatic acceleration/deceleration using exponential curves.
222

223
```javascript { .api }
224
/**
225
 * Exponential ease in - dramatic acceleration
226
 * @param t - Time parameter (0-1)
227
 * @returns Eased value (0-1)
228
 */
229
function expoIn(t: number): number;
230

231
/**
232
 * Exponential ease out - dramatic deceleration
233
 * @param t - Time parameter (0-1)
234
 * @returns Eased value (0-1)
235
 */
236
function expoOut(t: number): number;
237

238
/**
239
 * Exponential ease in-out - dramatic acceleration then deceleration
240
 * @param t - Time parameter (0-1)
241
 * @returns Eased value (0-1)
242
 */
243
function expoInOut(t: number): number;
244
```
245

246
**Usage Examples:**
247

248
```javascript
249
import { expoOut } from "svelte/easing";
250

251
// Dramatic effects, great for reveals
252
<div transition:fly={{ easing: expoOut }}>
253
  Dramatic deceleration
254
</div>
255
```
256

257
### Circular Easing
258

259
Smooth circular arc acceleration/deceleration.
260

261
```javascript { .api }
262
/**
263
 * Circular ease in - circular arc acceleration
264
 * @param t - Time parameter (0-1)
265
 * @returns Eased value (0-1)
266
 */
267
function circIn(t: number): number;
268

269
/**
270
 * Circular ease out - circular arc deceleration
271
 * @param t - Time parameter (0-1)
272
 * @returns Eased value (0-1)
273
 */
274
function circOut(t: number): number;
275

276
/**
277
 * Circular ease in-out - circular arc acceleration then deceleration
278
 * @param t - Time parameter (0-1)
279
 * @returns Eased value (0-1)
280
 */
281
function circInOut(t: number): number;
282
```
283

284
### Back Easing
285

286
Overshoot effects that go slightly beyond the target before settling.
287

288
```javascript { .api }
289
/**
290
 * Back ease in - slight reverse before acceleration
291
 * @param t - Time parameter (0-1)
292
 * @returns Eased value (0-1)
293
 */
294
function backIn(t: number): number;
295

296
/**
297
 * Back ease out - overshoot then settle back
298
 * @param t - Time parameter (0-1)
299
 * @returns Eased value (0-1)
300
 */
301
function backOut(t: number): number;
302

303
/**
304
 * Back ease in-out - reverse, accelerate, overshoot, settle
305
 * @param t - Time parameter (0-1)
306
 * @returns Eased value (0-1)
307
 */
308
function backInOut(t: number): number;
309
```
310

311
**Usage Examples:**
312

313
```javascript
314
import { backOut } from "svelte/easing";
315

316
// Great for UI elements that "pop" into place
317
<div transition:scale={{ easing: backOut }}>
318
  Scales with slight overshoot
319
</div>
320

321
// Perfect for button press effects
322
<button on:click={handleClick} transition:scale={{ easing: backOut, duration: 150 }}>
323
  Click me
324
</button>
325
```
326

327
### Elastic Easing
328

329
Spring-like oscillating effects that settle over time.
330

331
```javascript { .api }
332
/**
333
 * Elastic ease in - oscillating acceleration
334
 * @param t - Time parameter (0-1)
335
 * @returns Eased value (0-1)
336
 */
337
function elasticIn(t: number): number;
338

339
/**
340
 * Elastic ease out - oscillating deceleration
341
 * @param t - Time parameter (0-1)
342
 * @returns Eased value (0-1)
343
 */
344
function elasticOut(t: number): number;
345

346
/**
347
 * Elastic ease in-out - oscillating acceleration then deceleration
348
 * @param t - Time parameter (0-1)
349
 * @returns Eased value (0-1)
350
 */
351
function elasticInOut(t: number): number;
352
```
353

354
**Usage Examples:**
355

356
```javascript
357
import { elasticOut } from "svelte/easing";
358

359
// Bouncy, playful animations
360
<div transition:fly={{ easing: elasticOut }}>
361
  Flies in with elastic bounce
362
</div>
363

364
// Great for notifications or alerts
365
<div class="notification" transition:scale={{ easing: elasticOut }}>
366
  Bouncy notification
367
</div>
368
```
369

370
### Bounce Easing
371

372
Ball-like bouncing effects that simulate physical bouncing.
373

374
```javascript { .api }
375
/**
376
 * Bounce ease in - bouncing acceleration
377
 * @param t - Time parameter (0-1)
378
 * @returns Eased value (0-1)
379
 */
380
function bounceIn(t: number): number;
381

382
/**
383
 * Bounce ease out - bouncing deceleration
384
 * @param t - Time parameter (0-1)
385
 * @returns Eased value (0-1)
386
 */
387
function bounceOut(t: number): number;
388

389
/**
390
 * Bounce ease in-out - bouncing acceleration then deceleration
391
 * @param t - Time parameter (0-1)
392
 * @returns Eased value (0-1)
393
 */
394
function bounceInOut(t: number): number;
395
```
396

397
**Usage Examples:**
398

399
```javascript
400
import { bounceOut } from "svelte/easing";
401

402
// Physical bouncing effects
403
<div transition:fly={{ y: -100, easing: bounceOut }}>
404
  Drops and bounces
405
</div>
406

407
// Playful UI interactions
408
<div class="ball" transition:scale={{ easing: bounceOut }}>
409
  Bouncing ball effect
410
</div>
411
```
412

413
## Easing Function Selection Guide
414

415
### Common Use Cases
416

417
**UI Transitions (buttons, modals, dropdowns):**
418
- `cubicOut` - Most natural feeling
419
- `backOut` - Subtle overshoot for emphasis
420
- `quadOut` - Gentle, smooth
421

422
**Dramatic Reveals:**
423
- `expoOut` - Dramatic slowdown
424
- `elasticOut` - Bouncy reveal
425
- `bounceOut` - Playful bounce
426

427
**Loading Animations:**
428
- `linear` - Consistent progress
429
- `sineInOut` - Smooth wave-like
430
- `quadInOut` - Gentle acceleration/deceleration
431

432
**Page Transitions:**
433
- `cubicInOut` - Balanced feel
434
- `quintOut` - Strong deceleration
435
- `circInOut` - Smooth arcs
436

437
### Performance Considerations
438

439
```javascript
440
import { cubicOut } from "svelte/easing";
441

442
// Prefer CSS-based transitions for better performance
443
const fastTransition = {
444
  duration: 200,
445
  easing: cubicOut
446
};
447

448
// Use tick callback sparingly for complex effects
449
const complexTransition = {
450
  duration: 1000,
451
  easing: elasticOut,
452
  tick: (t, u) => {
453
    // Custom animation logic
454
    node.style.transform = `scale(${t}) rotate(${u * 360}deg)`;
455
  }
456
};
457
```
458

459
### Custom Easing Functions
460

461
Create your own easing functions for specialized effects:
462

463
```javascript
464
// Custom ease function
465
function customEase(t) {
466
  // Create custom curve - must return 0-1 for input 0-1
467
  return t * t * (3 - 2 * t); // Smoothstep
468
}
469

470
// Stepped easing
471
function steps(count) {
472
  return (t) => Math.floor(t * count) / count;
473
}
474

475
// Usage
476
<div transition:fade={{ easing: customEase }}>
477
  Custom eased fade
478
</div>
479

480
<div transition:scale={{ easing: steps(5) }}>
481
  5-step discrete scaling
482
</div>
483
```