Svelte Svelte
search ⌘K

Svelte • Reference

svelte/motion

On this page 
import {
	prefersReducedMotion,
	spring,
	Spring,
	Spring,
	SpringOptions,
	SpringUpdateOptions,
	Tween,
	tweened,
	Tweened,
	TweenOptions,
	Updater
} from 'svelte/motion';

SpringOptions

export interface SpringOptions {/*…*/}
stiffness?: number;
damping?: number;
precision?: number;

SpringUpdateOptions

export interface SpringUpdateOptions {/*…*/}
hard?: any;
soft?: string | number | boolean;
instant?: boolean;

Only use this for the Spring class; does nothing when set on the spring store

preserveMomentum?: number;

Only use this for the Spring class; does nothing when set on the spring store

Updater

export type type Updater<T> = (target_value: T, value: T) => Ttype Updater<T> = (target_value: T, value: T) => TUpdater<function (type parameter) T in type Updater<T>function (type parameter) T in type Updater<T>T> = (target_value: Ttarget_value: Ttarget_value: function (type parameter) T in type Updater<T>function (type parameter) T in type Updater<T>T, value: Tvalue: Tvalue: function (type parameter) T in type Updater<T>function (type parameter) T in type Updater<T>T) => function (type parameter) T in type Updater<T>function (type parameter) T in type Updater<T>T;

TweenOptions

export interface interface TweenOptions<T>interface TweenOptions<T>TweenOptions<function (type parameter) T in TweenOptions<T>function (type parameter) T in TweenOptions<T>T> {/*…*/}
delay?: number;
duration?: number | ((from: T, to: T) => number);
easing?: (t: number) => number;
interpolate?: (a: T, b: T) => (t: number) => T;

Spring

export interface Spring<T> extends Readable<T> {/*…*/}
set(new_value: T, opts?: SpringUpdateOptions): Promise<void>;
update: (fn: Updater<T>, opts?: SpringUpdateOptions) => Promise<void>;
subscribe(fn: (value: T) => void): Unsubscriber;
precision: number;
damping: number;
stiffness: number;

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.

<script lang="ts">
	import { Spring } from 'svelte/motion';

	const spring = new Spring(0);
</script>

<input type="range" bind:value={spring.target} />
<input type="range" bind:value={spring.current} disabled />
<script>
	import { Spring } from 'svelte/motion';

	const spring = new Spring(0);
</script>

<input type="range" bind:value={spring.target} />
<input type="range" bind:value={spring.current} disabled />
export class class Spring<T>class Spring<T>Spring<function (type parameter) T in Spring<T>function (type parameter) T in Spring<T>T> {/*…*/}
constructor(value: T, options?: SpringOptions);
static of<U>(fn: () => U, options?: SpringOptions): Spring<U>;

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).

<script lang="ts">
	import { 
class Spring<T>
interface Spring<T>
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.
<script>
	import { Spring } from 'svelte/motion';

	const spring = new Spring(0);
</script>

<input type="range" bind:value={spring.target} />
<input type="range" bind:value={spring.current} disabled />
@since5.8.0
Spring } from 'svelte/motion';

	let { let number: anynumber } = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();

	const const spring: Spring<any>spring = class Spring<T>
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.
<script>
	import { Spring } from 'svelte/motion';

	const spring = new Spring(0);
</script>

<input type="range" bind:value={spring.target} />
<input type="range" bind:value={spring.current} disabled />
@since5.8.0
Spring.Spring<T>.of<any>(fn: () => any, options?: SpringOptions): Spring<any>
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).
<script>
	import { Spring } from 'svelte/motion';

	let { number } = $props();

	const spring = Spring.of(() => number);
</script>
of(() => let number: anynumber);
</script>
<script>
	import { 
class Spring<T>
interface Spring<T>
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.
<script>
	import { Spring } from 'svelte/motion';

	const spring = new Spring(0);
</script>

<input type="range" bind:value={spring.target} />
<input type="range" bind:value={spring.current} disabled />
@since5.8.0
Spring } from 'svelte/motion';

	let { let number: anynumber } = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();

	const const spring: Spring<any>spring = class Spring<T>
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.
<script>
	import { Spring } from 'svelte/motion';

	const spring = new Spring(0);
</script>

