```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?: SpringOptions); ```
```dts static of(fn: () => U, options?: SpringOptions): 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?: SpringUpdateOptions): 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?: TweenOptions | 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?: TweenOptions); ```
```dts set(value: T, options?: TweenOptions | 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?: SpringOptions | 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?: TweenOptions | undefined ): Tweened; ```
## Spring
```dts interface Spring extends Readable {/*…*/} ```
```dts set(new_value: T, opts?: SpringUpdateOptions): Promise; ```
```dts update: (fn: Updater, opts?: SpringUpdateOptions) => 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; ```
## SpringOptions
```dts interface SpringOptions {/*…*/} ```
```dts stiffness?: number; ```
```dts damping?: number; ```
```dts precision?: number; ```
## SpringUpdateOptions
```dts interface SpringUpdateOptions {/*…*/} ```
```dts hard?: any; ```
- deprecated Only use this for the spring store; does nothing when set on the Spring class
```dts soft?: string | number | boolean; ```
- deprecated Only use this for the spring store; does nothing when set on the Spring class
```dts instant?: boolean; ```
Only use this for the Spring class; does nothing when set on the spring store
```dts preserveMomentum?: number; ```
Only use this for the Spring class; does nothing when set on the spring store
## TweenOptions
```dts interface TweenOptions {/*…*/} ```
```dts delay?: number; ```
```dts duration?: number | ((from: T, to: T) => number); ```
```dts easing?: (t: number) => number; ```
```dts interpolate?: (a: T, b: T) => (t: number) => T; ```
## Tweened
```dts interface Tweened extends Readable {/*…*/} ```
```dts set(value: T, opts?: TweenOptions): Promise; ```
```dts update(updater: Updater, opts?: TweenOptions): Promise; ```
## Updater
```dts type Updater = (target_value: T, value: T) => T; ```