Animate directive in Svelte - Mini Project: Build & Apply

Animate Directive in Svelte

📖 Scenario: You are building a simple interactive list where items smoothly move to new positions when reordered. This is like arranging books on a shelf and watching them slide into place.

🎯 Goal: Create a Svelte component that uses the animate:flip directive to animate list items when their order changes.

📋 What You'll Learn

Create an array called items with the exact values ["Apple", "Banana", "Cherry", "Date"].

Create a boolean variable called reversed and set it to false.

Use a button element with an on:click event that toggles the reversed variable.

Use a ul element to display the items array in order or reversed order depending on reversed.

Apply the animate:flip directive to each li element to animate their position changes.

💡 Why This Matters

🌍 Real World

Animating list reordering is common in apps like task managers, shopping lists, or photo galleries where users rearrange items and expect smooth visual feedback.

💼 Career

Understanding Svelte's animate directive helps build polished user interfaces that improve user experience and demonstrate modern frontend skills.

1

Set up the items array

Create a variable called items and assign it the array ["Apple", "Banana", "Cherry", "Date"].

Svelte

# Create the items array

// Your code here

Hint

Use let items = ["Apple", "Banana", "Cherry", "Date"] to create the array.

2

Add a reversed boolean variable

Create a boolean variable called reversed and set it to false.

Svelte

let items = ["Apple", "Banana", "Cherry", "Date"]

// Create the reversed boolean variable
// Your code here

Hint

Use let reversed = false to create the boolean variable.

3

Add a button to toggle reversed

Add a button element with an on:click event that toggles the reversed variable using reversed = !reversed.

Svelte

let items = ["Apple", "Banana", "Cherry", "Date"]
let reversed = false

Hint

Use <button on:click={() => reversed = !reversed}>Toggle Order</button> to toggle the boolean.

4

Display the list with animate:flip

Add a ul element that displays the items array in normal order if reversed is false, or reversed order if reversed is true. Use a {#each} block with item and index. Apply the animate:flip directive to each li element.

Svelte

let items = ["Apple", "Banana", "Cherry", "Date"]
let reversed = false

 reversed = !reversed}>Toggle Order

Hint

Use {#each reversed ? [...items].reverse() : items as item, index (item)} and <li animate:flip>{item}</li> inside a <ul>.