Svelte Tutorial for Beginners #34 - Tweens & Animations

Key Takeaways

so in this video I want to animate these pole bars right here as the values change we're not really transitioning the bars in and out of the page we're just animating them from one value to another so we're not going to use transitions for this like we did in the last video when we transition a pole in and out of the page instead we're going to use something known as tweens or tweened stores now tweening is the process of generating frames for our movements now svelt has a tween store built in that we can use and that generates a series of values which can be used for each frame between a starting and an ending point so that we get a smooth transition of values rather than a quick jump from A to B okay so I've prepared a quick demo of this before we move on to these bars and that is in the app component right here so first of all I've imported tweened from swells forward slash motion and tweened is a bit like a store like writable we pass in the initial value right here which I have set to zero and we can store that in this thing right here value now down here I've got a button and inside that button what we output is this value remember this is kind of how we subscribed automatically to a store we placed the dollar sign before the store itself that's kind of what we're doing here right we're just placing the dollar sign before the tween store right here value so that should output the value of value right now what I'm doing is also attaching a click event to this button and inside this click event we're firing a function which takes the value and then we use a method on it called set and we're replacing whatever is currently the value as 1 so 0 to 1 now in a store that would just replace 0 with one straightaway like this with a click now in our case we're using a tween store so it transitions from 0 to 1 so we get a range of different numbers over time transitioning as the value and that value is over time being out put inside the button so let's take a look at this in action so let's see it currently it's zero because that is the beginning value if we click on this though you'll see it transition to one it doesn't go straight to one it transitions so that's essentially what we want to do with these two values say we have a width of 28% on one of these bars and we click it and it goes to a width or something like 35% instead of it just jumping to that new value straight away and we get this kind of jump effect in the bars I would like it to transition between those two values from 28 to 35 or from 0 to 100 dependent on what the votes are right so that it slides up the width because the width value is constantly changing that percentage so let's do that first of all let's delete these things right here these tween things and this button and let's apply the same kind of thing inside the poll details component right here so what I'm going to do first of all is I'm going to import tweened from that same thing so let me do that at the top from veldt forward slash motion so we've imported that first of all then down here underneath these reactive values I'm going to do another comments and that says tweened percentages right so the percentages are the things that we wanted tween that we want to change over time because ultimately the width is dependent on that so if this is changing smoothly over time then we'll get a slide effect rather than jumping from one whit percent to the next so down here the first thing I'm going to do is create a new contest called tweened a so this is going to be the percent a tween and I'm going to set that equal to tweened and it's going to begin at 0 right now the second thing I want to do is say Const tweened B and set that equal to tweened and then that starts at 0 as well so now I want to create some more reactive values and when the percentage changes right here of alb that's when I want to update the tweened value of tween day right so let me now say dollar sign : tweened a and we need to say dot set and we're going to update the value in this tween store and that's going to be percent a so remember this reactive value is going to update on this reactive statement rather is going to run when this thing right here that it depends on changes so whatever percent a changes we're going to run this statement which sets tweened a from zero to begin with to its current percentage now when we first begin when we first load these things over here it's going to go from zero to begin with with the percentage it starts with and it's going to tween from those values right but then the new value of tweened a right here is going to be something else maybe 25% so then when we click on up foe is going to tween from that soup the new percents that these automatically work down I hope that's making sense so I want to do the same thing now for B so tweened be set and percent B so whatever percent B changes up here then we're going to retweet this thing right here from whatever the starting point is to the new percentage and so forth and then finally what I'm going to do for now is also do another reactive statement which is going to console dot log swing a and tweened B so we need the dollar sign first of all to get the value that automatically subscribes remember between day which is this thing and then tweened B so dollar sign tweened be like so so now whenever these two values change we're locking them to the console so we should see their progression so now let me go over here and let me just get rid of those to begin with and I'm going to click on this and you'll see now with the percent has tweened from 37 0.25 all the way to this value right here 40 and 60 right and that's a and B so the percentage changes for both because if we up the vote of one of them.that percent of the other goes down so now we've animated 242 in 57 and now it should be animating to 44 and 55 right not animating but tweening the values the percentage values so now we have access to these tweened values we can output those as the width right here instead of the actual percent because now these are going to be constantly changing when we go from A to B they'll be smoother so I'm gonna comment this line out because we don't want to lock those to the console every time but now I'm gonna change this to dollar tweened a and this one $2 swinged B save it and come over here and now if we refresh to begin with we can see they go from zero to their current percentages and if we click on these and vote now they animate between two their new positions which is much better if we add a new poll over here and click that and in fact we'll add a new one do you like Mario who doesn't hell yeah and not for me add a poll and now if we click on one of these then you're gonna see oops that didn't Sween hmm and that's because there is a slight problem so let me just try this again add a new poll and let me go from here from zero to the new value now it didn't tween and that's because when we first create a poll the poll votes a is going to be zero right and the total votes is going to be zero so when we're trying to work out the percents this is going to give us not a number because we're trying to divide 100 by zero then times it by zero so this is an invalid number so what we should do is place double pipe here a logical or and if this then is undefined or rather not a number then it's gonna apply this value to percent a instead so zero there as well and now for new polls we're going to tween from zero to whatever the new value is when we click on it instead of from some kind of undefined or not a number right so let me save that now and try that again so add a new pole this hopefully should work and now if we click on this yep now it transitions alright it animates between the two now awesome so that is tweening have a play around with it and I'm sure your grasp it in no time and that my friends is pretty much it so in the next video we'll have one more test of this application and I'll also talk about what are the tutorials on spell are coming up in the future