How to implement Svelte Tweened behaviour?

Svelte uses reactive binding. In other words, when we make a change to some value, the DOM automatically updates. However, for rendering something like a progress bar, the transition is a little jarring. To make the transition smooth, the best way is to implement the Svelte Tweened behaviour.

Svelte provides in-built tools to help build user interfaces using animation to communicate changes. Tweening in animation is a short for in-betweening. Basically, it is a process of generating some sort of transition images.

1 – Using Svelte Tweened function

Let us try to implement a progress bar using Svelte Tweened function from the svelte/motion library.

In the first step, we will import the tweened function and use it to define a variable named progressStatus. We set the initial value of progressStatus to 0.

<script>
   import { tweened } from 'svelte/motion';

   const progressStatus= tweened(0);
</script>

Next, we have the HTML part.

<progress value={$progressStatus}></progress>

<button on:click="{() => progressStatus.set(0)}">
	0%
</button>

<button on:click="{() => progressStatus.set(0.25)}">
	25%
</button>

<button on:click="{() => progressStatus.set(0.5)}">
	50%
</button>

<button on:click="{() => progressStatus.set(0.75)}">
	75%
</button>

<button on:click="{() => progressStatus.set(1)}">
	100%
</button>

In this, we have implemented 5 buttons, mapping to different percentage points. Using the on:click directive of each of these buttons, we set the progressStatus to a particular value. The progressStatus variable controls the progress HTML component.

When we click the buttons, the progress bar animates to the respective value. However, the effect is still not very smooth. We can improve the effect using an easing function.

2 – Svelte Easing Function

To implement easing function, we use the svelte/easing module. This module contains the Penner easing equations.

For our example, we use the cubicOut function. See below:

<script>
	import { tweened } from 'svelte/motion';
	import { cubicOut } from 'svelte/easing';

	const progressStatus= tweened(0, {
		duration: 2000,
		easing: cubicOut
	});
</script>

In the tweened function, we specify the initial value and also a JSON object. We set the duration parameter for the length of the overall easing motion. Also, we set the easing parameter to cubicOut.

The above setup makes the change in progress bar smooth. It uses the duration parameter to manage the overall speed of change.

Some of the other parameters we can use are delay. It specifies the milliseconds before the tweening motion starts. We can also provide our own custom easing function if required. Also, the parameters can be provided as second arguments to progress.set and progress.update functions.

Conclusion

Svelte Tweened behaviour is a great way to make the user interface look a lot more polished and interactive. It makes the transitions less robotic to look at.

Want to learn more about Svelte?

Check out this post on Svelte Writable Store.

Also, if you want to make your apps look cooler, learn how to implement Transitions in Svelte.

If you have any comments or queries about this post, please feel free to mention them in the comments section below.