This video is going to change the way your dashboard looks in Home Assistant. Forever. Let me rephrase that. Starting today, your dashboard will look Awesome, just awesome with these ANIMATED MUSHROOM CARDS. Let’s dive into this!

---

⭐⭐⭐ NOTE: ⭐⭐⭐

This article accompanies a YouTube video. I wrote it for people who would rather read than watch a video. To keep doing this, I would like to ask you to also check out the video, leave a comment under the video, give the video a thumbs up, and subscribe to my YouTube channel. This means that the video is offered more often to new visitors so that they also stay informed of the latest Home Assistant tutorials.

Thank you for your support!

Ed

Click here to watch the video

Introduction of the Animated Dashboard

Mushroom cards came into our lives a couple of months ago and that changed the whole way of creating beautiful dashboards in Home Assistant. If you’re not using Mushroom Cards yet, then check these out. You can install Mushroom cards using HACS. I’m not going to deep dive into mushroom cards today, but I’m going to show something that might just blow your mind! And that is Animated Mushroom Cards! This is so cool. You can animate the Mushroom cards and icons in various ways to spice up your dashboard.

But, before we start, please subscribe to my channel and hit the thumbs-up button for this video. This way, you make sure that I can keep creating these videos for you!

First of all, I have to give credit to Rhys, who came up with the idea and a lot of inspiration for various types of animations. You will find a link to examples that he created in the description below. This isn’t going to be an easy-to-digest video. To create Animated Mushroom cards, you need to understand how CSS works and that might be challenging. I will try to explain how this works as well as I can so that you can set up your own animations. And, you can also download the code I used in this video via the link in the description of this video below.

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 which is 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.
• Go to Frontend.
• Go to Explore and Download Repositories
• 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 start by changing our dashboard so that it has animated cards. I already prepared some animated cards and will explain how I created the animations. Again, if you haven’t used the Mushroom Cards before, you can also install these through HACS.

I am going to explain how I’ve set up the animated icons on this tutorial dashboard. You can download this dashboard via the Ko-Fi link in the description below. You might as well download and install the dashboard first on your setup of Home Assistant so that you can follow along and alter the code to your needs. And… you sponsor me in the meantime.

Create Animated Dashboard Chips Icons

Let’s start with explaining the animated chips icons:

As you can see I created 5 chips on this page:

• A Home chip that bounces
• A Power Chip that pulsates
• A fan chip that spins
• A mailbox chip that jumps around
• and a Motion Detector chip that flashed the motion sign

Let’s edit the chips card.

• Click on the three dots in the right upper corner.
• Click Edit Dashboard
• And click on edit on the chips card.

As you can see, all chips are Template chips. We need to use Template chips for this because we are going to add CSS in the YAML code for each chip. If you click on the pencil next to a chip, you won’t see the CSS, so we are going to click on the Show Code Editor link. Now we see all the chips that are defined in the chips card. This is still business as usual, but if we scroll down, you see the card_mod line. And this is where the fun starts.

The House animation

Below card_mode we see the line: style, and after that, the styles for each element are defined. You can point to the specific chip with the code mushroom-template-chip:nth-child(1)$: where the number represents the position of the chip in the list.
After that, we start with ha-icon and define the animation. In this case, I named my animation “boing”, it lasts 3 seconds and will repeat infinitely. The transform-origin shows that it transforms on the x-axis at 50% and on the y-axis at 90% of the image. Now we have to define the animation itself. For this, we create the line @keyframes for the boing animation that we named before. Within the boing keyframes, we define what should happen at certain 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-icon. This time I called it: pulse and the timeframe is 3 seconds. The animation takes place on the x-axis at 50% and on the Y-axis at 60%. Just like we did with the House icon, we define keyframes for the animation that I 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 get an idea about how this mechanism works. The animations for the House and the Power button do not differ that much. Let’s do this for the fan chip too. This time we will make it spin! And we will only make it spin when the fan is on! For this tutorial, I created input_boolean helpers for each icon to determine if a sensor is triggered or not. You can of course use the state of a sensor for this too.

The fan animation

We start with ha-icon again. This time, I named the animation: rotation. It runs infinitely and a full rotation takes 1 second. To make sure that the animation only shows when the fan is on, I’ve added an if statement that checks if the state of my animate_fan is “on”. Using this, the animation will only trigger if the state is “on”. When using a chips card, we cannot use a simple rotation animation, but we have to create a more complex animation. So, I’ve added the keyframes rotation like so. At 0% it sets the rotation to 0 degrees and at 100% it sets the rotation at 360 degrees. So, it rotates from 0 to 360 degrees during the timeframe of 1 second.

The mailbox animation

The mailbox animation is similar to the other animations that we’ve already created. I called the animation: bounce and I’ve 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 too, please watch this easy-to-follow video that explains how to set it up. It makes use of the older menu structure and the Home Assistant interface looks a bit different, but it’s 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 at the same time.

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

