Crossfade for list items in Svelte - Mini Project: Build & Apply

Crossfade Animation for List Items in Svelte

📖 Scenario: You are building a simple Svelte app that shows a list of fruits. When you add or remove fruits, you want the items to smoothly crossfade instead of just appearing or disappearing abruptly.

🎯 Goal: Create a Svelte component that displays a list of fruits with a crossfade animation when items are added or removed.

📋 What You'll Learn

Create an array called fruits with the exact values: ['Apple', 'Banana', 'Cherry'].

Create a variable called duration set to 400 to configure animation speed.

Use Svelte's crossfade function to create send and receive functions with the duration config.

Apply the transition:send={send} and transition:receive={receive} directives to the list items for crossfade effect.

💡 Why This Matters

🌍 Real World

Crossfade animations make UI changes feel smooth and natural, improving user experience in apps that update lists or collections dynamically.

💼 Career

Understanding Svelte's built-in transitions and how to apply them is useful for frontend developers building interactive, polished web applications.

1

Create the initial fruits array

Create an array called fruits with the exact values ['Apple', 'Banana', 'Cherry'].

Svelte

# Create the fruits array with the exact values
# Your code here

Hint

Use let fruits = ['Apple', 'Banana', 'Cherry']; to create the array.

2

Add a duration variable for animation speed

Create a variable called duration and set it to 400.

Svelte

let fruits = ['Apple', 'Banana', 'Cherry'];
# Create a variable called duration and set it to 400
# Your code here

Hint

Use let duration = 400; to set the animation speed.

3

Import and configure crossfade functions

Import crossfade from 'svelte/transition' and create send and receive functions by calling crossfade with an object that has duration set to the duration variable.

Svelte

let fruits = ['Apple', 'Banana', 'Cherry'];
let duration = 400;

# Import crossfade and create send and receive functions
# Your code here

Hint

Use import { crossfade } from 'svelte/transition'; and then const [send, receive] = crossfade({ duration });.

4

Apply crossfade transitions to list items

Create a <ul> element that loops over fruits using {#each fruits as fruit (fruit)}. Inside the loop, create <li> elements with the exact text {fruit}. Add transition:send={send} and transition:receive={receive} directives to each <li>.

Svelte

import { crossfade } from 'svelte/transition';

let fruits = ['Apple', 'Banana', 'Cherry'];
let duration = 400;

const [send, receive] = crossfade({ duration });

Hint

Use {#each fruits as fruit (fruit)} to loop and add transition:send={send} and transition:receive={receive} to each <li>.