Skip to content

Commit 9803df7

Browse files
Rich-Harrisgithub-actions[bot]
Rich-Harris
authored and
github-actions[bot]
committed
sync svelte docs
1 parent 0b27a96 commit 9803df7

File tree

1 file changed

+261
-19
lines changed

1 file changed

+261
-19
lines changed

‎apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md

Lines changed: 261 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,50 +6,261 @@ title: svelte/motion
66

77
```js
88
// @noErrors
9-
import { prefersReducedMotion, spring, tweened } from 'svelte/motion';
9+
import { Spring, Tween, spring, tweened } from 'svelte/motion';
1010
```
1111

12-
## prefersReducedMotion
12+
## Spring
13+
14+
A wrapper for a value that behaves in a spring-like fashion. Changes to `spring.target` will cause `spring.current` to
15+
move towards it over time, taking account of the `spring.stiffness` and `spring.damping` parameters.
16+
17+
```svelte
18+
<script>
19+
import { Spring } from 'svelte/motion';
20+
21+
const spring = new Spring(0);
22+
</script>
23+
24+
<input type="range" bind:value={spring.target} />
25+
<input type="range" bind:value={spring.current} disabled />
26+
```
27+
28+
<div class="ts-block">
29+
30+
```dts
31+
class Spring<T> {/*…*/}
32+
```
33+
34+
<div class="ts-block-property">
35+
36+
```dts
37+
constructor(value: T, options?: SpringOpts);
38+
```
39+
40+
<div class="ts-block-property-details"></div>
41+
</div>
42+
43+
<div class="ts-block-property">
44+
45+
```dts
46+
static of<U>(fn: () => U, options?: SpringOpts): Spring<U>;
47+
```
48+
49+
<div class="ts-block-property-details">
50+
51+
Create a spring whose value is bound to the return value of `fn`. This must be called
52+
inside an effect root (for example, during component initialisation).
53+
54+
```svelte
55+
<script>
56+
import { Spring } from 'svelte/motion';
57+
58+
let { number } = $props();
59+
60+
const spring = Spring.of(() => number);
61+
</script>
62+
```
63+
64+
</div>
65+
</div>
66+
67+
<div class="ts-block-property">
68+
69+
```dts
70+
set(value: T, options?: SpringUpdateOpts): Promise<void>;
71+
```
72+
73+
<div class="ts-block-property-details">
74+
75+
Sets `spring.target` to `value` and returns a `Promise` that resolves if and when `spring.current` catches up to it.
76+
77+
If `options.instant` is `true`, `spring.current` immediately matches `spring.target`.
78+
79+
If `options.preserveMomentum` is provided, the spring will continue on its current trajectory for
80+
the specified number of milliseconds. This is useful for things like 'fling' gestures.
81+
82+
</div>
83+
</div>
84+
85+
<div class="ts-block-property">
86+
87+
```dts
88+
damping: number;
89+
```
90+
91+
<div class="ts-block-property-details"></div>
92+
</div>
93+
94+
<div class="ts-block-property">
95+
96+
```dts
97+
precision: number;
98+
```
99+
100+
<div class="ts-block-property-details"></div>
101+
</div>
102+
103+
<div class="ts-block-property">
104+
105+
```dts
106+
stiffness: number;
107+
```
108+
109+
<div class="ts-block-property-details"></div>
110+
</div>
111+
112+
<div class="ts-block-property">
113+
114+
```dts
115+
target: T;
116+
```
117+
118+
<div class="ts-block-property-details">
119+
120+
The end value of the spring.
121+
This property only exists on the `Spring` class, not the legacy `spring` store.
122+
123+
</div>
124+
</div>
125+
126+
<div class="ts-block-property">
127+
128+
```dts
129+
get current(): T;
130+
```
131+
132+
<div class="ts-block-property-details">
133+
134+
The current value of the spring.
135+
This property only exists on the `Spring` class, not the legacy `spring` store.
136+
137+
</div>
138+
</div></div>
139+
140+
141+
142+
## Tween
13143

14144
<blockquote class="since note">
15145

16-
Available since 5.7.0
146+
Available since 5.8.0
17147

18148
</blockquote>
19149

20-
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).
150+
A wrapper for a value that tweens smoothly to its target value. Changes to `tween.target` will cause `tween.current` to
151+
move towards it over time, taking account of the `delay`, `duration` and `easing` options.
21152

22153
```svelte
23154
<script>
24-
import { prefersReducedMotion } from 'svelte/motion';
25-
import { fly } from 'svelte/transition';
155+
import { Tween } from 'svelte/motion';
26156
27-
let visible = $state(false);
157+
const tween = new Tween(0);
28158
</script>
29159
30-
<button onclick={() => visible = !visible}>
31-
toggle
32-
</button>
33-
34-
{#if visible}
35-
<p transition:fly={{ y: prefersReducedMotion.current ? 0 : 200 }}>
36-
flies in, unless the user prefers reduced motion
37-
</p>
38-
{/if}
160+
<input type="range" bind:value={tween.target} />
161+
<input type="range" bind:value={tween.current} disabled />
39162
```
40163

