Svelte: Motion Cheat Sheet

Tweened

<script>
  import { tweened } from 'svelte/motion';
  import { cubicOut } from 'svelte/easing';
  const progress = tweened(0, {
      duration: 400,
      easing: cubicOut
  });
</script>
<progress value={$progress}></progress>
<button on:click="{() => progress.set(0)}">0%</button>

Spring

<script>
  import { spring } from 'svelte/motion';
  let coords = spring({ x: 50, y: 50 }, {
      stiffness: 0.1,
      damping: 0.25
  });
  let size = spring(10);
</script>