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.
svelte/site/content/tutorial/09-motion/02-spring/text.md

27 lines
848 B

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