1
# Transitions
2

3
Built-in transition effects for element enter/exit animations with customizable parameters and easing functions.
4

5
## Capabilities
6

7
### Fade Transition
8

9
Animate element opacity for smooth appearing and disappearing effects.
10

11
```javascript { .api }
12
/**
13
 * Animates the opacity of an element from 0 to current opacity for in transitions
14
 * and from current opacity to 0 for out transitions
15
 * @param node - DOM element to animate
16
 * @param params - Fade parameters
17
 * @returns Transition configuration
18
 */
19
function fade(node: Element, params?: FadeParams): TransitionConfig;
20

21
interface FadeParams {
22
  /** Delay before animation starts (ms) */
23
  delay?: number;
24
  /** Animation duration (ms) */
25
  duration?: number;
26
  /** Easing function */
27
  easing?: EasingFunction;
28
}
29

30
interface TransitionConfig {
31
  delay?: number;
32
  duration?: number;
33
  easing?: EasingFunction;
34
  css?: (t: number, u: number) => string;
35
  tick?: (t: number, u: number) => void;
36
}
37

38
type EasingFunction = (t: number) => number;
39
```
40

41
**Usage Examples:**
42

43
```javascript
44
import { fade } from "svelte/transition";
45

46
// Basic fade
47
<div transition:fade>
48
  Content that fades in and out
49
</div>
50

51
// Custom fade parameters
52
<div transition:fade={{ duration: 1000, delay: 500 }}>
53
  Slow fade with delay
54
</div>
55

56
// Separate in/out transitions
57
<div in:fade={{ duration: 200 }} out:fade={{ duration: 800 }}>
58
  Quick fade in, slow fade out
59
</div>
60
```
61

62
### Fly Transition
63

64
Animate element position and opacity for sliding effects.
65

66
```javascript { .api }
67
/**
68
 * Animates x/y positions and opacity. In transitions animate from provided values
69
 * to element's default values. Out transitions animate from default to provided values.
70
 * @param node - DOM element to animate
71
 * @param params - Fly parameters
72
 * @returns Transition configuration
73
 */
74
function fly(node: Element, params?: FlyParams): TransitionConfig;
75

76
interface FlyParams {
77
  /** Delay before animation starts (ms) */
78
  delay?: number;
79
  /** Animation duration (ms) */
80
  duration?: number;
81
  /** Easing function */
82
  easing?: EasingFunction;
83
  /** Horizontal offset (px or string with unit) */
84
  x?: number | string;
85
  /** Vertical offset (px or string with unit) */
86
  y?: number | string;
87
  /** Target opacity (0-1) */
88
  opacity?: number;
89
}
90
```
91

92
**Usage Examples:**
93

94
```javascript
95
import { fly } from "svelte/transition";
96
import { cubicOut } from "svelte/easing";
97

98
// Slide in from left
99
<div transition:fly={{ x: -200, duration: 300 }}>
100
  Slides from left
101
</div>
102

103
// Slide in from top with opacity
104
<div transition:fly={{ y: -100, opacity: 0, duration: 500, easing: cubicOut }}>
105
  Slides from top with fade
106
</div>
107

108
// Slide out to bottom right
109
<div out:fly={{ x: 200, y: 200, duration: 400 }}>
110
  Slides to bottom right on exit
111
</div>
112

113
// Using string units
114
<div transition:fly={{ x: '50%', y: '2rem' }}>
115
  Using relative units
116
</div>
117
```
118

119
### Slide Transition
120

121
Animate element height or width for expanding/collapsing effects.
122

123
```javascript { .api }
124
/**
125
 * Slides an element in and out by animating height or width
126
 * @param node - DOM element to animate
127
 * @param params - Slide parameters
128
 * @returns Transition configuration
129
 */
130
function slide(node: Element, params?: SlideParams): TransitionConfig;
131

132
interface SlideParams {
133
  /** Delay before animation starts (ms) */
134
  delay?: number;
135
  /** Animation duration (ms) */
136
  duration?: number;
137
  /** Easing function */
138
  easing?: EasingFunction;
139
  /** Animation axis: 'x' or 'y' */
140
  axis?: 'x' | 'y';
141
}
142
```
143

144
**Usage Examples:**
145

146
```javascript
147
import { slide } from "svelte/transition";
148

149
// Vertical slide (default)
150
<div transition:slide>
151
  Content that slides up/down
152
</div>
153

154
// Horizontal slide
155
<div transition:slide={{ axis: 'x', duration: 400 }}>
156
  Content that slides left/right
157
</div>
158

159
// Accordion panel
160
{#if isOpen}
161
  <div transition:slide={{ duration: 300 }}>
162
    <p>Accordion content that slides open and closed</p>
163
  </div>
164
{/if}
165
```
166