41164
<div class="ts-block">
42165

43166
```dts
44-
const prefersReducedMotion: MediaQuery;
167+
class Tween<T> {/*…*/}
168+
```
169+
170+
<div class="ts-block-property">
171+
172+
```dts
173+
static of<U>(fn: () => U, options?: TweenedOptions<U> | undefined): Tween<U>;
174+
```
175+
176+
<div class="ts-block-property-details">
177+
178+
Create a tween whose value is bound to the return value of `fn`. This must be called
179+
inside an effect root (for example, during component initialisation).
180+
181+
```svelte
182+
<script>
183+
import { Tween } from 'svelte/motion';
184+
185+
let { number } = $props();
186+
187+
const tween = Tween.of(() => number);
188+
</script>
189+
```
190+
191+
</div>
192+
</div>
193+
194+
<div class="ts-block-property">
195+
196+
```dts
197+
constructor(value: T, options?: TweenedOptions<T>);
198+
```
199+
200+
<div class="ts-block-property-details"></div>
201+
</div>
202+
203+
<div class="ts-block-property">
204+
205+
```dts
206+
set(value: T, options?: TweenedOptions<T> | undefined): Promise<void>;
207+
```
208+
209+
<div class="ts-block-property-details">
210+
211+
Sets `tween.target` to `value` and returns a `Promise` that resolves if and when `tween.current` catches up to it.
212+
213+
If `options` are provided, they will override the tween's defaults.
214+
215+
</div>
216+
</div>
217+
218+
<div class="ts-block-property">
219+
220+
```dts
221+
get current(): T;
222+
```
223+
224+
<div class="ts-block-property-details"></div>
225+
</div>
226+
227+
<div class="ts-block-property">
228+
229+
```dts
230+
set target(v: T);
45231
```
46232

233+
<div class="ts-block-property-details"></div>
47234
</div>
48235

236+
<div class="ts-block-property">
237+
238+
```dts
239+
get target(): T;
240+
```
241+
242+
<div class="ts-block-property-details"></div>
243+
</div>
244+
245+
<div class="ts-block-property">
246+
247+
```dts
248+
#private;
249+
```
250+
251+
<div class="ts-block-property-details"></div>
252+
</div></div>
253+
49254

50255

51256
## spring
52257

258+
<blockquote class="tag deprecated note">
259+
260+
Use [`Spring`](/docs/svelte/svelte-motion#Spring) instead
261+
262+
</blockquote>
263+
53264
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.
54265

55266
<div class="ts-block">
@@ -67,6 +278,12 @@ function spring<T = any>(
67278

68279
## tweened
69280

281+
<blockquote class="tag deprecated note">
282+
283+
Use [`Tween`](/docs/svelte/svelte-motion#Tween) instead
284+
285+
</blockquote>
286+
70287
A tweened store in Svelte is a special type of store that provides smooth transitions between state values over time.
71288

72289
<div class="ts-block">
@@ -93,7 +310,7 @@ interface Spring<T> extends Readable<T> {/*…*/}
93310
<div class="ts-block-property">
94311

95312
```dts
96-
set: (new_value: T, opts?: SpringUpdateOpts) => Promise<void>;
313+
set(new_value: T, opts?: SpringUpdateOpts): Promise<void>;
97314
```
98315

99316
<div class="ts-block-property-details"></div>
@@ -105,7 +322,32 @@ set: (new_value: T, opts?: SpringUpdateOpts) => Promise<void>;
105322
update: (fn: Updater<T>, opts?: SpringUpdateOpts) => Promise<void>;
106323
```
107324

108-
<div class="ts-block-property-details"></div>
325+
<div class="ts-block-property-details">
326+
327+
<div class="ts-block-property-bullets">
328+
329+
- <span class="tag deprecated">deprecated</span> Only exists on the legacy `spring` store, not the `Spring` class
330+
331+
</div>
332+
333+
</div>
334+
</div>
335+
336+
<div class="ts-block-property">
337+
338+
```dts
339+
subscribe(fn: (value: T) => void): Unsubscriber;
340+
```
341+
342+
<div class="ts-block-property-details">
343+
344+
<div class="ts-block-property-bullets">
345+
346+
- <span class="tag deprecated">deprecated</span> Only exists on the legacy `spring` store, not the `Spring` class
347+
348+
</div>
349+
350+
</div>
109351
</div>
110352

111353
<div class="ts-block-property">

0 commit comments

Comments
 (0)