1
# Transitions
2

3
Svelte provides built-in transition effects for smooth element enter and exit animations. Transitions can be applied to elements conditionally rendered with `{#if}` blocks or list items in `{#each}` blocks.
4

5
## Capabilities
6

7
### fade
8

9
Animates the opacity of an element from 0 to current opacity for in transitions, and from current opacity to 0 for out transitions.
10

11
```typescript { .api }
12
/**
13
 * Opacity fade transition
14
 * @param node - Element to animate
15
 * @param params - Fade animation parameters
16
 * @returns Transition configuration
17
 */
18
function fade(node: Element, params?: FadeParams): TransitionConfig;
19
```
20

21
**Usage Examples:**
22

23
```typescript
24
import { fade } from "svelte/transition";
25

26
let visible = $state(false);
27

28
// Basic fade
29
/*
30
{#if visible}
31
  <div transition:fade>
32
    Hello world!
33
  </div>
34
{/if}
35
*/
36

37
// Custom fade parameters
38
/*
39
{#if visible}
40
  <div transition:fade={{ duration: 1000, delay: 200 }}>
41
    Slow fade with delay
42
  </div>
43
{/if}
44
*/
45

46
// Separate in/out transitions
47
/*
48
{#if visible}
49
  <div in:fade={{ duration: 300 }} out:fade={{ duration: 150 }}>
50
    Different in/out timing
51
  </div>
52
{/if}
53
*/
54
```
55

56
### fly
57

58
Animates x/y position and opacity. In transitions animate from provided values to element's default values, out transitions reverse this.
59

60
```typescript { .api }
61
/**
62
 * Position and opacity transition with motion
63
 * @param node - Element to animate
64
 * @param params - Fly animation parameters
65
 * @returns Transition configuration
66
 */
67
function fly(node: Element, params?: FlyParams): TransitionConfig;
68
```
69

70
**Usage Examples:**
71

72
```typescript
73
import { fly } from "svelte/transition";
74
import { cubicOut } from "svelte/easing";
75

76
// Fly in from the left
77
/*
78
{#if visible}
79
  <div transition:fly={{ x: -200, duration: 400 }}>
80
    Slides in from left
81
  </div>
82
{/if}
83
*/
84

85
// Fly in from top with custom easing
86
/*
87
{#if visible}
88
  <div transition:fly={{ 
89
    y: -100, 
90
    duration: 600,
91
    easing: cubicOut,
92
    opacity: 0.3
93
  }}>
94
    Slides down with custom easing
95
  </div>
96
{/if}
97
*/
98

99
// Different directions for in/out
100
/*
101
{#if visible}
102
  <div 
103
    in:fly={{ x: -200, duration: 300 }}
104
    out:fly={{ x: 200, duration: 300 }}
105
  >
106
    Slides in from left, out to right
107
  </div>
108
{/if}
109
*/
110
```
111

112
### slide
113

114
Animates the height (or width) of an element, revealing content gradually.
115

116
```typescript { .api }
117
/**
118
 * Height/width slide transition
119
 * @param node - Element to animate
120
 * @param params - Slide animation parameters
121
 * @returns Transition configuration
122
 */
123
function slide(node: Element, params?: SlideParams): TransitionConfig;
124
```
125

126
**Usage Examples:**
127

128
```typescript
129
import { slide } from "svelte/transition";
130

131
// Vertical slide (default)
132
/*
133
{#if expanded}
134
  <div transition:slide>
135
    <p>This content slides down/up</p>
136
  </div>
137
{/if}
138
*/
139

140
// Horizontal slide
141
/*
142
{#if expanded}
143
  <div transition:slide={{ axis: 'x', duration: 400 }}>
144
    <p>This content slides left/right</p>
145
  </div>
146
{/if}
147
*/
148

149
// Custom duration and easing
150
/*
151
{#if expanded}
152
  <div transition:slide={{ 
153
    duration: 600,
154
    easing: t => t * t,
155
    axis: 'y'
156
  }}>
157
    <p>Slow slide with custom easing</p>
158
  </div>
159
{/if}
160
*/
161
```
162

