Animating Value Changes with Svelte

John Au-Yeung
May 7, 2020 · 3 min read
Photo by Ross Findon on Unsplash

Svelte is an up and coming front end framework for developing front end web apps.

It’s simple to use and lets us create results fast.

In this article, we’ll look at how to create tweens to animate values in a Svelte component.

Creating Animation for Value Changes with tween

For instance, we can use it to create an animated progress bar which has an easing effect as follows:

<script>
import { tweened } from "svelte/motion";
import { cubicOut } from "svelte/easing";
const progress = tweened(0, {
duration: 400,
easing: cubicOut
});
const moveProgress = () => {
$progress = 0;
const interval = setInterval(() => {
$progress += 0.1;
if ($progress === 1) {
clearInterval(interval);
}
}, 1500);
};
</script>
<style>
progress {
display: block;
width: 100%;
}
</style>
<progress value={$progress}></progress>
<br>
<button on:click="{moveProgress}">
Start
</button>

In the code above, we have the moveProgress function, which sets the $progress store’s value.

Then we update it until it gets to 1. Once it’s 1, then we clear the timer object to stop it from running.

The $progress store is created from the tweened function, which enables us to animate as the value is being changed. It has the initial value of 0 as we passed 0 into the tweened function as the first argument.

The 2nd argument has the object to specify how the animation is done. We set the duration of the animation to 400ms. Then we set the easing function to cubic out.

Cubic out means that the animation moves fast and then slowly.

All options that are available in the object we pass into the 2nd argument are:

  • delay — milliseconds before the tween starts
  • duration — either the duration of the tween in milliseconds or a (from, to) => milliseconds function allowing us to specify the tween
  • easing — a p => t function
  • interpolate — a custom (from, to) => t => value function for interpolating between arbitrary values. Svelte interpolates between numbers, dates, and identically shaped arrays and objects by default

We can pass the options to the progress.set and progress.update as the second argument to override the defaults.

The set and update methods both return a promise that resolves when the tween completes.

Photo by Aubrey Rose Odom on Unsplash

spring Function

For instance, we can write the following code to add a spring effect to our square as we move it by hover the mouse on different location:

App.svelte :

<script>
import { spring } from "svelte/motion";
let coords = spring({ x: 50, y: 50 });
let square;
const setCoords = e => {
coords.set({ x: e.clientX, y: e.clientY });
square.style.top = `${$coords.y}px`;
square.style.left = `${$coords.x}px`;
};
</script>
<style>
.screen {
width: 100vw;
height: 100vh;
}
.square {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
}
</style>
<div class="screen" on:mousemove="{setCoords}">
<div class="square" bind:this={square}>
</div>
</div>

In the code above, we bind the div with class square to the square variable.

Then we added a setCoords function to set the coords store with the x and y values of the mouse hover position.

We then used that to set the top and left values of the div with class square, which when combined with the existing styles, will move the square.

The spring function gives the square a springy effect as we move the red square around with the mouse.

If we switch between spring and writable , we’ll notice a difference in how the square moves.

Conclusion

Then tween function is good for values that change less frequently and spring is good for animations of values that change more frequently.

The Startup

Get smarter at building your thing. Join The Startup’s +789K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

John Au-Yeung

Written by

Web developer. Subscribe to my email list now at https://thewebdev.info/subscribe/. Email me at hohanga@gmail.com

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +789K followers.

John Au-Yeung

Written by

Web developer. Subscribe to my email list now at https://thewebdev.info/subscribe/. Email me at hohanga@gmail.com

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +789K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store