167
### Scale Transition
168

169
Animate element size and opacity for zoom effects.
170

171
```javascript { .api }
172
/**
173
 * Animates opacity and scale. In transitions animate from provided values to defaults.
174
 * Out transitions animate from defaults to provided values.
175
 * @param node - DOM element to animate
176
 * @param params - Scale parameters
177
 * @returns Transition configuration
178
 */
179
function scale(node: Element, params?: ScaleParams): TransitionConfig;
180

181
interface ScaleParams {
182
  /** Delay before animation starts (ms) */
183
  delay?: number;
184
  /** Animation duration (ms) */
185
  duration?: number;
186
  /** Easing function */
187
  easing?: EasingFunction;
188
  /** Starting scale value (0-1+) */
189
  start?: number;
190
  /** Target opacity (0-1) */
191
  opacity?: number;
192
}
193
```
194

195
**Usage Examples:**
196

197
```javascript
198
import { scale } from "svelte/transition";
199

200
// Basic scale transition
201
<div transition:scale>
202
  Scales from/to center
203
</div>
204

205
// Custom scale parameters
206
<div transition:scale={{ start: 0.5, duration: 200 }}>
207
  Starts at 50% scale
208
</div>
209

210
// Modal popup effect
211
<div transition:scale={{ start: 0.8, opacity: 0, duration: 150 }}>
212
  Modal content
213
</div>
214
```
215

216
### Blur Transition
217

218
Animate blur filter alongside opacity for depth effects.
219

220
```javascript { .api }
221
/**
222
 * Animates a blur filter alongside element opacity
223
 * @param node - DOM element to animate
224
 * @param params - Blur parameters
225
 * @returns Transition configuration
226
 */
227
function blur(node: Element, params?: BlurParams): TransitionConfig;
228

229
interface BlurParams {
230
  /** Delay before animation starts (ms) */
231
  delay?: number;
232
  /** Animation duration (ms) */
233
  duration?: number;
234
  /** Easing function */
235
  easing?: EasingFunction;
236
  /** Blur amount (number or string with unit) */
237
  amount?: number | string;
238
  /** Target opacity (0-1) */
239
  opacity?: number;
240
}
241
```
242

243
**Usage Examples:**
244

245
```javascript
246
import { blur } from "svelte/transition";
247

248
// Basic blur transition
249
<div transition:blur>
250
  Content with blur effect
251
</div>
252

253
// Custom blur amount
254
<div transition:blur={{ amount: 10, duration: 400 }}>
255
  Heavy blur effect
256
</div>
257

258
// Blur with opacity
259
<div transition:blur={{ amount: '5px', opacity: 0.5 }}>
260
  Partial blur and fade
261
</div>
262
```
263

264
### Draw Transition
265

266
Animate SVG path strokes for drawing effects.
267

268
```javascript { .api }
269
/**
270
 * Animates SVG element stroke like drawing. Only works with elements that have getTotalLength method.
271
 * In transitions draw from invisible to visible. Out transitions erase from visible to invisible.
272
 * @param node - SVG element with getTotalLength method
273
 * @param params - Draw parameters
274
 * @returns Transition configuration
275
 */
276
function draw(node: SVGElement & { getTotalLength(): number }, params?: DrawParams): TransitionConfig;
277

278
interface DrawParams {
279
  /** Delay before animation starts (ms) */
280
  delay?: number;
281
  /** Drawing speed (units per ms) */
282
  speed?: number;
283
  /** Animation duration (ms) or function based on path length */
284
  duration?: number | ((len: number) => number);
285
  /** Easing function */
286
  easing?: EasingFunction;
287
}
288
```
289

290
**Usage Examples:**
291

292
```javascript
293
import { draw } from "svelte/transition";
294

295
// Basic path drawing
296
<svg>
297
  <path d="M 10 10 L 100 100" transition:draw />
298
</svg>
299

300
// Custom drawing speed
301
<svg>
302
  <path d="M 10 10 C 50 5, 80 30, 100 50" transition:draw={{ speed: 2 }} />
303
</svg>
304

305
// Duration based on path length
306
<svg>
307
  <polyline 
308
    points="10,10 50,25 90,10 120,40" 
309
    transition:draw={{ duration: len => len * 5 }}
310
  />
311
</svg>
312

313
// Signature effect
314
<svg viewBox="0 0 400 200">
315
  <path 
316
    d="M 50 100 Q 100 50, 150 100 T 250 100 Q 300 80, 350 120"
317
    stroke="blue" 
318
    fill="none" 
319
    stroke-width="2"
320
    transition:draw={{ duration: 2000 }}
321
  />
322
</svg>
323
```
324