163
### scale
164

165
Animates opacity and scale of an element. In transitions animate from provided values to element's defaults.
166

167
```typescript { .api }
168
/**
169
 * Scale and opacity transition
170
 * @param node - Element to animate
171
 * @param params - Scale animation parameters
172
 * @returns Transition configuration
173
 */
174
function scale(node: Element, params?: ScaleParams): TransitionConfig;
175
```
176

177
**Usage Examples:**
178

179
```typescript
180
import { scale } from "svelte/transition";
181

182
// Basic scale animation
183
/*
184
{#if visible}
185
  <div transition:scale>
186
    Scales in/out from center
187
  </div>
188
{/if}
189
*/
190

191
// Custom scale parameters
192
/*
193
{#if visible}
194
  <div transition:scale={{ 
195
    start: 0.5,
196
    opacity: 0.3,
197
    duration: 400
198
  }}>
199
    Starts at 50% scale, 30% opacity
200
  </div>
201
{/if}
202
*/
203

204
// Scale with different in/out values
205
/*
206
{#if visible}
207
  <div 
208
    in:scale={{ start: 0.8, duration: 200 }}
209
    out:scale={{ start: 1.2, duration: 150 }}
210
  >
211
    Scales up on entry, scales further up on exit
212
  </div>
213
{/if}
214
*/
215
```
216

217
### blur
218

219
Animates a blur filter alongside opacity changes.
220

221
```typescript { .api }
222
/**
223
 * Blur filter and opacity transition
224
 * @param node - Element to animate
225
 * @param params - Blur animation parameters
226
 * @returns Transition configuration
227
 */
228
function blur(node: Element, params?: BlurParams): TransitionConfig;
229
```
230

231
**Usage Examples:**
232

233
```typescript
234
import { blur } from "svelte/transition";
235

236
// Basic blur transition
237
/*
238
{#if visible}
239
  <div transition:blur>
240
    Blurs in and out
241
  </div>
242
{/if}
243
*/
244

245
// Custom blur parameters
246
/*
247
{#if visible}
248
  <div transition:blur={{ 
249
    amount: 10,
250
    opacity: 0.4,
251
    duration: 800
252
  }}>
253
    Heavy blur with custom opacity
254
  </div>
255
{/if}
256
*/
257
```
258

259
### draw
260

261
Animates SVG path strokes, creating a drawing effect. Only works with elements that have `getTotalLength()` method.
262

263
```typescript { .api }
264
/**
265
 * SVG path drawing transition
266
 * @param node - SVG element with getTotalLength method
267
 * @param params - Draw animation parameters
268
 * @returns Transition configuration
269
 */
270
function draw(
271
  node: SVGElement & { getTotalLength(): number }, 
272
  params?: DrawParams
273
): TransitionConfig;
274
```
275

276
**Usage Examples:**
277

278
```typescript
279
import { draw } from "svelte/transition";
280

281
// Basic path drawing
282
/*
283
{#if visible}
284
  <svg>
285
    <path 
286
      d="M 0 0 L 100 100" 
287
      stroke="black" 
288
      fill="none"
289
      transition:draw
290
    />
291
  </svg>
292
{/if}
293
*/
294

295
// Custom draw parameters
296
/*
297
{#if visible}
298
  <svg>
299
    <path 
300
      d="M 0 0 L 100 100" 
301
      stroke="black" 
302
      fill="none"
303
      transition:draw={{ speed: 2, duration: 1000 }}
304
    />
305
  </svg>
306
{/if}
307
*/
308

309
// Draw based on path length
310
/*
311
{#if visible}
312
  <svg>
313
    <polyline 
314
      points="0,0 50,25 100,0" 
315
      stroke="red" 
316
      fill="none"
317
      transition:draw={{ speed: 1 }}
318
    />
319
  </svg>
320
{/if}
321
*/
322
```
323

