Motion values overview

Motion values are reactive stores that track the state and velocity of animating values. In Svelte Motion they are standard Svelte readable stores — you subscribe with the $ prefix and compose them with derived, useTransform, and useSpring.

<script>
  import { useSpring } from '@humanspeak/svelte-motion'

  const x = useSpring(0)
</script>

<div
  style="transform: translateX({$x}px)"
  onpointerdown={() => x.set(100)}
>
  Spring animated
</div>

<script>
  import { useSpring } from '@humanspeak/svelte-motion'

  const x = useSpring(0)
</script>

<div
  style="transform: translateX({$x}px)"
  onpointerdown={() => x.set(100)}
>
  Spring animated
</div>

Motion values:

• Can be updated and read outside Svelte’s reactive render cycle
• Track velocity automatically so springs and transforms stay smooth
• Can be composed — pass one store into another to build animation chains
• Are SSR-safe — on the server they return static stores with no timers

Composition

Motion values become powerful when you chain them. The output of one feeds into the next:

<script>
  import { useSpring, useTransform } from '@humanspeak/svelte-motion'

  const x = useSpring(0)
  const opacity = useTransform(x, [0, 200], [0, 1])
  const backgroundColor = useTransform(x, [0, 200], ['#ff0088', '#00ccff'])
</script>

<div
  style="transform: translateX({$x}px); opacity: {$opacity}; background: {$backgroundColor}"
  onpointermove={(e) => x.set(e.clientX)}
>
  Composed motion values
</div>

<script>
  import { useSpring, useTransform } from '@humanspeak/svelte-motion'

  const x = useSpring(0)
  const opacity = useTransform(x, [0, 200], [0, 1])
  const backgroundColor = useTransform(x, [0, 200], ['#ff0088', '#00ccff'])
</script>

<div
  style="transform: translateX({$x}px); opacity: {$opacity}; background: {$backgroundColor}"
  onpointermove={(e) => x.set(e.clientX)}
>
  Composed motion values
</div>

Usage

Creating motion value stores

The simplest way to create a motion value is with useSpring:

<script>
  import { useSpring } from '@humanspeak/svelte-motion'

  const x = useSpring(0)
</script>

<script>
  import { useSpring } from '@humanspeak/svelte-motion'

  const x = useSpring(0)
</script>

You can also use a plain Svelte writable store whenever you need a value without spring physics:

<script>
  import { writable } from 'svelte/store'

  const x = writable(0)
</script>

<script>
  import { writable } from 'svelte/store'

  const x = writable(0)
</script>

Reading values

Use the $ prefix to read the current value reactively:

<div style="transform: translateX({$x}px)">
  Current value: {$x}
</div>

<div style="transform: translateX({$x}px)">
  Current value: {$x}
</div>

Setting values

Call .set() on stores that support it (e.g. useSpring):

<script>
  x.set(200)  // animates toward 200
  x.jump(200) // instantly sets to 200
</script>

<script>
  x.set(200)  // animates toward 200
  x.jump(200) // instantly sets to 200
</script>

Events

Subscribe to value changes with useMotionValueEvent or directly with store.subscribe():

<script>
  import { useMotionValueEvent, useSpring } from '@humanspeak/svelte-motion'
  import { onDestroy } from 'svelte'

  const x = useSpring(0)
  const unsub = useMotionValueEvent(x, 'change', (latest) => {
    console.log('x is now', latest)
  })
  onDestroy(unsub)
</script>

<script>
  import { useMotionValueEvent, useSpring } from '@humanspeak/svelte-motion'
  import { onDestroy } from 'svelte'

  const x = useSpring(0)
  const unsub = useMotionValueEvent(x, 'change', (latest) => {
    console.log('x is now', latest)
  })
  onDestroy(unsub)
</script>

Composition

Chain stores to build rich animations from simple building blocks:

• useTransform — map a store’s output range to a new range
• useSpring — add spring physics to any store
• useVelocity — derive velocity from any store
• useMotionTemplate — build CSS strings from multiple stores

<script>
  import { useSpring, useTransform, useVelocity } from '@humanspeak/svelte-motion'

  const x = useSpring(0)
  const xVelocity = useVelocity(x)
  const skew = useTransform(xVelocity, [-1000, 0, 1000], [-20, 0, 20])
</script>

<script>
  import { useSpring, useTransform, useVelocity } from '@humanspeak/svelte-motion'

  const x = useSpring(0)
  const xVelocity = useVelocity(x)
  const skew = useTransform(xVelocity, [-1000, 0, 1000], [-20, 0, 20])
</script>

API

All motion value stores implement Svelte’s Readable interface:

Stores created by useSpring also expose:

See also

• useMotionTemplate — compose CSS strings from motion value stores
• useMotionValueEvent — subscribe to store change events with cleanup
• useScroll — create scroll-linked motion value stores
• useSpring — spring-animated motion value store
• useTime — time-based motion value store
• useTransform — map and transform motion value stores
• useVelocity — derive velocity from a motion value store

Based on Motion’s motion value API.