mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
27 lines
848 B
27 lines
848 B
6 years ago
|
---
|
||
|
title: Spring
|
||
|
---
|
||
|
|
||
|
The `spring` function is an alternative to `tweened` that often works better for values that are frequently changing.
|
||
|
|
||
|
In this example we have two stores — one representing the circle's coordinates, and one representing its size. Let's convert them to springs:
|
||
|
|
||
|
```html
|
||
|
<script>
|
||
|
import { spring } from 'svelte/motion';
|
||
|
|
||
|
let coords = spring({ x: 50, y: 50 });
|
||
|
let size = spring(10);
|
||
|
</script>
|
||
|
```
|
||
|
|
||
|
Both springs have default `stiffness` and `damping` values, which control the spring's, well... springiness. We can specify our own initial values:
|
||
|
|
||
|
```js
|
||
|
let coords = spring({ x: 50, y: 50 }, {
|
||
|
stiffness: 0.1,
|
||
|
damping: 0.25
|
||
|
});
|
||
|
```
|
||
|
|
||
|
Waggle your mouse around, and try dragging the sliders to get a feel for how they affect the spring's behaviour. Notice that you can adjust the values while the spring is still in motion.
|