Now, we’re going to introduce a new thing in our animation and that is 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 download the mdi:icon that I’d like to use from materialdesignicons.com like so. Search for motion-sensor. Right-click on the image and download the image. Then go to the CSS clip-path generator and upload that image there.
You can upload an image into the CSS clip-path generator like so. Then select one of the example symbols and adapt it so that it only shows the part of the icon that you want to show in the animation. Then, copy the clip-path line to your clipboard that is shown below the image.

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-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 will only play when motion is detected. If we look at the keyframes for the clip animation, we see that I added just one line that activates the clip-path at 50% of the animation. So, I’ve pasted the code that 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 at that moment and it looks like the animation is flashing.

Now, our chip card chips are ready. I hope you got an idea by now of how you can create animated Mushroom card Icons. Let’s have a quick look at the other cards that I’ve created. They basically work with the same mechanisms that I’ve shown in the chips, but they have some extra functionalities. Especially, the washing machine automation with the spinning wash is a tricky one! Watch the video until the end to understand how to set up that one!

The airconditioning card animation

Let’s look at the air conditioning card. This is again a Mushroom template Card. Click on Show Code Editor to see how I animated it. Now that we are not using chips, we do not need the nth-child pointer anymore. Our card contains only one icon, so we can immediately address the mushroom-shape-icon$ like so. We start with ha-icon again and can define the automation immediately. This time, we can use a default animation called spin that runs linearly for 1 second and loops infinitely. Instead of linear, you can also use ease-in or ease-out, but I prefer linear in this case. And again, I’ve added an if statement to check if the air conditioning is on or off.

The scenes animations for our Animated Dashboard

Next, I’ve created three scene buttons to switch between scenes on my dashboard. If you would like to know how you can 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 is pushed down a bit and the third button changes the background alpha when you press it. Let’s see how you can set this up.

We click on show code editor for the first button. When you click on a card, it gets active, so this time we are triggering the animation when the card is active. For the first button, we are rotating the icon 360 degrees and we set the rotation transition to 500ms.

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.

We are triggering the active state of the third card again and changing the background alpha to 0.6. The transition is again 0 seconds.

The Light animations

The next set of cards is the light cards that blink when they are on. For these cards, we are using the clip-path polygon animation again, just like we did for the motion sensor icon in the chips card. Let’s open the visual editor for the first card. This time, we start with ha-icon again. Within ha-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 chip card and pasted the code here. At 80% of the timeframe, the clip-path kicks in and that results in the light flashing effect. It doesn’t really matter if you fill in 80% or another percentage, because the clip-path gets activated only once within the timespan of 2 seconds. The second light card works exactly the same.

The Sprinkler animation

And now for the last two cards: the sprinkler card and the Washing machine card. The sprinkler card makes use of the polygon clip-path, but this time I use two polygon clip paths that alternate. I created a clip-path polygon using the CSS Clip-Path generator site first. If we open the first card, you see that I start with ha-icon again. I called the animation: spray, it lasts 4 seconds, eases in, and loops infinitely. And I’ve added an if-statement again to check if the sprinkler is on or not. Oh, I’ve also created this really nice video that explains 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%. The second clip path shows at 25 and 75 percent so that it looks like it is really spraying.

The Washing Machine animation on our Animated Dashboard

And now, the final piece! The washing machine. This animation is next level, but so cool once it works! If it’s too complicated for you, you can download the code at the Ko-Fi link in the description below. We need an extra HACS integration for this which is called the stack-in-card. So, first install the stack-in-card through HACS, just like how you installed the card-mod integration.

Install the Stack In Card

• To install stack-in-card, we are going to HACS.
• Go to Frontend.
• Go to Explore and Download Repositories
• Search for stack-in-card.
• Click on stack-in-card.
• Click Download.
• Click download again.
• Click Reload
• Clear your browser cache to be sure

The stack-in-card makes it possible to show multiple cards within one card. And that is exactly what we are going to do for the washing machine card. Basically, we are going to show the same card twice on top of each other. The first card will show the washing machine without the laundry. The second card will show the laundry only and will rotate that laundry. For the first card, we are going to use a clip-path polygon and for the second card, we are going to use a clip-path circle. Let’s open the code editor for this card. As you can see, I defined two cards within the stack-in-card. Both cards are exactly the same but have a different card-mod configuration. The first card uses a clip-path polygon to only show the washing machine without the laundry. I’ve added some extra code to remove the border that is shown around the two cards, but that’s just a small optical solution.
Then, on the second card, you see that I added a standard spin icon-animation that spins for 1 second and loops infinitely. And I added an if-statement to let it spin only when the washing machine is on. The transform origin is the point around which a transformation is applied. I set the transform so that the animation starts at 50% of the x-axis and 58% of the y-axis. And I added a circle clip path around the laundry.
By default, the cards within the stack-in-card are shown below each other. To make sure that they show on top of each other, I changed the top position of the second card to -99px. This way, it is dragged on top of the first card.

And, I set the height of the stack-in-card to 100px, so that it fits the height of the sprinkler card that is shown to the left of it.

Conclusion

And this is how you can create animated Mushroom Cards! 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 find the link to my discord server in the description below.

If you don’t want to type the code from the screen, you can download the code that I’ve created for this video via the ko-fi link in the description below. With this, you sponsor me, and make it possible for me to keep creating these videos for you.

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

Oh, 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!