1
# Easing Functions
2

3
Svelte provides a comprehensive collection of easing functions for smooth animations and transitions. These functions are mathematical curves that control the rate of change during animations.
4

5
## Capabilities
6

7
### Linear Easing
8

9
The simplest easing function that provides constant rate of change.
10

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

20
### Back Easing
21

22
Easing functions that go slightly beyond their target before settling.
23

24
```typescript { .api }
25
/**
26
 * Back-in easing - starts slow with slight reverse motion
27
 * @param t - Time progress from 0 to 1
28
 * @returns Eased value
29
 */
30
function backIn(t: number): number;
31

32
/**
33
 * Back-out easing - ends slow with slight overshoot
34
 * @param t - Time progress from 0 to 1
35
 * @returns Eased value
36
 */
37
function backOut(t: number): number;
38

39
/**
40
 * Back-in-out easing - combines backIn and backOut
41
 * @param t - Time progress from 0 to 1
42
 * @returns Eased value
43
 */
44
function backInOut(t: number): number;
45
```
46

47
### Bounce Easing
48

49
Easing functions that simulate bouncing motion.
50

51
```typescript { .api }
52
/**
53
 * Bounce-in easing - bouncing motion at the start
54
 * @param t - Time progress from 0 to 1
55
 * @returns Eased value
56
 */
57
function bounceIn(t: number): number;
58

59
/**
60
 * Bounce-out easing - bouncing motion at the end
61
 * @param t - Time progress from 0 to 1
62
 * @returns Eased value
63
 */
64
function bounceOut(t: number): number;
65

66
/**
67
 * Bounce-in-out easing - bouncing motion at start and end
68
 * @param t - Time progress from 0 to 1
69
 * @returns Eased value
70
 */
71
function bounceInOut(t: number): number;
72
```
73

74
### Circular Easing
75

76
Easing functions based on circular motion curves.
77

78
```typescript { .api }
79
/**
80
 * Circular-in easing - accelerating circular motion
81
 * @param t - Time progress from 0 to 1
82
 * @returns Eased value
83
 */
84
function circIn(t: number): number;
85

86
/**
87
 * Circular-out easing - decelerating circular motion
88
 * @param t - Time progress from 0 to 1
89
 * @returns Eased value
90
 */
91
function circOut(t: number): number;
92

93
/**
94
 * Circular-in-out easing - combines circIn and circOut
95
 * @param t - Time progress from 0 to 1
96
 * @returns Eased value
97
 */
98
function circInOut(t: number): number;
99
```
100

101
### Cubic Easing
102

103
Easing functions based on cubic curves (most commonly used).
104

105
```typescript { .api }
106
/**
107
 * Cubic-in easing - slow start, accelerating
108
 * @param t - Time progress from 0 to 1
109
 * @returns Eased value
110
 */
111
function cubicIn(t: number): number;
112

113
/**
114
 * Cubic-out easing - fast start, decelerating (most popular)
115
 * @param t - Time progress from 0 to 1
116
 * @returns Eased value
117
 */
118
function cubicOut(t: number): number;
119

120
/**
121
 * Cubic-in-out easing - slow start and end, fast middle
122
 * @param t - Time progress from 0 to 1
123
 * @returns Eased value
124
 */
125
function cubicInOut(t: number): number;
126
```
127

128
### Elastic Easing
129

130
Easing functions that simulate elastic or spring-like motion.
131

132
```typescript { .api }
133
/**
134
 * Elastic-in easing - elastic motion at the start
135
 * @param t - Time progress from 0 to 1
136
 * @returns Eased value
137
 */
138
function elasticIn(t: number): number;
139

140
/**
141
 * Elastic-out easing - elastic motion at the end
142
 * @param t - Time progress from 0 to 1
143
 * @returns Eased value
144
 */
145
function elasticOut(t: number): number;
146

147
/**
148
 * Elastic-in-out easing - elastic motion at start and end
149
 * @param t - Time progress from 0 to 1
150
 * @returns Eased value
151
 */
152
function elasticInOut(t: number): number;
153
```
154

155
### Exponential Easing
156

157
Easing functions based on exponential curves.
158

159
```typescript { .api }
160
/**
161
 * Exponential-in easing - very slow start, sharp acceleration
162
 * @param t - Time progress from 0 to 1
163
 * @returns Eased value
164
 */
165
function expoIn(t: number): number;
166

167
/**
168
 * Exponential-out easing - sharp start, gradual deceleration
169
 * @param t - Time progress from 0 to 1
170
 * @returns Eased value
171
 */
172
function expoOut(t: number): number;
173

174
/**
175
 * Exponential-in-out easing - combines expoIn and expoOut
176
 * @param t - Time progress from 0 to 1
177
 * @returns Eased value
178
 */
179
function expoInOut(t: number): number;
180
```
181

