Home Assistant Cards That Respond & Animate Automatically

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!

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. 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. 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. 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 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.

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 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. 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. 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.

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 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 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. 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. 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!