Animations in shadcn/ui

[00:00 - 00:21] shadcn/ui components come with several different animations built in. For example, the Select Component in an Out Animation, you can see it now on the screen. Looking into the source code of shadcn/ui Select Component, you can see that the animations are defined on the component level.

[00:22 - 00:53] It's a bit long, but looking into the Select Primitive Content Class name, you can notice the classes responsible for its animations, the Data State Open Animating and the Data State Closed Animated Out, the Data State Closed and Open Fade Out and Fading, and the rest of the animations. The Data attribute is managed by Radix and set on the HTML attribute level when the state changes, let's see that inside the element step.

[00:54 - 01:06] I'm opening the Select Component in shadcn/ui Dogs, and you can see how the Data State on the button changes from Closed to Open. Open the DevTools, click on Right Click and Inspect.

[01:07 - 01:16] Go to the Elements tab if you're not there, and click on the Locate and then Locate the Select button. Notice the Data State attribute on the HTML element.

[01:17 - 01:23] Right now it's set to Closed. When I'll open it, you can see that this is changed to Open.

[01:24 - 01:28] See it again. It's now open, and when I click it's changed to Closed.

[01:29 - 01:52] By using Tailwind feature for enabling and disabling classes based on the Data attribute, the Class names will be applied only when the attribute, the Data attribute, is equal to the value on the other side of the equation. shadcn/ui combines Radix UI primitives, like the Select Content we saw, with Tailwind Utility Classes.

[01:53 - 02:03] Tailwind default animations are pretty limited. It's supporting spin, pulls, bounce, and ping, but there's a spatial Tailwind plugin called Tailwind CSS Animate.

[02:04 - 02:14] It offers a full range of animations. For example, the Animatine and Animatine out and fade in Zoom classes that we saw on this Select Component, or part of the plugin.

[02:15 - 02:37] You can explore this Tailwind CSS Animate docs to see the full list of animation it supports. It takes three steps to add a custom animation to a shadcn/ui component, creating a keyframe definition in the Tailwind.config.js file, creating an animation definition in the Tailwind file as well, and adding the animation to the component.

[02:38 - 02:55] So now let's add a new animation to the Newsly app. We'll start by adding a keyframe definition to Tailwind.config.js, Open the codebase, and navigate to the Tailwind.config.js file.

[02:56 - 03:03] Now go to Keyframes and add the wiggle keyframe definition. Great!

[03:04 - 03:16] Now the next step would be to add the animation definition. You've added a keyframe and now it's time to add the animation extension for Tailwind.

[03:17 - 03:20] Fantastic. The last step is to add the wiggle animation to some components.

[03:21 - 03:34] So I've chosen the Sheet Title component in the article link component. So open the article link component, go to Sheet Title, and add the animate wiggle class name.

[03:35 - 03:52] Now run the app, and click on one of the articles on the side. You can see that the title is now being animated.

[03:53 - 04:02] Now how do you customize the animations of shadcn/ui component? Let's say we want to make the Sheet animation spin in and out instead of fade in and out.

[04:03 - 04:32] So open again the article link component, and update the class name of the She et content with the data state closed spinout 6, and the data state opens spin in 6 class names. Go back to article link, remove the wiggle animation if you want, and to Sheet content, now add the data state closed, and data state open class names with spin in 6 and spinout 6.

[04:33 - 04:52] Go back to the app, and when you open you can see that the sheet is now being spinned in and out from the application instead of just drawing in. If we remove the classes that we just added, the animation will stay the same.

[04:53 - 05:00] In this module you've learned about shadcn/ui animation. In the next lesson you'll have an exercise for building new styles in shadcn/ui.