324
### crossfade
325

326
Creates a pair of transitions for elements that move between different states, with smooth crossfading.
327

328
```typescript { .api }
329
/**
330
 * Creates crossfade transition pair for moving elements
331
 * @param params - Crossfade configuration and fallback
332
 * @returns Tuple of [send, receive] transition functions
333
 */
334
function crossfade(params: CrossfadeParams & {
335
  fallback?: (node: Element, params: CrossfadeParams, intro: boolean) => TransitionConfig;
336
}): [
337
  (node: Element, params: CrossfadeParams & { key: any }) => () => TransitionConfig,
338
  (node: Element, params: CrossfadeParams & { key: any }) => () => TransitionConfig
339
];
340
```
341

342
**Usage Examples:**
343

344
```typescript
345
import { crossfade } from "svelte/transition";
346
import { quintOut } from "svelte/easing";
347

348
const [send, receive] = crossfade({
349
  duration: 400,
350
  easing: quintOut,
351
  fallback: (node, params) => {
352
    return fly(node, { y: -30, duration: 400 });
353
  }
354
});
355

356
let todos = $state([
357
  { id: 1, done: false, text: "Write docs" },
358
  { id: 2, done: false, text: "Test code" }
359
]);
360

361
// Usage in template for todo list
362
/*
363
<div class="todo">
364
  {#each todos.filter(t => !t.done) as todo (todo.id)}
365
    <div out:send={{ key: todo.id }}>
366
      {todo.text}
367
    </div>
368
  {/each}
369
</div>
370

371
<div class="done">
372
  {#each todos.filter(t => t.done) as todo (todo.id)}
373
    <div in:receive={{ key: todo.id }}>
374
      {todo.text}
375
    </div>
376
  {/each}
377
</div>
378
*/
379
```
380

381
## Types
382

383
```typescript { .api }
384
interface TransitionConfig {
385
  delay?: number;
386
  duration?: number;
387
  easing?: (t: number) => number;
388
  css?: (t: number, u: number) => string;
389
  tick?: (t: number, u: number) => void;
390
}
391

392
interface FadeParams {
393
  delay?: number;
394
  duration?: number;
395
  easing?: (t: number) => number;
396
}
397

398
interface FlyParams {
399
  delay?: number;
400
  duration?: number;
401
  easing?: (t: number) => number;
402
  x?: number | string;
403
  y?: number | string;
404
  opacity?: number;
405
}
406

407
interface SlideParams {
408
  delay?: number;
409
  duration?: number;
410
  easing?: (t: number) => number;
411
  axis?: 'x' | 'y';
412
}
413

414
interface ScaleParams {
415
  delay?: number;
416
  duration?: number;
417
  easing?: (t: number) => number;
418
  start?: number;
419
  opacity?: number;
420
}
421

422
interface BlurParams {
423
  delay?: number;
424
  duration?: number;
425
  easing?: (t: number) => number;
426
  amount?: number | string;
427
  opacity?: number;
428
}
429

430
interface DrawParams {
431
  delay?: number;
432
  speed?: number;
433
  duration?: number | ((len: number) => number);
434
  easing?: (t: number) => number;
435
}
436

437
interface CrossfadeParams {
438
  delay?: number;
439
  duration?: number | ((len: number) => number);
440
  easing?: (t: number) => number;
441
}
442

443
type EasingFunction = (t: number) => number;
444
```
445

446
## Best Practices
447

448
1. **Use appropriate transitions**: Choose transitions that match your UI's personality
449
2. **Respect motion preferences**: Check `prefersReducedMotion` and provide alternatives
450
3. **Keep durations reasonable**: Generally 200-500ms for most UI transitions
451
4. **Use easing functions**: Import from `svelte/easing` for better motion feel
452
5. **Test performance**: Complex transitions on many elements can impact performance
453
6. **Provide fallbacks**: Use `fallback` parameter in `crossfade` for items without pairs