Custom transitions in Svelte - Step-by-Step Execution

Concept Flow - Custom transitions

Component mounts

↓

Element enters DOM

↓

Apply custom transition function

↓

Transition runs over time

↓

Element fully visible

↓

Trigger element removal

↓

Apply custom transition function in reverse

↓

Transition runs over time

↓

Element removed from DOM

When an element appears or disappears, a custom transition function runs to animate it smoothly before it fully shows or hides.

Execution Sample

Svelte

import { cubicOut } from 'svelte/easing';

function fade(node, { duration }) {
  return {
    duration,
    css: t => `opacity: ${t}`
  };
}

<div transition:fade={{ duration: 500 }}>Hello</div>

This code applies a custom fade transition that changes opacity from 0 to 1 over 500ms when the element appears.

Execution Table

Step	Transition Phase	Time Progress (t)	CSS Applied	Element State
1	Enter start	0	opacity: 0	Element starts invisible
2	Enter mid	0.5	opacity: 0.5	Element partially visible
3	Enter end	1	opacity: 1	Element fully visible
4	Exit start	1	opacity: 1	Element fully visible before exit
5	Exit mid	0.5	opacity: 0.5	Element partially fading out
6	Exit end	0	opacity: 0	Element invisible, about to be removed

💡 Transition completes when t reaches 1 on enter and 0 on exit, then element is added or removed.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 5	After Step 6
t	0	0.5	1	0.5	0
opacity	0	0.5	1	0.5	0

Key Moments - 3 Insights

Why does the opacity start at 0 when the element enters?

Because at Step 1 in the execution_table, t=0 means the transition just started, so opacity is 0 to make the element invisible initially.

What happens if the duration is longer?

The transition steps take more time, but the opacity still moves smoothly from 0 to 1 (enter) or 1 to 0 (exit) as shown in the execution_table steps.

Why is the element still visible at exit start (Step 4)?

At exit start, t=1 means the element is fully visible before the fade-out begins, so opacity is 1 before it starts fading.

Visual Quiz - 3 Questions

Look at the execution_table, what is the opacity at Step 2 during the enter phase?

A 0

B 0.5

C 1

D 0.75

💡 Hint

Check the 'CSS Applied' column at Step 2 in the execution_table.

At which step does the element become fully visible during entering?

A Step 5

B Step 1

C Step 3

D Step 6

💡 Hint

Look for opacity: 1 in the 'CSS Applied' column during enter phase.

If the transition duration is doubled, how does the execution_table change?

A The steps remain the same but take longer in real time.

B The time progress (t) values change to 0, 0.25, 0.5, etc.

C The opacity values change to different numbers.

D The element skips the fade and appears instantly.

💡 Hint

Duration affects timing, not the opacity values shown in the execution_table.

Concept Snapshot

Custom transitions in Svelte animate elements when they enter or leave.
Define a function returning duration and CSS styles based on progress t (0 to 1).
Use transition:yourFunction={{ options }} on elements.
The transition runs smoothly over time, changing styles like opacity.
When done, element is fully shown or removed.

Full Transcript

Custom transitions in Svelte let you animate elements as they appear or disappear. When the component mounts, the element enters the DOM and the custom transition function runs. This function returns an object with duration and a CSS function that changes styles based on a progress value t from 0 to 1. For example, opacity can go from 0 to 1 to fade in. The execution table shows steps where t changes and opacity updates accordingly. When the element leaves, the transition runs in reverse from opacity 1 to 0 before the element is removed. Variables like t and opacity update step by step during the transition. Beginners often wonder why opacity starts at 0 or why the element is visible at exit start; these are explained by the transition progress values. The duration controls how long the transition takes but not the style values themselves. This visual trace helps understand how custom transitions animate elements smoothly in Svelte.

Practice

1. What is the main purpose of a custom transition in Svelte?

easy

A. To create unique animations when elements enter or leave the page

B. To fetch data from an API

C. To manage component state

D. To handle user input events

Solution

1. Step 1: Understand what transitions do in Svelte

   Transitions animate elements as they appear or disappear from the DOM.

2. Step 2: Identify the role of custom transitions

   Custom transitions let you define your own animation styles for these changes.

3. Final Answer:

   To create unique animations when elements enter or leave the page -> Option A

4. Quick Check:

   Custom transitions = unique enter/leave animations [OK]

Hint: Custom transitions animate element entry/exit smoothly [OK]

Common Mistakes:

• Confusing transitions with data fetching
• Thinking transitions manage state
• Mixing transitions with event handling

2. Which of the following is the correct way to define a custom transition function in Svelte?

easy

