Tween a value and dynamically update the DOM with Svelte 3

Instructor: [0:00] We have a simple website in which we get to enjoy the experience of historic Windows 95 back in the day. We have a couple of buttons. When I click on any of those buttons, I'm going to change the state of this progress bar. If it's going to hit 100 percent, I'm going to get a message, "Windows 95 installed, hooray!"

[0:14] In order to make that happen, we import a new writable store from Svelte. Here, we are using the store that sets function in order to set the store value to an appropriate value, depending on the button that was pressed.

[0:25] We would like to make this app a bit more dynamic. If I go from percent to 75 percent, I would like to see this progress bar slowly filling in. As we can see here, two weeks remaining.

[0:34] In order to animate this progress value, first import { tweened } from "svelte/motion." We're going to change this writable to tweened. We need to provide the default value, which is going to be . Here, I'm going to specify the duration to two seconds.

[0:49] If I refresh the app and click on 75 percent, we're going to see that this progress bar is going to slowly fill in. If we go from to 100, we're going to see that this message, "Windows 95 installed," is going to appear only when the progress bar is going to actually hit 100 percent.

[1:03] We can also provide a different easing function to change exactly how this progress value is going to change over the course of those two seconds. In order to do that, import { bounceInOut} from "svelte/easing." We're going to provide an easing function equal to bounceInOut. Of course, it's only one of the easing functions provided by Svelte.

[1:21] If I make this animation a bit longer and then click on 100 percent button, we're going to see that this progress bar is going to go up and down and slowly go all the way to 100. Now we can enjoy Windows 95.