Motion

Timing tokens

Every theme sets three durations and one easing curve: --sv-duration-fast, --sv-duration-normal, --sv-duration-slow and --sv-ease. The durations are Fibonacci milliseconds, 144, 233 and 377 in Monolith. When the user asks for reduced motion, the base styles set every duration to 0.01ms whatever the theme, so anything timed with the tokens becomes instant without checking the setting itself.

.panel {
  transition:
    opacity var(--sv-duration-normal) var(--sv-ease),
    transform var(--sv-duration-normal) var(--sv-ease);
}

.panel[data-closed] {
  opacity: 0;
  transform: translateY(8px);
}

Animate only transform and opacity. The browser moves them without recalculating layout or repainting, so motion stays smooth on slow devices.

Transitions

For content that mounts and unmounts, fade, rise and pop are Svelte transitions that read the timing of the theme where the element is. They move only opacity and transform, and the tokens make them instant under reduced motion.

<script>
  import { rise } from 'sveltier';
  let shown = $state(false);
</script>

<button aria-expanded={shown} onclick={() => (shown = !shown)}>Receipt</button>

{#if shown}
  <!-- Or in:pop out:fade, or rise with { distance: 13 }. -->
  <div transition:rise>Transfer sent: €1,250.00</div>
{/if}

Springs

spring() returns a Svelte Spring with one of three presets. Stiffness steps down the φ series, 1/φ³, 1/φ⁴ and 1/φ⁵, and damping is what is left of 1. Use snappy for small controls, standard for most movement and gentle for large surfaces and numbers that count. While the user prefers reduced motion, every update lands at once.

<script>
  import { spring } from 'sveltier';
  const balance = spring(248190.35, 'gentle');
</script>

<button onclick={() => (balance.target += 1000)}>Deposit 1,000</button>

<!-- target is where it is going; current is what to show. -->
<p class="amount">{balance.current.toFixed(2)}</p>

Timing in script

motion() reads the timing where an element is, for element.animate() and for Svelte's Tween. Like the CSS, it follows the theme in scope and drops to 0.01ms under reduced motion.

import { Tween } from 'svelte/motion';
import { easing, motion } from 'sveltier';

// element.animate() takes the theme's easing as it is.
export function flash(cell: HTMLElement) {
  const { fast, ease } = motion(cell);
  cell.animate([{ opacity: 0.382 }, { opacity: 1 }], { duration: fast, easing: ease });
}

// Tween needs a function: easing() turns the curve into one.
export function progress(element: HTMLElement) {
  const { slow, ease } = motion(element);
  return new Tween(0, { duration: slow, easing: easing(ease) });
}