Animate directive in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the animate directive from Svelte.

Svelte

import { [1] } from 'svelte/animate';

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

Amotion

Btransition

Canimate

Dtweened

Attempts:

3 left

💡 Hint

Common Mistakes

Importing from 'svelte/transition' instead of 'svelte/animate'.

Using 'motion' or 'tweened' which are different features.

The animate directive is imported from svelte/animate to enable animations between state changes.

2fill in blank

medium

Complete the code to apply the animate directive to a list with the flip animation.

Svelte

<ul animate:[1]=[2]>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

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

Aflip

Bfade

Cslide

Dscale

Attempts:

3 left

💡 Hint

Common Mistakes

Using fade or slide with animate directive.

Not passing the animation function to the directive.

The flip animation is the built-in animation used with the animate directive to smoothly rearrange list items.

3fill in blank

hard

Fix the error in the animate directive usage by completing the code correctly.

Svelte

<ul animate:[1]={flip}>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

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

Aflip()

Bflip

Canimate

Dtransition

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the animation function with parentheses inside the directive.

Using the wrong directive name like animate:animate.

The animate directive expects the animation function without calling it. So use flip, not flip().

4fill in blank

hard

Fill both blanks to create a reactive list that animates item reordering with the flip animation.

Svelte

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

  function shuffle() {
    items = items.sort(() => Math.random() - 0.5);
  }
</script>

<button on:click={shuffle}>Shuffle</button>
<ul animate:[2]={flip}>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

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

Aflip

Bfade

Cslide

Dscale

Attempts:

3 left

💡 Hint

Common Mistakes

Importing one animation but using another in the directive.

Forgetting to import the animation function.

Import and use the flip animation for the animate directive to smoothly animate the shuffled list.

5fill in blank

hard

Fill all three blanks to animate a list with flip and add a custom duration option.

Svelte

<script>
  import { [1] } from 'svelte/animate';
  let items = ["a", "b", "c"];
  let options = { duration: [2] };
</script>

<ul animate:[3]={flip}>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

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

Aflip

B300

D500

Attempts:

3 left

💡 Hint

Common Mistakes

Using different animation names in import and directive.

Setting duration as a string instead of a number.

Import flip, set duration to 300ms, and use flip in the animate directive for smooth animation with custom timing.