Animations

Svelte Motion & Animation Magic 🎬

Imagine your webpage is a puppet show. Without animation, puppets just TELEPORT from place to place. Boring! With animation, they DANCE, GLIDE, and BOUNCE like real performers!

The Big Picture: What Are Animations?

Think of animations like teaching your web page to dance. Instead of things appearing and disappearing instantly, they:

• Slide in smoothly
• Bounce like a ball
• Fade like morning mist

Svelte gives you 5 magical tools to make this happen!

1. Flip Animation: The Magic Card Shuffle ✨

What Is It?

Flip stands for First, Last, Invert, Play.

Imagine you have cards on a table. You want to rearrange them. Without FLIP, cards would TELEPORT. With FLIP, they slide smoothly to new positions!

The Simple Idea

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

  let items = ['Apple', 'Banana', 'Cherry'];
</script>

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

What Happens?

1. First: Svelte remembers where each item IS
2. Last: Svelte sees where each item SHOULD BE
3. Invert: Calculate the difference
4. Play: Smoothly animate the move!

Real Life Example

• Drag-and-drop todo lists
• Sorting items in a shopping cart
• Reordering playlist songs

graph TD
    A["Item at Position 1"] -->|FLIP magic| B["Smoothly slides to Position 3"]
    C["No FLIP"] -->|Instant| D["TELEPORTS - ugly!"]

2. The animate Directive: Giving Orders to Move

What Is It?

animate: is like giving a dance instruction to an element.

Think of it as telling your element: “Hey, when you move, do it THIS way!”

Basic Usage

<div animate:flip={{ duration: 300 }}>
  I move gracefully!
</div>

You Can Customize!

animate:flip={{
  duration: 500,
  delay: 100
}}

The Rule

The animate: directive only works inside an {#each} block with a key!

<!-- ✅ CORRECT - has a key (item) -->
{#each items as item (item)}
  <div animate:flip>{item}</div>
{/each}

<!-- ❌ WRONG - no key -->
{#each items as item}
  <div animate:flip>{item}</div>
{/each}

3. Tweened Store: The Smooth Number Changer 📊

What Is It?

Imagine a speedometer in a car. When you accelerate, the needle doesn’t JUMP to 60mph. It glides smoothly from 0 to 60.

That’s what tweened does for numbers!

The Story

Normal variable: 0 → 100 (INSTANT)
Tweened store:   0 → 1 → 2 → 3 ... 100 (SMOOTH)

Code Example

<script>
  import { tweened } from 'svelte/motion';

  const progress = tweened(0, {
    duration: 1000
  });
</script>

<button on:click={() => progress.set(100)}>
  Fill the bar!
</button>

<div class="bar" style="width: {$progress}%">
</div>

What You Can Tween

• Progress bars
• Score counters
• Chart values
• Position coordinates

graph TD
    A["Click Button"] --> B["Tweened Store Updates"]
    B --> C["Value smoothly changes: 0→100"]
    C --> D["Visual updates every frame"]
    D --> E["User sees smooth animation!"]

4. Spring Store: The Bouncy Number! 🏀

What Is It?

Remember throwing a ball? It doesn’t just STOP. It bounces a few times!

spring makes numbers behave like bouncy things!

Tweened vs Spring

Code Example

<script>
  import { spring } from 'svelte/motion';

  const coords = spring({ x: 50, y: 50 }, {
    stiffness: 0.1,
    damping: 0.25
  });
</script>

<div on:mousemove={(e) =>
  coords.set({ x: e.clientX, y: e.clientY })
}>
  <div class="ball"
    style="left: {$coords.x}px;
           top: {$coords.y}px">
  </div>
</div>

Spring Settings Explained

Stiffness (0 to 1):

• 0.1 = Loose spring, slow bounce
• 1 = Tight spring, fast snap

Damping (0 to 1):

• 0 = Bounces forever!
• 1 = No bounce at all, smooth stop

Low stiffness + Low damping = Jiggly jello 🟢
High stiffness + Low damping = Snappy rubber band
High stiffness + High damping = Smooth & quick

5. Easing Functions: The Dance Styles 💃

What Is It?

Easing is HOW something moves, not just WHERE.

Imagine a car driving from A to B:

• Linear: Same speed the whole way (boring robot car)
• Ease-in: Starts slow, ends fast (like a rocket launch)
• Ease-out: Starts fast, ends slow (like parking)
• Bounce: Arrives, then bounces back a bit!

Available Easing Functions

<script>
  import { tweened } from 'svelte/motion';
  import {
    linear,
    cubicIn, cubicOut, cubicInOut,
    elasticIn, elasticOut,
    bounceIn, bounceOut
  } from 'svelte/easing';

  const value = tweened(0, {
    duration: 800,
    easing: bounceOut  // Choose your style!
  });
</script>

The Easing Family

Visual Guide

linear:       ________
              (constant speed)

cubicIn:      __________/
              (slow then fast)

cubicOut:     /----------
              (fast then slow)

bounceOut:    /\  /\ |
              (bounces at end)

Putting It All Together! 🎪

Here’s a complete example using everything:

<script>
  import { flip } from 'svelte/animate';
  import { tweened, spring } from 'svelte/motion';
  import { elasticOut } from 'svelte/easing';

  let items = ['Red', 'Green', 'Blue'];

  const score = tweened(0, {
    duration: 500,
    easing: elasticOut
  });

  function shuffle() {
    items = items.sort(() => Math.random() - 0.5);
    score.update(n => n + 10);
  }
</script>

<button on:click={shuffle}>Shuffle!</button>
<p>Score: {Math.round($score)}</p>

{#each items as item (item)}
  <div animate:flip={{ duration: 400 }}>
    {item}
  </div>
{/each}

Quick Memory Guide 🧠

You Did It! 🎉

Now you know how to make your Svelte apps dance! Remember:

1. FLIP = Lists that shuffle smoothly
2. animate: = Tell elements how to move
3. tweened = Numbers that glide
4. spring = Numbers that bounce
5. easing = The personality of movement

Start with simple animations. Make a button that counts up smoothly. Make a list that shuffles. Feel the magic!

“Every pixel deserves to dance.” 💃🕺