javascript / intermediate
Snippet
Smooth State Transitions with Tweened Motion
The 'tweened' function creates a store that interpolates between values over time. It is highly efficient for creating smooth UI progress bars or numerical transitions without external CSS.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>import { tweened } from 'svelte/motion';import { cubicOut } from 'svelte/easing';const progress = tweened(0, {duration: 400,easing: cubicOut});function handleClick() {progress.set(1);}</script><progress value={$progress}></progress>
svelte
Breakdown
1
tweened(0, { duration: 400 })
Initializes a store starting at 0 that takes 400ms to reach a new value.
2
progress.set(1)
Triggers the animation to smoothly transition the store value from its current state to 1.
3
$progress
Uses the auto-subscription syntax to read the interpolated value during the animation.