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.

Practice

1. What is the main purpose of using animate:flip in Svelte?

easy

A. To smoothly animate changes in layout when elements reorder or change size

B. To add color transitions to text elements

C. To create 3D rotation effects on buttons

D. To handle form input validation animations

Solution

1. Step 1: Understand what animate:flip does

   This directive animates layout changes smoothly, especially when elements move or reorder.

2. Step 2: Identify the correct purpose

   It is not for color, 3D rotation, or form validation animations but for layout transitions.

3. Final Answer:

   To smoothly animate changes in layout when elements reorder or change size -> Option A

4. Quick Check:

   Flip animation = smooth layout change [OK]

Hint: Remember flip = smooth layout moves, not color or rotation [OK]

Common Mistakes:

• Confusing flip animation with color or 3D effects
• Thinking it validates forms
• Assuming it only animates text

2. Which of the following is the correct syntax to apply flip animation to a list container in Svelte?

easy

A. {#each items as item}{item}{/each}

B. {#each items as item}{item}{/each}

C. {#each items as item}{item}{/each}

D. {#each items as item}{item}{/each}

Solution

1. Step 1: Recall Svelte animation directive syntax

   Svelte uses animate:flip without parentheses or other modifiers on elements.

2. Step 2: Check each option

   {#each items as item}
   • {item}
   {/each}
   uses correct syntax. The other options use invalid directive forms.

3. Final Answer:

   <ul animate:flip>{#each items as item}<li>{item}</li>{/each}</ul> -> Option C

4. Quick Check:

   animate:flip syntax = animate:flip [OK]

Hint: Use animate:flip without parentheses or extra words [OK]

Common Mistakes:

• Adding parentheses after animate:flip
• Using use:flip instead of animate:flip
• Swapping directive order or syntax

3. Given this Svelte code snippet, what will happen when the button is clicked?

  <script>
    let items = [1, 2, 3];
    function shuffle() {
      items = items.sort(() => Math.random() - 0.5);
    }
  </script>

  <ul animate:flip>
    {#each items as item}
      <li>{item}</li>
    {/each}
  </ul>

  <button on:click={shuffle}>Shuffle</button>

medium

A. The list items reorder smoothly with a flip animation

B. The list items reorder instantly without animation

C. The list items disappear and reappear without animation

D. The code throws a runtime error on shuffle

Solution

1. Step 1: Understand what animate:flip does on reorder

   It animates layout changes smoothly when children reorder inside the container.

2. Step 2: Analyze the shuffle function effect

   Shuffle randomizes the array order, triggering a reorder of list items.

3. Final Answer:

   The list items reorder smoothly with a flip animation -> Option A

4. Quick Check:

   Shuffle triggers flip animation = smooth reorder [OK]

Hint: Flip animates reorder changes smoothly on list updates [OK]

Common Mistakes:

• Thinking flip only animates adds/removes, not reorder
• Assuming no animation happens on shuffle
• Expecting errors from sort with random

4. Identify the error in this Svelte code that tries to apply flip animation:

<script>
  let items = ["a", "b", "c"];
</script>

<ul animate:flip>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

<button on:click={() => items.push("d")}>Add D</button>

medium

A. animate:flip cannot be used on <ul> elements

B. Directly pushing to items array won't trigger reactivity, so no animation

C. The on:click syntax is invalid and causes a syntax error

D. The {#each} block is missing a key, causing animation issues

Solution

1. Step 1: Check how items array is updated

   Using items.push("d") mutates the array but does not update the variable reference, so Svelte won't detect change.

2. Step 2: Understand reactivity and animation trigger

   Without reassigning items, the list won't update or animate.

3. Final Answer:

   Directly pushing to items array won't trigger reactivity, so no animation -> Option B

4. Quick Check:

   Mutate array without reassign = no reactive update [OK]

Hint: Always reassign arrays to trigger Svelte reactivity [OK]

Common Mistakes:

• Assuming push triggers update automatically
• Thinking animate:flip can't be on <ul>
• Believing on:click arrow function is invalid
• Ignoring keys in {#each} (not required here)

5. You want to animate a list that can add, remove, and reorder items with flip animation. Which approach correctly ensures all changes animate smoothly?

<script>
  let items = ["x", "y", "z"];
  function addItem() {
    items = [...items, "new"];
  }
  function removeItem() {
    items = items.slice(1);
  }
  function shuffle() {
    items = items.sort(() => Math.random() - 0.5);
  }
</script>

<ul animate:flip>
  {#each items as item (item)}
    <li>{item}</li>
  {/each}
</ul>

<button on:click={addItem}>Add</button>
<button on:click={removeItem}>Remove</button>
<button on:click={shuffle}>Shuffle</button>

Why is the key (item) important here?

hard

A. It is optional and has no effect on flip animations

B. It disables flip animation for items with duplicate values

C. It causes the list to render without any animation

D. It uniquely identifies each list item so flip can track moves and animate correctly

Solution

1. Step 1: Understand the role of keys in {#each}

   Keys uniquely identify list items so Svelte can track which item moved, added, or removed.

2. Step 2: Connect keys to flip animation

   Without keys, flip cannot correctly animate reorder or removal because it loses track of items.

3. Final Answer:

   It uniquely identifies each list item so flip can track moves and animate correctly -> Option D

4. Quick Check:

   Keys enable correct flip tracking = unique ID [OK]

Hint: Always use unique keys in {#each} for smooth flip animations [OK]

Common Mistakes:

• Thinking keys disable animation
• Believing keys are optional for flip
• Assuming keys cause no animation