<input type="range" bind:value={spring.target} />
<input type="range" bind:value={spring.current} disabled />
@since5.8.0
Spring.Spring<T>.of<any>(fn: () => any, options?: SpringOptions): Spring<any>
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).
<script>
	import { Spring } from 'svelte/motion';

	let { number } = $props();

	const spring = Spring.of(() => number);
</script>
of(() => let number: anynumber);
</script>
set(value: T, options?: SpringUpdateOptions): Promise<void>;

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.

damping: number;
precision: number;
stiffness: number;
target: T;

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

get current(): T;

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

Tweened

export interface Tweened<T> extends Readable<T> {/*…*/}
set(value: T, opts?: TweenOptions<T>): Promise<void>;
update(updater: Updater<T>, opts?: TweenOptions<T>): Promise<void>;

prefersReducedMotion

Available since 5.7.0

A media query that matches if the user prefers reduced motion.

<script lang="ts">
	import { const prefersReducedMotion: MediaQuery
A media query that matches if the user prefers reduced motion.
<script>
	import { prefersReducedMotion } from 'svelte/motion';
	import { fly } from 'svelte/transition';

	let visible = $state(false);
</script>

<button onclick={() => visible = !visible}>
	toggle
</button>

{#if visible}
	<p transition:fly={{ y: prefersReducedMotion.current ? 0 : 200 }}>
		flies in, unless the user prefers reduced motion
	</p>
{/if}
@since5.7.0
prefersReducedMotion } from 'svelte/motion';
	import { function fly(node: Element, { delay, duration, easing, x, y, opacity }?: FlyParams | undefined): TransitionConfig
Animates the x and y positions and the opacity of an element. in transitions animate from the provided values, passed as parameters to the element's default values. out transitions animate from the element's default values to the provided values.
fly } from 'svelte/transition';

	let let visible: booleanvisible = 
function $state<false>(initial: false): false (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
$
function $state<false>(initial: false): false (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
state(false);
</script>

<button onclick={() => let visible: booleanvisible = !let visible: booleanvisible}>
	toggle
</button>

{#if let visible: booleanvisible}
	<p transition:function fly(node: Element, { delay, duration, easing, x, y, opacity }?: FlyParams | undefined): TransitionConfig
Animates the x and y positions and the opacity of an element. in transitions animate from the provided values, passed as parameters to the element's default values. out transitions animate from the element's default values to the provided values.
fly={{ FlyParams.y?: string | number | undefinedy: const prefersReducedMotion: MediaQuery
A media query that matches if the user prefers reduced motion.
<script>
	import { prefersReducedMotion } from 'svelte/motion';
	import { fly } from 'svelte/transition';

	let visible = $state(false);
</script>

<button onclick={() => visible = !visible}>
	toggle
</button>

{#if visible}
	<p transition:fly={{ y: prefersReducedMotion.current ? 0 : 200 }}>
		flies in, unless the user prefers reduced motion
	</p>
{/if}
@since5.7.0
prefersReducedMotion.ReactiveValue<boolean>.current: booleancurrent ? 0 : 200 }}>
		flies in, unless the user prefers reduced motion
	</p>
{/if}
<script>
	import { const prefersReducedMotion: MediaQuery
A media query that matches if the user prefers reduced motion.
<script>
	import { prefersReducedMotion } from 'svelte/motion';
	import { fly } from 'svelte/transition';

	let visible = $state(false);
</script>

<button onclick={() => visible = !visible}>
	toggle
</button>

{#if visible}
	<p transition:fly={{ y: prefersReducedMotion.current ? 0 : 200 }}>
		flies in, unless the user prefers reduced motion
	</p>
{/if}
@since5.7.0
prefersReducedMotion } from 'svelte/motion';
	import { function fly(node: Element, { delay, duration, easing, x, y, opacity }?: FlyParams | undefined): TransitionConfig
Animates the x and y positions and the opacity of an element. in transitions animate from the provided values, passed as parameters to the element's default values. out transitions animate from the element's default values to the provided values.
fly } from 'svelte/transition';

	let let visible: booleanvisible = 
function $state<false>(initial: false): false (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
$
function $state<false>(initial: false): false (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value
state(false);
</script>

<button onclick={() => let visible: booleanvisible = !let visible: booleanvisible}>
	toggle
</button>

{#if let visible: booleanvisible}
	<p transition:function fly(node: Element, { delay, duration, easing, x, y, opacity }?: FlyParams | undefined): TransitionConfig
Animates the x and y positions and the opacity of an element. in transitions animate from the provided values, passed as parameters to the element's default values. out transitions animate from the element's default values to the provided values.
fly={{ FlyParams.y?: string | number | undefinedy: const prefersReducedMotion: MediaQuery
A media query that matches if the user prefers reduced motion.
<script>
	import { prefersReducedMotion } from 'svelte/motion';
	import { fly } from 'svelte/transition';

	let visible = $state(false);
</script>

<button onclick={() => visible = !visible}>
	toggle
</button>

{#if visible}
	<p transition:fly={{ y: prefersReducedMotion.current ? 0 : 200 }}>
		flies in, unless the user prefers reduced motion
	</p>
{/if}
@since5.7.0
prefersReducedMotion.ReactiveValue<boolean>.current: booleancurrent ? 0 : 200 }}>
		flies in, unless the user prefers reduced motion
	</p>
{/if}
export const prefersReducedMotion: MediaQuery;

spring

Use 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.

export function spring<T = any>(value?: T | undefined, opts?: SpringOptions | undefined): Spring<T>;

tweened

Use Tween instead

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

export function tweened<T>(value?: T | undefined, defaults?: TweenOptions<T> | undefined): Tweened<T>;

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.

<script lang="ts">
	import { Tween } from 'svelte/motion';

	const tween = new Tween(0);
</script>

<input type="range" bind:value={tween.target} />
<input type="range" bind:value={tween.current} disabled />
<script>
	import { Tween } from 'svelte/motion';

	const tween = new Tween(0);
</script>

<input type="range" bind:value={tween.target} />
<input type="range" bind:value={tween.current} disabled />
export class class Tween<T>class Tween<T>Tween<function (type parameter) T in Tween<T>function (type parameter) T in Tween<T>T> {/*…*/}
static of<U>(fn: () => U, options?: TweenOptions<U> | undefined): Tween<U>;

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).

<script lang="ts">
	import { class Tween<T>
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.
<script>
	import { Tween } from 'svelte/motion';

	const tween = new Tween(0);
</script>

<input type="range" bind:value={tween.target} />
<input type="range" bind:value={tween.current} disabled />
@since5.8.0
Tween } from 'svelte/motion';

	let { let number: anynumber } = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();

	const const tween: Tween<any>tween = class Tween<T>
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.
<script>
	import { Tween } from 'svelte/motion';

	const tween = new Tween(0);
</script>

<input type="range" bind:value={tween.target} />
<input type="range" bind:value={tween.current} disabled />
@since5.8.0
Tween.Tween<T>.of<any>(fn: () => any, options?: TweenOptions<any> | undefined): Tween<any>
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).
<script>
	import { Tween } from 'svelte/motion';

	let { number } = $props();

	const tween = Tween.of(() => number);
</script>
of(() => let number: anynumber);
</script>
<script>
	import { class Tween<T>
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.
<script>
	import { Tween } from 'svelte/motion';

	const tween = new Tween(0);
</script>

<input type="range" bind:value={tween.target} />
<input type="range" bind:value={tween.current} disabled />
@since5.8.0
Tween } from 'svelte/motion';

	let { let number: anynumber } = 
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
$
function $props(): any
namespace $props
Declares the props that a component accepts. Example:
let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
@see{@link https://svelte.dev/docs/svelte/$props Documentation}
props();

	const const tween: Tween<any>tween = class Tween<T>
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.
<script>
	import { Tween } from 'svelte/motion';

	const tween = new Tween(0);
</script>

<input type="range" bind:value={tween.target} />
<input type="range" bind:value={tween.current} disabled />
@since5.8.0
Tween.Tween<T>.of<any>(fn: () => any, options?: TweenOptions<any> | undefined): Tween<any>
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).
<script>
	import { Tween } from 'svelte/motion';

	let { number } = $props();

	const tween = Tween.of(() => number);
</script>
of(() => let number: anynumber);
</script>
constructor(value: T, options?: TweenOptions<T>);
set(value: T, options?: TweenOptions<T> | undefined): Promise<void>;

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.

get current(): T;
set target(v: T);
get target(): T;
Edit this page on GitHub llms.txt