Animate directive in Svelte - Step-by-Step Execution

Concept Flow - Animate directive

Element state changes

↓

Animate directive detects change

↓

Calculate animation start/end values

↓

Apply animation over time

↓

Update element style smoothly

↓

Animation completes

↓

Element reaches new state

The animate directive watches for changes in an element's state and smoothly transitions its style from old to new values.

Execution Sample

Svelte

<script>
  let items = [1, 2];
</script>

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

This code animates list items when the array changes, smoothly moving items to new positions.

Execution Table

Step	Action	Element State Before	Animation Triggered	Animation Effect	Element State After
1	Initial render	items = [1, 2]	No	None	List shows items 1 and 2
2	Add item 3 to items	items = [1, 2]	Yes	Animate new item sliding in	items = [1, 2, 3] with animation
3	Remove item 1 from items	items = [1, 2, 3]	Yes	Animate item 1 sliding out and others shifting	items = [2, 3] with animation
4	No further changes	items = [2, 3]	No	None	List stable with items 2 and 3

💡 No more changes to items, so animation stops.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
items	[1, 2]	[1, 2, 3]	[2, 3]	[2, 3]

Key Moments - 2 Insights

Why does the animation only happen when the list changes?

Because the animate directive triggers only when the element's state changes, as shown in steps 2 and 3 where items array changes and animation runs.

What happens if the list changes but the animate directive is not used?

No smooth transition occurs; the list updates instantly without animation, unlike steps 2 and 3 where animation is triggered.

Visual Quiz - 3 Questions

Look at the execution table, at which step does the animation first trigger?

A Step 2

B Step 1

C Step 3

D Step 4

💡 Hint

Check the 'Animation Triggered' column in the execution table.

According to the variable tracker, what is the value of 'items' after step 3?

A [1, 2]

B [1, 2, 3]

C [2, 3]

D []

💡 Hint

Look at the 'After Step 3' column for 'items' in the variable tracker.

If you remove the animate directive, how would the animation effect column change in step 3?

A Animate item sliding out

B No animation effect

C Animate item sliding in

D Animate color change

💡 Hint

Refer to the key moment about what happens without the animate directive.

Concept Snapshot

Svelte's animate directive smoothly transitions element styles when their state changes.
Use it like: <ul animate:flip> to animate list reordering.
It detects changes and applies animations automatically.
Without it, changes happen instantly with no animation.
Great for animating position or size changes in lists or groups.

Full Transcript

The animate directive in Svelte watches for changes in an element's state, such as items in a list. When the state changes, it triggers an animation that smoothly transitions the element's style from the old state to the new state. For example, when adding or removing items from a list, the animate directive animates the movement or appearance of list items. The execution table shows steps where the list changes and animations run, and the variable tracker shows how the items array changes over time. Key moments clarify that animations only happen when the state changes and that without the directive, changes are instant with no animation. The visual quiz tests understanding of when animations trigger and how variables change. This helps beginners see how Svelte's animate directive works step-by-step.