How would you feel if I told you that you could add animation to your view projects with a single directive? Pretty excited, right? Well, that's what I'm going to do in this lesson, and it's all made possible with this plugin called AutoAnimate. But first, let's take a look at the setup for my example code.
On the right-hand side, you can see that I've got different boxes of different colors displayed, and at the top there is a shuffle button. Right now when I hit the shuffle button, we get this kind of disco effect. It's actually kind of cool, but this course is all about transitions and animations. So let's make it better.
How does this work on the code side? Well, here inside of my script setup section, I've defined a random color function, which generates a random RGB value. By the way, I didn't come up with this myself. I actually use GitHub Copilot to write it for me.
So let me show you that really quickly. because if you haven't used GitHub Copilot already, I definitely recommend you check it out. So when creating the code for this project, I literally just typed in the comment, generate random color. And yeah, it gave me a function to randomly create a color.
Now this one actually looks a little different. This one is creating a hex value as opposed to RGB, but let's just see if this works. I'll hit save over in the browser. I'll refresh the page.
Awesome, that works great as well. So a lot of good that GitHub Copilot can do for you. But that's just a little bit of a side note. Let's get back to the topic at hand.
And that is view auto animate. Okay, so down here on line 11, I'm creating a random array with a length of 20 items. And each item in that is one of our random colors. Inside of the template, I have a shuffle button provided.
to shuffle all the different items. And then down here, I've got a div with the class of flex and flex wrap. So all these boxes will line up with one another horizontally. And then I'm just looping over all the colors in my colors array.
I'm saying when I want to click on one of these boxes, I'll remove that color. I'll remove that box from the page. And then I'm setting the style to have a background color here of the random color. Down at the very bottom, we just have a little bit of styling going on to make the boxes appear as boxes.
Okay, so how do I want to add View AutoAnimate? Well, the first thing I need to do, of course, is install the dependency. So I'll open up my terminal and type npm install at formkit slash autoanimate. Now this dependency exposes a plugin that we can install using the use function on the application instance.
So first I'll import it. Notice I did add slash view on the end of the file structure here, and that's because this plugin actually works for all different frameworks, React, Svelte, and Vue alike. Great. Now all that's left is to call dot use on the app instance and pass it the plugin.
Now that the plugin is installed, we can use it anywhere throughout our application. That means inside of our code here, I want to find the element that wraps the items that we want to animate. So the items we want to animate is all the boxes. So I'll put the directive on this div here.
Okay, moment of truth. Let's see what happens. Isn't that beautiful? With just a single directive, we've got this fully fledged, very nice looking animation on our page.
And it works not only for shuffling and moving the items around, but it also works for removing items and the other items moving slowly transitioning to fill space. The applications for this plugin are limitless. It could be used for smoothly transitioning out error messages on your forms. In fact, that's why the FormKit team created this plugin to begin with, to support their main offering, their form plugin.
But you could also use it for transitioning the order of items in a list. and overall just make the user experience more intuitive. While you don't have quite as much control over all the details of the transition with this directive as you would with the view transition component, it's just too easy to install and use to ignore it. js applications moving forward.
How would you feel if I told you that you could add animation to your view projects with a single directive? Pretty excited, right? Well, that's what I'm going to do in this lesson, and it's all made possible with this plugin called AutoAnimate. But first, let's take a look at the setup for my example code.
On the right-hand side, you can see that I've got different boxes of different colors displayed, and at the top there is a shuffle button. Right now when I hit the shuffle button, we get this kind of disco effect. It's actually kind of cool, but this course is all about transitions and animations. So let's make it better.
How does this work on the code side? Well, here inside of my script setup section, I've defined a random color function, which generates a random RGB value. By the way, I didn't come up with this myself. I actually use GitHub Copilot to write it for me.
So let me show you that really quickly. because if you haven't used GitHub Copilot already, I definitely recommend you check it out. So when creating the code for this project, I literally just typed in the comment, generate random color. And yeah, it gave me a function to randomly create a color.
Now this one actually looks a little different. This one is creating a hex value as opposed to RGB, but let's just see if this works. I'll hit save over in the browser. I'll refresh the page.
Awesome, that works great as well. So a lot of good that GitHub Copilot can do for you. But that's just a little bit of a side note. Let's get back to the topic at hand.
And that is view auto animate. Okay, so down here on line 11, I'm creating a random array with a length of 20 items. And each item in that is one of our random colors. Inside of the template, I have a shuffle button provided.
to shuffle all the different items. And then down here, I've got a div with the class of flex and flex wrap. So all these boxes will line up with one another horizontally. And then I'm just looping over all the colors in my colors array.
I'm saying when I want to click on one of these boxes, I'll remove that color. I'll remove that box from the page. And then I'm setting the style to have a background color here of the random color. Down at the very bottom, we just have a little bit of styling going on to make the boxes appear as boxes.
Okay, so how do I want to add View AutoAnimate? Well, the first thing I need to do, of course, is install the dependency. So I'll open up my terminal and type npm install at formkit slash autoanimate. Now this dependency exposes a plugin that we can install using the use function on the application instance.
So first I'll import it. Notice I did add slash view on the end of the file structure here, and that's because this plugin actually works for all different frameworks, React, Svelte, and Vue alike. Great. Now all that's left is to call dot use on the app instance and pass it the plugin.
Now that the plugin is installed, we can use it anywhere throughout our application. That means inside of our code here, I want to find the element that wraps the items that we want to animate. So the items we want to animate is all the boxes. So I'll put the directive on this div here.
Okay, moment of truth. Let's see what happens. Isn't that beautiful? With just a single directive, we've got this fully fledged, very nice looking animation on our page.
And it works not only for shuffling and moving the items around, but it also works for removing items and the other items moving slowly transitioning to fill space. The applications for this plugin are limitless. It could be used for smoothly transitioning out error messages on your forms. In fact, that's why the FormKit team created this plugin to begin with, to support their main offering, their form plugin.
But you could also use it for transitioning the order of items in a list. and overall just make the user experience more intuitive. While you don't have quite as much control over all the details of the transition with this directive as you would with the view transition component, it's just too easy to install and use to ignore it. js applications moving forward.