Vue 3 Animations Tutorial #10 - Using GSAP

Key Takeaways

all right and gang so now we know how these javascript hooks work let's try using them to control our transitions instead of using css so i'm in the about component first of all and what i'm going to do is delete all of these css transition classes that we have we don't need those anymore and up here in setup i've just got two hooks before enter and enter and they're the two hooks that we're going to need to create an enter transition and that's also all i return at the bottom so i deleted everything else and then up here on the transition component we have just those two hooks and then i can delete this name right here if i wanted to because we're not using those transition classes anymore but i'm going to keep this right here and that means that when we first see on the page it's going to transition in so we could create all of these animations using vanilla javascript and no extra library but it would take a fair amount of time to code and a lot of trial and error so instead we're going to be using a javascript animation library called gsap gsap is a package that we can install into our project with npm and it works really well with the transition hooks that vue gives us and gsat provides us with a load of methods then that we can use on elements to animate them from one state to another so if you want to learn more about gsap go to greensock.com forward slash gsap and you can read all about it here for now though let's try installing this into our project so then the first step is to install gsap into our project so let's open up a new terminal and say npm install gsap like so and now that's done we can use it inside this project the first thing we need to do is import it so i'm going to say import gsap from gsap which is now stored away in our node modules folder and now we have this we can use it inside any of these hooks right here now the way we do this is by first of all setting the initial state of this element that we're transitioning and we do that in before enter this is a bit like the class enter from we set the initial state where do we want to start so we can do that inside before enter and we don't need to use gsap in order to do this because we're not animating at this point we're setting things up so let me just log a message to the console here console.log and i'm going to say before enter and then hyphen set initial state so this is where we set the initial styles if you like of the element we're transitioning in so in order to do that i can take the element i can say dot style and then apply whatever styles i want to it now to begin with i'm going to say transform and i'm going to set that equal to trans late y minus 60 pixels and basically this means that it's going to start a little bit higher and then eventually it's going to come down onto the page now the other style i want to apply is an opacity so l dot style dot opacity and set that equal to zero to begin with okay so they're the initial styles now i want to transition to the styles that they're going to be on the page and that's where we use gsat because if we just said right here l dot style dot opacity is equal to one for example it's not gonna animate from zero to one it's just gonna click into position when it enters the dom and there's gonna be no transition we want to animate it so in order to do that we use gsap so let me do another log to the console first of all i'm going to say starting to enter hyphen make transition all right then so we'll say gsap and then use a method called two and this is us saying we want to animate to something or other now it takes two arguments the first one is the element that we want to animate in and we get access to that right here the second argument is an object and in here we define the different css properties that we want to animate so i could say y to zero and this is a transform we don't say transform translate y we just say y and this does a transform for us under the hood so it's going from minus 60 to zero the other one is opacity and we want that to be one now the other thing we can do in here is set a duration so i'm going to do that as well duration this is how long it takes and we'll just say it takes one second all right then so if i save this now and come over here then we can see it comes in from the top and it fades in as well so that was quite nice now one thing we can do is add other easing functions to this and we get more with gsap so one for example is bounce dot out and this gives us kind of like a bounce effect so if i save this now and preview i'm going to refresh so we can see that now we get that bounce effect that looks quite nice cool so that's how simple it was to use gsap right here to animate in from an initial state to this state right here now one more thing i want to show you i'm gonna create the next hook so const and after enter set it equal to a function like so and i'm just gonna console.log after enter like so and i also need to return this at the bottom over here so after enter and i'm gonna attach the after enter hook right here as well so after hyphen enter like so set it equal to after enter all right then so this should fire right here after it fully animates in right so to demonstrate this let me just change this duration to three seconds i'm going to save it and i'm going to come over here and i'm going to refresh now notice the hook fires but it's still transitioning in and it should only fire after the animation is complete but the problem here is that the transition component doesn't know when this animation is complete we say the duration is three seconds but this is separate from the transition components we need to tell view when this is done now in order to do that we can use a second argument that we get access to and that is a function that we're going to call done and this is a function that we can invoke to tell view that we've done with the transition now we do that using an on complete property inside this gsat method so this oncomplete property is going to be a function that will fire once this animation is done after three seconds and when we fire that function it tells you that we're done with this stage and then we go on to the next stage so now hopefully this should only log after these three seconds so let me save this and you can see now it waits until it's fully transitioned in and then fires after enter so now we know how to use gsap next up we're going to make a more complex staggered animation for this contact page right here