325
### Crossfade Transition
326

327
Create coordinated transitions between related elements.
328

329
```javascript { .api }
330
/**
331
 * Creates a pair of transitions for elements that transform into each other.
332
 * When an element is 'sent', it looks for a corresponding 'received' element.
333
 * @param params - Crossfade configuration with optional fallback
334
 * @returns Tuple of [send, receive] transition functions
335
 */
336
function crossfade(params: CrossfadeParams & {
337
  fallback?: (node: Element, params: CrossfadeParams, intro: boolean) => TransitionConfig;
338
}): [
339
  (node: any, params: CrossfadeParams & { key: any }) => () => TransitionConfig,
340
  (node: any, params: CrossfadeParams & { key: any }) => () => TransitionConfig
341
];
342

343
interface CrossfadeParams {
344
  /** Delay before animation starts (ms) */
345
  delay?: number;
346
  /** Animation duration (ms) or function based on distance */
347
  duration?: number | ((len: number) => number);
348
  /** Easing function */
349
  easing?: EasingFunction;
350
}
351
```
352

353
**Usage Examples:**
354

355
```javascript
356
import { crossfade } from "svelte/transition";
357
import { quintOut } from "svelte/easing";
358

359
const [send, receive] = crossfade({
360
  duration: d => Math.sqrt(d * 200),
361
  fallback(node, params) {
362
    const style = getComputedStyle(node);
363
    const transform = style.transform === 'none' ? '' : style.transform;
364
    
365
    return {
366
      duration: 600,
367
      easing: quintOut,
368
      css: t => `
369
        transform: ${transform} scale(${t});
370
        opacity: ${t}
371
      `
372
    };
373
  }
374
});
375

376
// Todo list with crossfade between states
377
{#each todos as todo (todo.id)}
378
  {#if todo.done}
379
    <div in:receive={{ key: todo.id }} out:send={{ key: todo.id }}>
380
      ✓ {todo.text}
381
    </div>
382
  {:else}
383
    <div in:receive={{ key: todo.id }} out:send={{ key: todo.id }}>
384
      ○ {todo.text}
385
    </div>
386
  {/if}
387
{/each}
388
```
389

390
## Custom Transitions
391

392
Create your own transition functions for specialized effects.
393

394
```javascript { .api }
395
/**
396
 * Custom transition function signature
397
 * @param node - DOM element being transitioned
398
 * @param params - Transition parameters
399
 * @returns Transition configuration
400
 */
401
type TransitionFunction = (node: Element, params?: any) => TransitionConfig;
402
```
403

404
**Custom Transition Examples:**
405

406
```javascript
407
// Typewriter effect
408
function typewriter(node, { speed = 1 }) {
409
  const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;
410
  
411
  if (!valid) {
412
    throw new Error('Typewriter transition only works on elements with a single text node child');
413
  }
414
  
415
  const text = node.textContent;
416
  const duration = text.length / (speed * 0.01);
417
  
418
  return {
419
    duration,
420
    tick: t => {
421
      const i = Math.trunc(text.length * t);
422
      node.textContent = text.slice(0, i);
423
    }
424
  };
425
}
426

427
// Spin transition
428
function spin(node, { duration = 1000 }) {
429
  return {
430
    duration,
431
    css: t => {
432
      const eased = cubicInOut(t);
433
      return `
434
        transform: scale(${eased}) rotate(${eased * 1080}deg);
435
        opacity: ${eased}
436
      `;
437
    }
438
  };
439
}
440

441
// Usage in template
442
<p transition:typewriter={{ speed: 2 }}>
443
  This text will be typed out
444
</p>
445

446
<div transition:spin={{ duration: 500 }}>
447
  Spinning content
448
</div>
449
```
450

451
## Transition Coordination
452

453
Coordinate multiple transitions for complex effects:
454

455
```javascript
456
import { fade, fly, scale } from "svelte/transition";
457

458
// Staggered list animations
459
{#each items as item, i (item.id)}
460
  <div transition:fly={{ y: 50, delay: i * 100 }}>
461
    {item.name}
462
  </div>
463
{/each}
464

465
// Layered effects
466
<div class="modal-backdrop" transition:fade>
467
  <div class="modal" transition:scale={{ start: 0.9 }}>
468
    <div class="modal-content" transition:fly={{ y: -50, delay: 150 }}>
469
      Modal content
470
    </div>
471
  </div>
472
</div>
473
```