Flip animations in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a flip animation on a div using Svelte's built-in transition.

Svelte

<script>
  import { [1] } from 'svelte/transition';
</script>

<div transition:flip>
  Flip me!
</div>

Drag options to blanks, or click blank then click option'

Ascale

Bflip

Cslide

Dfade

Attempts:

3 left

💡 Hint

Common Mistakes

Importing the wrong transition like fade or slide.

Forgetting to import the transition at all.

The flip transition is imported from svelte/transition to enable flip animations.

2fill in blank

medium

Complete the code to bind a list of items and animate their position changes with flip.

Svelte

<script>
  import { flip } from 'svelte/transition';
  let items = ['A', 'B', 'C'];
</script>

<ul>
  {#each items as item (item)}
    <li transition:[1]>{{item}}</li>
  {/each}
</ul>

Drag options to blanks, or click blank then click option'

Aflip

Bfade

Cslide

Ddraw

Attempts:

3 left

💡 Hint

Common Mistakes

Using fade or slide which do not animate position changes.

Not using a key in the each block.

The flip transition animates the position changes of list items smoothly.

3fill in blank

hard

Fix the error in the code to correctly apply flip animation with a duration of 500ms.

Svelte

<script>
  import { flip } from 'svelte/transition';
</script>

<div transition:flip=[1]>
  Animated box
</div>

Drag options to blanks, or click blank then click option'

A500

Bduration: 500

C[500]

D{ duration: 500 }

Attempts:

3 left

💡 Hint

Common Mistakes

Passing duration as a bare number or without braces.

Using array syntax instead of object.

The transition directive expects an object with options inside curly braces, like { duration: 500 }.

4fill in blank

hard

Fill both blanks to create a flip animation that triggers only when the list changes and lasts 300ms.

Svelte

<script>
  import { [1] } from 'svelte/transition';
  let list = [1, 2, 3];
</script>

<ul>
  {#each list as num (num)}
    <li transition:[2]={{ duration: 300 }}>{{num}}</li>
  {/each}
</ul>

Drag options to blanks, or click blank then click option'

Aflip

Bfade

Cslide

Dscale

Attempts:

3 left

💡 Hint

Common Mistakes

Using different transitions for import and usage.

Forgetting to add a key in the each block.

Importing and using flip transition with a duration option animates list changes smoothly.

5fill in blank

hard

Fill all three blanks to create a flip animation with a custom easing and delay of 100ms.

Svelte

<script>
  import { flip } from 'svelte/transition';
  import { [1] } from 'svelte/easing';
</script>

<div transition:flip={{ duration: 400, easing: [2], delay: [3] }}>
  Custom flip animation
</div>

Drag options to blanks, or click blank then click option'

AcubicOut

BcubicIn

C100

D200

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up easing function names.

Using delay as a string instead of a number.

The easing function cubicIn is imported and used with a delay of 100ms for the flip transition.