Vue 3 Animations Tutorial #11 - Staggered Animations (using GSAP)

Key Takeaways

all right then so now we know a little bit about gsap let's use gsap to animate these things in but i want them to stagger in so they come in one at a time so i want them all to come up from below a little bit and also to fade in this first then this then this then this okay so there's several ways to create a staggered effect i'm going to use the way that the view docs recommends and that is to add a delay to each item's animation so there's several steps to this the first thing to do though is to add the transition group around these things right here so we have an li tag for each item on the page we want to transition those in so we change this ul to a transition group like so and we set the tag equal to eul okay so i'm going to put these on the next line down so we can add a few hooks as well and it looks a little neater i'm going to change this closing ul to the transition group as well to close that off and then i'm also going to add a pair to this so it fades into the screen to begin with and then i need two hooks the before enter to set the initial state and then the enter hook to start the animation with gsap so i'm going to say before enter and set that equal to a function which i will call before enter and we'll make that in a minute same for enter set that equal to a function called enter all right so now let's create those functions down here so we have two we have before enter and we set that equal to a function where we're taking the element remember and this is where we set the initial state we'll do that in a second first of all though let's create the other function which is enter so let's rename this to enter and we're taking the element and also the done function which we call when the animation is done we also need to return these down here before enter and enter okay then so first let's set the initial state of the elements and i'm going to do that by saying l.style and then i want to set the opacity to be 0 to begin with so it's going to fade in and then also l dot style dot transform and this is going to be translate and we can spell it translate y and it's going to be 100 pixels and that means 100 pixels from the bottom okay so it's going to come up from that position all right then so i need to first of all replace this with an equal sign it's not css it is javascript that's the initial state right now we want to animate to the state on the screen which is over here so to do that we're going to be using gsap and first of all we need to import it so import gsap from gsap like so and then down here we're going to say gsap.2 to animate to something the first argument is the element that we're animating and the second argument is going to be the different properties we want to animate to so that is going to be an opacity of one also y of zero so it goes back to its original position and then we're going to say the duration is going to be 0.8 seconds and then finally we need our oncomplete which is the done function all right then so the way this works is that this is going to run this enter function for every single li tag individually and it's going to perform this individually on each element we get all right so if we save at the minute and take a look it works but they all come in together it's not staggered at the minute so how do we now make a stagger effect so they come in one at a time well to do this we're going to use a delay so come down here inside this object and add delay property and what this does is delay the animation by a certain amount of time now i'm going to say 0.2 seconds because i want each one to come in 0.2 seconds after the other one but if i do this it means the delay for each one of them is going to be 0.2 seconds and they're all going to be delayed by the same amount of time and we still don't get that staggered effect so what we want to do is delay maybe the first one by nothing then the second one by 0.2 then the third one by 0.4 then the fourth one by 0.6 seconds so they come in one after the other that makes sense so how do we do this well we kind of need the index of the item in the list if we have the index we can just times this by the index for example this is index 0 so 0 times 0.2 is 0 for the delay this one is 1 so 1 times 0.2 is 0.2 seconds for the delay this one too 2 times 0.2 is 0.4 and then this one is 3. 3 times 0.2 is 0.6 so if we can find a way to pass the index of the elements into this thing right here then we can do this and we can't easily do that so what i'm going to do when i'm using the v4 is add the index right here and we can do this it's the second item inside parentheses and then we can use the index of the item in a data set so i could say data hyphen and then call this what you want i'm going to call it index that should be high for not equals and then set it equal to this index right here so we have to data bind to do this and right here i can say index cool so now this is going to be zero for the first one then one then two then three and we can access that from this element by using the data set property so i could say down here l dot data set and then the name of this data set which is index in our case that's what we called it right here so dot index times 0.2 so that's going to be zero first then one then two then three so each one is going to have a different stagger so if we save this now then hopefully yep we get a nice staggered effect and that looks a bit better cool