Svelte by Example: Motion

Motion lets a value change gradually instead of jumping to its next value.

In this example, we'll animate our todo progress.

Tween moves a value to its target over a fixed duration.

Change target when a todo is completed.

Read current to display the animated value.

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

  const progress = new Tween(0, { duration: 300 });

  function completeTodo() {
    progress.target = Math.min(progress.target + 25, 100);
  }
</script>


<progress max="100" value={progress.current}></progress>
<button onclick={completeTodo}>Complete a todo</button>

Spring is another way to animate a value. It moves with a little bounce instead of taking a fixed amount of time.

Like a tween, a spring has a target and a current value.

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

  const progress = new Spring(0);

  function completeTodo() {
    progress.target = Math.min(progress.target + 25, 100);
  }
</script>


<progress max="100" value={progress.current}></progress>
<button onclick={completeTodo}>Complete a todo</button>

resources://