How to Use Spring Animation in Svelte for Smooth Transitions

In Svelte, you use spring from svelte/motion to create smooth, physics-based animations by binding reactive values. Import spring, create a spring store with initial values, then update it to animate properties with natural motion.

Syntax

The spring function creates a reactive store that smoothly animates changes to its value using spring physics. You import it from svelte/motion. You initialize it with an initial value and optional configuration for stiffness and damping.

Example parts:

• spring(initialValue, options): Creates the spring store.
• initialValue: The starting value (number, object, array).
• options: Optional settings like stiffness (spring strength) and damping (friction).
• Use $springStore to get the current animated value reactively.

javascript

import { spring } from 'svelte/motion';

const value = spring(initialValue, {
  stiffness: 0.15, // how strong the spring pulls
  damping: 0.4     // how much friction slows it
});

// Update the spring value to animate
value.set(newValue);

// Use $value in markup or reactive statements

Example

This example shows a box that smoothly moves horizontally when you click buttons. The spring store animates the left CSS property with natural spring motion.

svelte

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

  // Create a spring store for horizontal position
  const x = spring(0, { stiffness: 0.1, damping: 0.25 });

  function moveLeft() {
    x.set(0);
  }

  function moveRight() {
    x.set(300);
  }
</script>

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: #4caf50;
    position: relative;
    border-radius: 8px;
  }
  button {
    margin: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 1rem;
  }
</style>

<div>
  <button on:click={moveLeft}>Move Left</button>
  <button on:click={moveRight}>Move Right</button>
</div>

<div class="box" style="left: {$x}px;"></div>

Output

A green square box smoothly slides left or right when clicking the buttons, animating its horizontal position with spring physics.

Common Pitfalls

Common mistakes when using spring in Svelte include:

• Not importing spring from svelte/motion.
• Trying to update the spring store with non-reactive methods instead of using .set().
• Using spring for values that don't need smooth animation, causing unnecessary complexity.
• Not configuring stiffness and damping properly, resulting in too slow or too bouncy animations.

Example of wrong and right usage:

javascript

// Wrong: directly assigning value (no animation)
import { spring } from 'svelte/motion';
const pos = spring(0);
pos = 100; // ❌ This won't animate

// Right: use set() to update spring value
pos.set(100); // ✅ Animates smoothly

Quick Reference

Summary tips for using spring in Svelte:

• Import from svelte/motion.
• Initialize with starting value and optional config.
• Update values with .set() to animate.
• Use reactive $ prefix to read current animated value.
• Tweak stiffness and damping for desired animation feel.

Key Takeaways

Use the spring store from svelte/motion to animate values with natural physics.

Always update spring values with .set() to trigger smooth animations.

Configure stiffness and damping to control animation speed and bounce.

Access the animated value reactively with the $ prefix in your markup.

Avoid using spring for static values to keep code simple and efficient.