This course has been updated! We now recommend you take the Svelte Fundamentals course.
Transcript from the "Adding Motion with Easing & Spring" Lesson
[00:00:00]
>> So stories are a pretty powerful primitive but we can actually do a lot more with them than we've seen so far. Here's a little app with a progress meter and when I click on these buttons it will change the value of that progress. We want is for it to smoothly tween to those values.
[00:00:14] And we can do that with the tween store which we're gonna import from Svelte motion is that a spell store? We're just gonna change this right here to a tween. And now in exactly the same API as before, we have a smoothly tween value. And all we're doing here is putting that dollar prefix store name, as the value of our progress element.
[00:00:47] So, that works, but it kinda feels a little bit robotic. And that's because we don't have any easing applied to this motion. And it's just like interpolating between two values in a purely linear fashion. So what we're gonna do is add an easing function and svelte has a bunch of easing functions and readily available for you.
[00:01:10] So cubicOut from svelte/easing. CubicOut is a function that takes a value between 0 and 1, and returns another value between 0 and 1 after it's applied the easing, and it allows us to do, much nicer motion looks like this. So now it's fast at the beginning, then it slows down as it eases out into its final state.
[00:01:44] And you can get a full list of all of the different easing functions, which that website is no longer available. And we can pass more options to tween, the second argument contain the delay. In which case, the tween won't happen immediately. We can specify the duration as a function.
[00:02:14] And you can provide a custom interpolator if you're tweening between numbers and objects that have the same shape. Then Svelte already knows how to handle those. But you can add a custom interpolated that allows you to, for example, tween between two strings representing colors. And all the options that you can pass in when you create a new tween store.
[00:02:36] You can also pass in when you call tweened.set value options or tween.update function options. So you have a lot of flexibility with how these work. The spring store is similar to the tween store except that instead of passing it an explicit using function and an explicit duration. It will use some very basic physics to do the same thing.
[00:03:11] It's a better option for values that frequently change because whereas with the twin store, if you set the value while a tween is happening, it will abruptly stop and then Changed the new value with a spring it's continuous motion. And if you change the value while it's already in the process of moving to the new value, then it will sort of take that into account and it will move in a much more natural seeming way.
[00:03:35] So, once again, we're gonna import from the svelte motion package. We're gonna replace these writable stores with springs. I should have shown you what this looks like without the spring. Let me just rewind. So right now we have a writable store that represents the mouse position. You can see this little orange dot just follows the mouse around when I click the trackpad, it gets bigger like so.
[00:04:07] Which I find that works but we can make it nicer by using a spring store. So we're gonna import spring once again from svelte motion. Gonna replace writable with spring right now. And so now you can see that, the orange dot, kind of follows the mouse around a little bit more slowly and when I click it gets bigger and smaller with the same kind of smooth motion.
[00:04:38] And those two things are independent so it can be moving and it can be getting bigger and smaller at the same time. And that works because down here inside this SVG element. The circle is again using the name of the store prefixed with the dollar. And then it's just taking the x property and the y property of the code store and this size value directly.
[00:05:06] So just like with the tween store, we can pass in some options as the second argument. So for example, we can add some stiffness and damping. They will change how the physics of of this paper you can see now, it's a lot kind of spring here. And we can actually change these values dynamically, change the stiffness way up, and I can change the damping way down, and it'll start to get a little bit silly.
[00:05:35] Stiffness down and the damping way up. So depending on what kinda effect you're trying to achieve and your UI, you can customize these values.