Flip animations in Svelte - Mini Project: Build & Apply

Flip animations

📖 Scenario: You are building a simple interactive list where items can be added and removed. To make the changes smooth and visually appealing, you want to use flip animations. Flip animations help items move smoothly to their new positions instead of jumping abruptly.

🎯 Goal: Create a Svelte component that displays a list of fruits. Add flip animations so that when items are added or removed, the list rearranges smoothly with a nice transition effect.

📋 What You'll Learn

Create a Svelte component with a list of fruits stored in a variable called fruits.

Add a button to add a new fruit to the list.

Add a button next to each fruit to remove it from the list.

Use Svelte's flip animation to animate the list changes smoothly.

💡 Why This Matters

🌍 Real World

Flip animations are used in apps to smoothly rearrange lists or grids when items change, improving user experience by avoiding sudden jumps.

💼 Career

Understanding flip animations helps frontend developers create polished, professional interfaces that feel responsive and natural.

1

Set up the initial fruit list

Create a Svelte component with a variable called fruits that is an array containing these exact strings: 'Apple', 'Banana', 'Cherry'.

Svelte

  
    // Your code here
  

  
    {#each fruits as fruit}
      {fruit}
    {/each}
  

Hint

Use let fruits = ['Apple', 'Banana', 'Cherry']; inside the <script> tag.

2

Add a new fruit button

Add a variable called newFruit initialized to 'Date'. Add a button with the text Add Date that, when clicked, adds newFruit to the end of the fruits array.

Svelte

  let fruits = ['Apple', 'Banana', 'Cherry'];
  // Your code here



  {#each fruits as fruit}
    {fruit}
  {/each}

Hint

Define newFruit and a function addFruit that updates fruits. Add a button with on:click calling addFruit.

3

Add remove buttons for each fruit

Add a button next to each fruit with the text Remove. When clicked, it removes that fruit from the fruits array. Use a function called removeFruit that takes the fruit name as a parameter and updates fruits to exclude it.

Svelte

  let fruits = ['Apple', 'Banana', 'Cherry'];
  let newFruit = 'Date';

  function addFruit() {
    fruits = [...fruits, newFruit];
  }
  // Your code here



  {#each fruits as fruit}
    {fruit} 
  {/each}


Add Date

Hint

Create removeFruit function that filters out the clicked fruit. Add a remove button inside the each block with on:click calling removeFruit.

4

Add flip animation to the list

Import flip from 'svelte/animate'. Add the animate:flip directive to the {#each} block's <li> elements to animate their position changes smoothly.

Svelte

  import { flip } from 'svelte/animate';
  let fruits = ['Apple', 'Banana', 'Cherry'];
  let newFruit = 'Date';

  function addFruit() {
    fruits = [...fruits, newFruit];
  }

  function removeFruit(fruitToRemove) {
    fruits = fruits.filter(fruit => fruit !== fruitToRemove);
  }



  {#each fruits as fruit}
    {fruit}  removeFruit(fruit)}>Remove
  {/each}


Add Date

Hint

Import flip from 'svelte/animate' and add animate:flip to the <li> elements inside the each block.