Hi! I made this video explaining how to use animated icons on your Home Assistant dashboard some time ago. Two years later, things have changed, and I will show you how to do this in the new section dashboards in Home Assistant! From now on, your dashboard will look amazing with these animated icons and cards. Let’s dive in!

---

⭐⭐⭐ NOTE: ⭐⭐⭐

This article is the script for a YouTube video. I wrote it before recording the video. You can help me continue doing this by checking out the video, commenting on it, giving it a thumbs up, and subscribing to my YouTube channel. This will ensure that the video is offered more frequently to new visitors, allowing them to stay informed about the latest Home Assistant tutorials and smart home-related product reviews.

I appreciate your support!

Ed

Click here to watch the video.

Introduction

The new section dashboards in Home Assistant are great, but they can sometimes feel a bit static. Fortunately, you can change that yourself, and with the help of this tutorial, you don’t need to be very technical to do so. I’ve created several ready-to-use animations in this video that you can quickly implement.

By the way, I got this idea from Rhys, who has shared many more ideas on the Home Assistant forums. The link to that page is in the description of this video.

I will show you how to create these animations, but first, we need to install a HACS integration.

Install Card Mod

You can change the looks of cards on your dashboard by using CSS. To use CSS in cards, you need a HACS integration called card-mod. If you do not have HACS installed yet, I created this easy-to-follow video on how to do that. Check it out. Let’s first install the card-mod integration.

• To install card-mod, we are going to HACS.
• Search for card-mod.
• Click on card-mod.
• Click Download.
• Click download again.
• Click Reload
• Clear your browser cache to be sure.

Now that Card-Mod is installed, we can change our dashboard to include animated cards. I prepared some animated cards and will explain how I created them. Although it’s not necessary, I also use Mushroom cards. So, if you want to use them, please install the Mushroom cards using HACS.

Create animated badges

Let’s start with explaining the animated badges:

As you can see, I created five badges on this page:

• A Home badge that bounces.
• A Power badge that pulsates.
• A fan badge that spins.
• A mailbox badge that jumps around.
• And a Motion Detector badge that flashed the motion sign.

If I put the dashboard in Edit mode by clicking the pencil icon, I can show you how I created each badge.

The Animated Home Badge

For the animated home badge, I chose to add a mushroom-template badge. Because I added some YAML code, I can no longer view this badge in the Visual Editor. However, as I will show you later, this does work for tile cards.

At the bottom of the badge’s code, I added the following lines:
I start with card_mod: to activate the card_mod integration we installed via HACS. Then comes the line “style: |”. After that, we add the CSS code to make the house icon bounce.

We do this by modifying the behavior of ha-state-icon, which is why we start with ha-state-icon.

In this case, I named my animation “Boing”; it lasts 3 seconds and will repeat infinitely. The transform-origin transforms on the x-axis at 50% and the y-axis at 90% of the image. Now, we have to define the animation itself. For this, I created the line “@keyframes” for the boing animation that we named before. Within the boing keyframes, we define what should happen at specific percentages of the animation time. In this case, we use the scale3d function that scales our image on the x, y, and z-axis. In this case, it scales at 0, 7, 10, 12, 16, 19, and 25% of the timeline of our animation. You can play with the numbers yourself to change the actual animation.

The Power Button Animation

The second animation animates the power button. Again, we define a ha-state icon. I called it pulse this time, and the timeframe is 3 seconds. The animation occurs on the x-axis at 50% and the Y-axis at 60%. As we did with the House icon, I defined keyframes for the animation called “Pulse.” Now, we use the scale function to scale at certain keyframes, this time at 0, 10, 17, 33, and 60 percent.

I hope you already have an idea about how this mechanism works. The House and the Power button animations do not differ much. But there is one difference that I haven’t explained yet. I have added code after the animation line that checks whether the power button is turned on. This code ensures that the animation is only applied if the power button is on. For this tutorial, I created Toggle Helpers, and in this case, I am checking whether the input_boolean.power_office helper’s state is set to “on.” Of course, you can also use the sensor’s state for this.

The fan animation

Let’s do this for the fan badge, too. This time, we will make it spin only when the fan is on! We start with ha-state-icon again. This time, I named the animation rotation. It runs infinitely, and a full rotation takes 1 second. To ensure that the animation only shows when the fan is on, I’ve added an if statement that checks if the state of my animate_airconditioning is “on.” Using this, the animation will only trigger if the state is “on.”

I defined the animation in the keyframes section, which I named “rotation.” At 0%, the icon is rotated 0 degrees. At 100%, it is rotated 360 degrees.

The mailbox animation

The mailbox animation is similar to the other animations we’ve already created. I called the animation bounce and added an if statement again. This time, it checks if an input boolean “mail_arrived” is set to On.

If you want to automate your letterbox, please watch this easy-to-follow video explaining how to set it up. It uses the older menu structure, and the Home Assistant interface looks slightly different but is still valid. The keyframes for the bounce animation are set so that the icon jumps up and down on the y-axis and rotates a little bit simultaneously.

How to set up a polygon clip-path for our Animated Dashboard

