--- NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts title: svelte/motion --- ```js // @noErrors import { Spring, Tween, prefersReducedMotion, spring, tweened } from 'svelte/motion'; ``` ## Spring

Available since 5.8.0

A wrapper for a value that behaves in a spring-like fashion. Changes to `spring.target` will cause `spring.current` to move towards it over time, taking account of the `spring.stiffness` and `spring.damping` parameters. ```svelte ```

```dts class Spring {/*…*/} ```

```dts constructor(value: T, options?: SpringOpts); ```

```dts static of(fn: () => U, options?: SpringOpts): Spring; ```

Create a spring whose value is bound to the return value of `fn`. This must be called inside an effect root (for example, during component initialisation). ```svelte ```

```dts set(value: T, options?: SpringUpdateOpts): Promise; ```

Sets `spring.target` to `value` and returns a `Promise` that resolves if and when `spring.current` catches up to it. If `options.instant` is `true`, `spring.current` immediately matches `spring.target`. If `options.preserveMomentum` is provided, the spring will continue on its current trajectory for the specified number of milliseconds. This is useful for things like 'fling' gestures.

```dts damping: number; ```

```dts precision: number; ```

```dts stiffness: number; ```

```dts target: T; ```

The end value of the spring. This property only exists on the `Spring` class, not the legacy `spring` store.

```dts get current(): T; ```

The current value of the spring. This property only exists on the `Spring` class, not the legacy `spring` store.

## Tween

Available since 5.8.0

A wrapper for a value that tweens smoothly to its target value. Changes to `tween.target` will cause `tween.current` to move towards it over time, taking account of the `delay`, `duration` and `easing` options. ```svelte ```

```dts class Tween {/*…*/} ```

```dts static of(fn: () => U, options?: TweenedOptions | undefined): Tween; ```

Create a tween whose value is bound to the return value of `fn`. This must be called inside an effect root (for example, during component initialisation). ```svelte ```

```dts constructor(value: T, options?: TweenedOptions); ```

```dts set(value: T, options?: TweenedOptions | undefined): Promise; ```

Sets `tween.target` to `value` and returns a `Promise` that resolves if and when `tween.current` catches up to it. If `options` are provided, they will override the tween's defaults.

```dts get current(): T; ```

```dts set target(v: T); ```

```dts get target(): T; ```

## prefersReducedMotion

Available since 5.7.0

A [media query](/docs/svelte/svelte-reactivity#MediaQuery) that matches if the user [prefers reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion). ```svelte {#if visible}

flies in, unless the user prefers reduced motion

{/if} ```

```dts const prefersReducedMotion: MediaQuery; ```

## spring

Use [`Spring`](/docs/svelte/svelte-motion#Spring) instead

The spring function in Svelte creates a store whose value is animated, with a motion that simulates the behavior of a spring. This means when the value changes, instead of transitioning at a steady rate, it "bounces" like a spring would, depending on the physics parameters provided. This adds a level of realism to the transitions and can enhance the user experience.

```dts function spring( value?: T | undefined, opts?: SpringOpts | undefined ): Spring; ```

## tweened

Use [`Tween`](/docs/svelte/svelte-motion#Tween) instead

A tweened store in Svelte is a special type of store that provides smooth transitions between state values over time.

```dts function tweened( value?: T | undefined, defaults?: TweenedOptions | undefined ): Tweened; ```

## Spring

```dts interface Spring extends Readable {/*…*/} ```

```dts set(new_value: T, opts?: SpringUpdateOpts): Promise; ```

```dts update: (fn: Updater, opts?: SpringUpdateOpts) => Promise; ```

- deprecated Only exists on the legacy `spring` store, not the `Spring` class

```dts subscribe(fn: (value: T) => void): Unsubscriber; ```

- deprecated Only exists on the legacy `spring` store, not the `Spring` class

```dts precision: number; ```

```dts damping: number; ```

```dts stiffness: number; ```

## Tweened

```dts interface Tweened extends Readable {/*…*/} ```

```dts set(value: T, opts?: TweenedOptions): Promise; ```

```dts update(updater: Updater, opts?: TweenedOptions): Promise; ```