A. function fade(node) { return { delay: 300, css: t => `opacity: ${t}` }; }

B. function fade(params) { return { duration: 300, css: t => `opacity: ${t}` }; }

C. function fade() { return { duration: 300, css: t => `opacity: ${t}` }; }

D. function fade(node, params) { return { duration: 300, css: t => `opacity: ${t}` }; }

Solution

1. Step 1: Recall the custom transition function signature

   It must accept node and optionally params.

2. Step 2: Check the returned object structure

   The object should include duration and a css function using t for progress.

3. Final Answer:

   function fade(node, params) { return { duration: 300, css: t => `opacity: ${t}` }; } -> Option D

4. Quick Check:

   Function(node, params) + {duration, css} = C [OK]

Hint: Custom transition needs node param and returns duration + css [OK]

Common Mistakes:

• Omitting the node parameter
• Returning delay instead of duration
• Not using a css function with progress t

3. Given this custom transition function:

function slide(node) {
  return {
    duration: 400,
    css: t => `transform: translateX(${(1 - t) * 100}%)`
  };
}

What happens to the element when it enters the DOM using transition:slide?

medium

A. It fades in with increasing opacity

B. It slides out to the right when leaving

C. It slides in from the right to its original position

D. It instantly appears without animation

Solution

1. Step 1: Analyze the css function for entry

   The transform moves from translateX(100%) at t=0 to translateX(0%) at t=1.

2. Step 2: Understand the visual effect

   The element starts off-screen right (100%) and slides left to original place (0%).

3. Final Answer:

   It slides in from the right to its original position -> Option C

4. Quick Check:

   translateX from 100% to 0% = slide in right to left [OK]

Hint: Check transform values at t=0 and t=1 for motion direction [OK]

Common Mistakes:

• Confusing enter and leave animations
• Assuming opacity changes instead of transform
• Thinking it slides out instead of in

4. This custom transition code causes an error:

function grow(node) {
  return {
    duration: 500,
    css: t => `scale(${t})`
  };
}

What is the error and how to fix it?

medium

A. Missing 'transform:' prefix in css string; fix by returning `transform: scale(${t})`

B. Duration must be a string; fix by changing 500 to '500ms'

C. Function must return a number, not a string; fix by removing css

D. Node parameter is unused; fix by removing it

Solution

1. Step 1: Identify the CSS syntax error

   The css string lacks the CSS property name; 'scale' alone is invalid.

2. Step 2: Correct the CSS string

   It should be 'transform: scale(...)' to apply scaling properly.

3. Final Answer:

   Missing 'transform:' prefix in css string; fix by returning `transform: scale(${t})` -> Option A

4. Quick Check:

   CSS property needed before scale() [OK]

Hint: CSS string must include property name like 'transform:' [OK]

Common Mistakes:

• Returning only scale() without 'transform:'
• Using wrong duration type
• Removing needed node parameter

5. You want a custom transition that fades in and grows an element from half size to full size over 600ms. Which function correctly implements this?

hard

A. function fadeGrow(node) { return { duration: 600, css: t => `opacity: ${1 - t}; transform: scale(${t})` }; }

B. function fadeGrow(node) { return { duration: 600, css: t => `opacity: ${t}; transform: scale(${0.5 + 0.5 * t})` }; }

C. function fadeGrow(node) { return { duration: 600, css: t => `opacity: ${t}; transform: scale(${t / 2})` }; }

D. function fadeGrow(node) { return { duration: 600, css: t => `opacity: ${t}; transform: scale(${1 - t})` }; }

Solution

1. Step 1: Understand the fade and grow requirements

   Opacity should go from 0 to 1 (fade in), scale from 0.5 to 1 (grow).

2. Step 2: Check each option's css function

   function fadeGrow(node) { return { duration: 600, css: t => `opacity: ${t}; transform: scale(${0.5 + 0.5 * t})` }; } uses opacity = t (0 to 1) and scale = 0.5 + 0.5 * t (0.5 to 1), matching requirements.

3. Final Answer:

   function fadeGrow(node) { return { duration: 600, css: t => `opacity: ${t}; transform: scale(${0.5 + 0.5 * t})` }; } -> Option B

4. Quick Check:

   Opacity 0->1 and scale 0.5->1 = function fadeGrow(node) { return { duration: 600, css: t => `opacity: ${t}; transform: scale(${0.5 + 0.5 * t})` }; } [OK]

Hint: Map t from 0-1 to desired opacity and scale ranges [OK]

Common Mistakes:

• Reversing opacity or scale ranges
• Using scale starting at 0 instead of 0.5
• Mixing up increasing and decreasing values