182
### Quadratic Easing
183

184
Easing functions based on quadratic curves.
185

186
```typescript { .api }
187
/**
188
 * Quadratic-in easing - gentle acceleration
189
 * @param t - Time progress from 0 to 1
190
 * @returns Eased value
191
 */
192
function quadIn(t: number): number;
193

194
/**
195
 * Quadratic-out easing - gentle deceleration
196
 * @param t - Time progress from 0 to 1
197
 * @returns Eased value
198
 */
199
function quadOut(t: number): number;
200

201
/**
202
 * Quadratic-in-out easing - gentle acceleration and deceleration
203
 * @param t - Time progress from 0 to 1
204
 * @returns Eased value
205
 */
206
function quadInOut(t: number): number;
207
```
208

209
### Quartic Easing
210

211
Easing functions based on quartic (fourth power) curves.
212

213
```typescript { .api }
214
/**
215
 * Quartic-in easing - stronger acceleration than cubic
216
 * @param t - Time progress from 0 to 1
217
 * @returns Eased value
218
 */
219
function quartIn(t: number): number;
220

221
/**
222
 * Quartic-out easing - stronger deceleration than cubic
223
 * @param t - Time progress from 0 to 1
224
 * @returns Eased value
225
 */
226
function quartOut(t: number): number;
227

228
/**
229
 * Quartic-in-out easing - combines quartIn and quartOut
230
 * @param t - Time progress from 0 to 1
231
 * @returns Eased value
232
 */
233
function quartInOut(t: number): number;
234
```
235

236
### Quintic Easing
237

238
Easing functions based on quintic (fifth power) curves.
239

240
```typescript { .api }
241
/**
242
 * Quintic-in easing - very strong acceleration
243
 * @param t - Time progress from 0 to 1
244
 * @returns Eased value
245
 */
246
function quintIn(t: number): number;
247

248
/**
249
 * Quintic-out easing - very strong deceleration
250
 * @param t - Time progress from 0 to 1
251
 * @returns Eased value
252
 */
253
function quintOut(t: number): number;
254

255
/**
256
 * Quintic-in-out easing - combines quintIn and quintOut
257
 * @param t - Time progress from 0 to 1
258
 * @returns Eased value
259
 */
260
function quintInOut(t: number): number;
261
```
262

263
### Sine Easing
264

265
Easing functions based on sine wave curves.
266

267
```typescript { .api }
268
/**
269
 * Sine-in easing - smooth sine wave acceleration
270
 * @param t - Time progress from 0 to 1
271
 * @returns Eased value
272
 */
273
function sineIn(t: number): number;
274

275
/**
276
 * Sine-out easing - smooth sine wave deceleration
277
 * @param t - Time progress from 0 to 1
278
 * @returns Eased value
279
 */
280
function sineOut(t: number): number;
281

282
/**
283
 * Sine-in-out easing - smooth sine wave acceleration and deceleration
284
 * @param t - Time progress from 0 to 1
285
 * @returns Eased value
286
 */
287
function sineInOut(t: number): number;
288
```
289

290
## Usage Examples
291

292
```typescript
293
import { cubicOut, elasticOut, bounceIn } from "svelte/easing";
294
import { tweened } from "svelte/motion";
295
import { fly, fade } from "svelte/transition";
296

297
// Use with tweened values
298
const progress = tweened(0, {
299
  duration: 800,
300
  easing: cubicOut
301
});
302

303
// Use with transitions
304
// transition:fly={{ y: -20, duration: 300, easing: elasticOut }}
305
// transition:fade={{ duration: 400, easing: sineInOut }}
306

307
// Use with custom animations
308
function customAnimation(node, { easing = cubicOut }) {
309
  return {
310
    duration: 600,
311
    easing,
312
    css: (t) => `transform: scale(${t}); opacity: ${t}`
313
  };
314
}
315
```
316

317
## Types
318

319
```typescript { .api }
320
type EasingFunction = (t: number) => number;
321
```
322

323
## Choosing Easing Functions
324

325
- **cubicOut**: Most versatile, great for UI interactions
326
- **cubicInOut**: Good for looping animations
327
- **elasticOut**: Playful, attention-grabbing effects
328
- **bounceOut**: Fun, energetic animations
329
- **sineInOut**: Subtle, organic feeling
330
- **backOut**: Slight overshoot adds polish
331
- **linear**: Use sparingly, feels mechanical
332
- **expoOut**: Dramatic, cinematic effects