Now, we will introduce a new thing in our animation: the polygon clip-path. Using a polygon clip-path, you can mask some parts of the icon so that that part is only visible. There are various tools for that on the internet. The one that I use is the CSS Clip Path Generator at cssportal.com. First, I downloaded the “mdi:icon” I’d like to use from materialdesignicons.com. Search for motion-sensor. Click the download icon and download the image as an SVG image. Then, go to the CSS clip-path generator and upload that image via the Upload image link.
Then, please select one of the example symbols and adapt it so that it only shows the part of the icon you want to show in the animation. Then, copy the clip-path line shown below the image to your clipboard.

The motion sensor animation

Now that we’ve determined the clip path for our icon, we can apply it to our animation. Let’s set it up.

We start with ha-state-icon again. I named the animation “clip”. It runs for 2 seconds and will loop infinitely. I also added an if-statement so that the animation would only play when motion was detected. If we look at the keyframes for the clip animation, I added just one line that activates the clip-path at 50% of the animation. So, I’ve pasted the code we copied from the CSS Clip-path generator in this line. The result is that the whole icon is shown at 0%, and the clip-path gets applied at 50%, which means that the motion symbol is not visible then, and it looks like the animation is flashing.

Our badges are ready. I hope you now know how to create animated badges. Let’s quickly look at the other cards I’ve created. They use the exact mechanisms I’ve shown in the badges, but they have some extra functionalities.

The airconditioning card animation

Let’s look at the air conditioning card. This is a Tile Card. I click on Show Code Editor to see how I animated it. This animation code is the same as the fan badge code, so there’s no difference between codes for badges and cards. Instead of linear, you can also use ease-in or ease-out, but I prefer linear in this case. Again, I’ve added an if statement to check if the air conditioning is on or off.

The Light animation

The next card is the light card that blinks when it’s on. Again, we are using the clip-path polygon animation for this card, just like we did for the badge’s motion sensor icon. Let’s open the visual editor for the light card. I used a Mushroom template Card this time. I click Show Code Editor to view the YAML code. We start with ha-state-icon again. Within ha-state-icon, we name our animation “illumination,” which lasts 2 seconds and loops infinitely. And I’ve added an if statement again that checks if the light is on. Then, I created the keyframes for the illumination animation. I created a clip-path polygon using the CSS Clip-Path generator site just like I did for the motion sensor badge and pasted the code here. The clipping path kicks in at 80% of the timeframe, resulting in a light-flashing effect. It doesn’t matter if you fill in 80% or another percentage because the clip-path gets activated only once within 2 seconds.

The Sprinkler animation

The sprinkler card makes use of the polygon clip-path, but this time I use two polygon clip paths that alternate. I first created two clip-path polygons using the CSS Clip-Path generator site. You see, I started with ha-state-icon again. I called the animation “Spray,” it lasts 2 seconds, eases in, and loops infinitely. And I’ve added an if-statement again to check whether the sprinkler is on. I’ve also created this lovely video explaining how to set up your fully automated garden watering system. Check it out if you need something like that, too.
I added two keyframes for the spray automation. The first clip path shows at 0, 50, and 100%, while the second one shows at 25 and 75 percent, so it looks like it is spraying.

The scenes animations for our Animated Dashboard

Next, I’ve created three scene buttons to switch between scenes on my dashboard. If you want to know how to switch scenes with a button in Home Assistant like Philips Hue, check out this awesome video that explains exactly how to set that up! The first button spins the icon when I click it, the second button pushes the icon in a bit, and the third button pushes the icon down when you press it. Let’s see how you can set this up.

For the first button, we click on Show Code Editor. When you click on a card, it becomes active, so this time, we trigger the animation when the card is active. For the first button, we rotate the icon 360 degrees and set the rotation transition to 500ms. As you can see, rotating an icon when you click on a card differs from rotating an icon infinitely.

For the second card, we are again triggering the active state of the card. To give this card the effect that it seems to be pushed in, we transform the scale to a value lower than 1 and set the transition to 0 seconds.

I moved the card 1.5 pixels down for the third card and added a box shadow. The shadow is not visible in dark mode but creates a nice extra effect in light mode.

Conclusion

This is how you can create animated icons and cards in the new sections view of Home Assistant! The possibilities are endless! You can see more examples on this site. The link is in the description below. I am curious about what animations you can create. Let me know in the comments, and send me your dashboards on the Dump Your Dashboard channel on my Discord server. You’ll also find the link to my discord server in the description.

If you don’t want to type the code from the screen, you can sponsor me with a coffee and download the code I created for this video in return via the Ko-fi link in the description below. This will allow me to continue making these videos for you.

I want to thank everyone who has supported me in making these videos and tutorials. I could never have done this without you. Thank you! You can support me through Patreon, Ko-Fi, or becoming a paid channel member. If you want to support me, look in the description of this video for the links. With that, you make it possible for me to continue to make these videos for you.

Don’t forget to give this video a thumbs up, subscribe to my channel, and hit the notification bell.

I will see you soon!

Bye bye!