Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Tween a value and dynamically update the DOM with Svelte 3

    Tomasz ŁakomyTomasz Łakomy
    sveltesvelte

    If our app needs to display values that are dynamically changing, it's better to animate that to deliver a more engaging user experience.

    In this lesson we're going to learn how to use a tweened value to dynamically update the value of a progress bar in Svelte 3.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    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.