Create Stunning ANIMATED MUSHROOM CARDS On Your Dashboard NOW!

[@SmartHomeJunkie]

What do you think of Animated Mushroom Cards? And did you implement it yourself? Let me know in the comments!

[@davidr521]

Ed - another great video! Perhaps I missed it, but I'm trying to use the mushroom-climate-card and animate the icon, and I'm unable to figure it out. Any ideas? (ED)IT (pun intendED): I figured it out!

[@horaciohermosillo3417]

These mushroom cards are awesome and makes HA look great but is there a way to change the color of the card instead of just the icon based on the state? not sure if I didn't see it.

[@BallsworthBallsbury]

Ed, your HA tutorials are the best on the Internet! It's clear you put a lot of thought and effort into editing them so they're informative and easy to follow, even for complex topics like this. Thank you for all you do! You are a gift to this community, my friend

[@SmartHomeJunkie]

Wow! That is a very big compliment! Thank you so much for that!

[@bat3332]

@@SmartHomeJunkie very small compliment to the big amount of work you put in . you deserve it

[@grahamshaw5531]

I will be off work from Tuesday until next Saturday. I might just have the time to have a go at this. Thanks

[@riesmoos]

Yes, stunning ! Love the animated washer. Thanks for the tip. Great video again !

[@adifoto6362]

Love the video. Thanks for sharing.

[@jaap7374]

Very nice video with an emphasis on inspiration with a good idea of the complexity while leaving the details to the documentation.

[@ianrobson9612]

Another great video. I am really glad I opted to use home assistant and found your videos. They along with another presenter have helped me immensly in getting my house automation and the dashboards looking and performing well. The good part is I am just getting started and so there is so much more to learn.

[@SmartHomeJunkie]

That's great to hear!

[@chunkster29]

you can use mushroom entity card as well and the animations still work

[@sevagjb]

Very nice idea, modern and makes the dashboard cool😎 Thanks Ed

[@johntisbury]

Looks like fun, that's now on my to-list list. Thank you.

[@jumbleblue]

I really appreciate your thorough and clean explanations. Thank you!

[@osborne82]

BRILLIANT video , many thanks. i know what im doing this week lol

[@SmartHomeJunkie]

Please show me the results when you're finished!

[@eduardobodega5886]

Awesome Ed, thanks

[@limp15000]

Wow this is great ! Will do a quick test now on my mushroom dashboard :)

[@SmartHomeJunkie]

Let me know if it worked for you and show your results!!!

[@Avico78]

excellent , thanks much , i tried to impelment it on single simple "button" card but didnt work for , can i add card_mod to "button" card ?

[@SmartHomeJunkie]

This tutorial only works on mushroom cards because the CSS points Mushroom CSS tags in the code. If you want to do this for a simple button, you need to point to the CSS of that button instead.

[@Avico78]

@@SmartHomeJunkie thanks , it would be great if could prepare a tutorial about customization non mushroom cards ,again thanks for your work!

[@RixtronixLAB]

Creative video, well done, thanks for sharing it :)

[@BeardedTinker]

Great video Ed. Makes me want to do something about my UI :D

[@johnny-d8o8m]

Great video about the use of the powerfull card mod. Would appreciatie more about that. E.g. A tutorial on how to modify the standard to-do card using card mod would be appreciated

[@Manu_67]

Ed you Rocks! Thx for your work

[@matteodamiani9705]

Great work! thank you so much! do you think is possible to performe same washing machine animation with icons in custom button card?

[@Petersoniq]

Thank you for your animation examples. Did you have same example have animate icon base on numeric sensor - like temperature?

[@SmartHomeJunkie]

You can just change the if statement to check on the temperature sensor value and you'll be fine.

[@PeterLindh]

Thanks for your excellent videos and tutorials! Is there a way to make the animation with the washing machine work even if I add "secondary:" with info from for example a temperature sensor? Adding that line puts the center of the icons in different positions.

[@SmartHomeJunkie]

I think so yes. You have to fiddle with the position value I guess.

[@PeterLindh]

@@SmartHomeJunkie I have tried without success and would be grateful if someone with more knowledge could guide me.

[@SmartHomeJunkie]

@@PeterLindh Change top: -99px; to top: -117px; and you should be fine.

[@SanilSahadevan]

Thank you so much ... all of these excellent tips... works a treat.. my dashboard looks good... btw i have a doubt... these examples.. I have followed them to the word.. but i don't understand how you get these element names... like.. mushroom-template-chip, mushroom-shape-icon, ha-icon.. etc.. how can i retrieve those names

[@SmartHomeJunkie]

These are the css tags in the code of the webpage.

[@SanilSahadevan]

@@SmartHomeJunkie.. Will you be able to make a short video on how to retrieve those tags and how to use them in the cards for different styles editing... Im kind of stuck in one of your other videos with grid layout for dashboard... And using grid areas..

[@SmartHomeJunkie]

@@SanilSahadevan I will put it on the list.

[@SanilSahadevan]

@@SmartHomeJunkie thank you

[@DutchCorvette]

Thanks for this video it's really helpful

[@miketargaryen1210]

Hello, thanks for another lovely video! Sorry if this has been asked/covered before, but how would we approach an animated chip, however it would be based on the state of the weather forecast of an entity So if it cloudy show a cloudy animation or snow if snowing etc.... I hope this makes sense.

[@frason85]

Nice one 👍Just did the washing machine animation, but I'm a bit disappointed to see that the icon color is more saturated with the stacked cards. Maybe because there are two semitransparent icons on top of each other, making it less transparent? Any tips on this? Looks weird with another card next to it with a "different" color, although I've chosen the same color for the icon. Can i remove the background color from the icon on the second card somehow?

[@SmartHomeJunkie]

Hmmmz, I did not experience that before. Maybe it's because of a theme you use?

[@frason85]

@@SmartHomeJunkie I've tried the Mushroom themes, noctis and some other themes, all with the same effect. Its obvious if i set the top position of the cards slightly offset that the overlapping part is more opaque. I've "solved" it for now setting the icon_color for the animated card to ' ', which makes the "laundry" part of that icon black, but the rest gets no color, so the "laundry" part stays black and the rest amber ss set in the first card.

[@frason85]

@@SmartHomeJunkie Tweaked it a little, using a conditional card showing the animated card, so the washing machine looks empty when not running 👍 Posted a video with the increased opacity problem aswell if you'd want to see what I mean.

[@robertvasey]

@@frason85 I had the same issue and spent an embarrassing amount of time trying to solve... but finally found a solution. Using developer tools in the browser I noticed in the mushroom-shape-icon that background-color was being inherited from a parent element "shape". So if you reference .shape in your CSS and set background-color to transparent it should be solved. mushroom-shape-icon$: | ha-icon { clip-path: polygon(blah blah blah); background-color: none; } .shape { background-color: transparent !important; }

[@ronzoot602]

Weer een leuk leerzaam filmpje , Zou je ook eens kunnen uitleggen hoe je een 2`HA kunt laten lopen naast je goede verzie ? , Gewoon een test verzie zeg maar . Enne ga zo verder :)

[@pdz7197]

Really cool. One question about performance of Dwain Dashboard with such cards? Dwain's dashboard with a lot of hidden entities is really lagging on older tablets, so what will happen if I use animations?

[@SmartHomeJunkie]

I'm not sure if this will work with Dwains Dashboard to be honest. But, performance shouldn't be an issue using CSS. It's really lightweight.

[@gambler3k]

can u make a template chip with conditional and still animate icons?

[@ziezoenie-2023]

This would be interesting yes :)

[@carlopic6610]

Hi, thanks to you I met Rhys and his animated cards. I used them but I realized that lately many no longer work on Home assistant. Have you understood why they no longer work? I hope you have noticed this too and maybe find a solution. Thank you, Carlo italy

[@SmartHomeJunkie]

I explained in the description of the video how to fix that. Also the download code contains the fixes.

[@carlopic6610]

@@SmartHomeJunkie Thank you, Carlo italy...You are great

[@SmartHomeJunkie]

☺@@carlopic6610

[@michaelmastromatteo8196]

@@carlopic6610 Salve Carlo, sei italiano ? Se si, tu sei riuscito a far funzionare le animazioni ? Se si, mi fai sapere come, per favore ? Grazie mille.

[@AceBoy2099]

I looked this up to try and figure out how to make an animated garage door icon (color and image, open/closed, and in-between). Guess I'll have to watch this a couple more times along with my pc next to me to try and figure it out

[@MichaelRnnChristensen]

Super nice - thanks. I almost made it all way through implementing my own nice version in my own home assistant, but the tumble dryer is bugging me. I find it extremely hard to create the clip-path for the icon with the inner circle removed using the "CSS Clip-Path Generator". I'm creating a similar animation using the "heat-pump" icon, trying to make the inner fan spin. The clip-path for the inner circle ("icon 2") is easy, but I'm unable to do the trick without the inner circle ("icon 1"). Is there a trick I have missed?

[@SmartHomeJunkie]

I can totally understand. If you recreate the polygon of the washing machine on the washing machine icon on the CSS Clip Path Generator site, you'll see how that one is created and that will give you a hint on how to create your own for the heat pump! You can recreate this with a custom polygon on that site.

[@christian1603]

Great, just what I needed! One question though: how can you achieve what you did with the 3 entity buttons (cozy, cold, green) with template buttons?

[@SmartHomeJunkie]

Great to hear. I'm not sure what you mean. You can use Template Mushroom cards as well, just like how I used it for the Airconditioning button.

[@christian1603]

@@SmartHomeJunkie Everything is better in the morning...typo found 😀

[@SmartHomeJunkie]

@@christian1603 Classic!

[@marcopaolidds]

how to make it work over an "Horizontal Stack Card Configuration"? i can not manage to work it out using your code. it miss the "chips:" line, but where to insert it? could I show you the code?

[@SmartHomeJunkie]

You need to hook into the right css tag.

[@dragosmc17]

Great tutorial. Is it possible to have a more in depth explanation of how the multiple CSS elements inside the mushroom card work? For example I’d like to edit the TV volume bar in the media mushroom card and I can’t seem to be able to find what/how exactly it should be edited. Thanks!

[@MrDenisJoshua]

So definitely and honesty... witch dashboard you use actually please ? Dwain or else ? Thanks for the video

[@SmartHomeJunkie]

I use a custom-made dashboard with Mushroom cards mostly.

[@MrDenisJoshua]

@@SmartHomeJunkie Do you have a video please ? it's the Minimalist maybe ? I ask cause I wanto to start play with the dashboard and I still don't know witch to choose. I started with Dwain Dashboard, but I need something more, and I dont like ta fact that I must have the home page with all that area 😞 Thanks a lot again.

[@SmartHomeJunkie]

@@MrDenisJoshua No, it's not minimalist. It's Mushroom.

[@MrDenisJoshua]

@@SmartHomeJunkie Ok... but the question now is... can I combine the Minimalist Dashboard with Mushroom ? Thanks again

[@SmartHomeJunkie]

@@MrDenisJoshua I never used minimalist, but as far as I know, with mushroom you can get diet of the dance results as with minimalist, but much easier.

[@brianredmond7891]

Great video! Is it possible to animate other icons similarly, or only mushroom card icons? I'm using a paper-buttons-row card for displaying my sprinklers and I would like to animate the sprinklers as you did.

[@MBI_BOY]

I couldn't get the bounce animation to work with card-mod. Having the updated yaml available would help me.

[@SmartHomeJunkie]

I understand your frustration. It can be tricky to get animations to work sometimes. I've added some hints to the description of this video to handle the changes that were made in Home Assistant.

[@IBetraye]

Great guide! I've followed it to create a mushroom template card in which the adguard shield icon flips when i click it, but it does not seem to work. The animation does work for a chip card, but i'd like to show some text below the icon so i went for a template card. Any idea what i'm doing wrong? Thanks in advance! type: custom:mushroom-template-card entity: switch.adguard_home_protection layout: vertical primary: |- {% if is_state('switch.adguard_home_protection', 'on') %} Filtering {% else %} Off {% endif %} icon: |- {% if is_state('switch.adguard_home_protection', 'on') %} mdi:shield-check {% else %} mdi:shield-alert {% endif %} icon_color: |- {% if is_state('switch.adguard_home_protection', 'on') %} green {% else %} grey {% endif %} tap_action: action: toggle card_mod: style: mushroom-shape-icon$: | ha-state-icon { {{ 'animation: rotateYp .25s linear;' if is_state('switch.adguard_home_protection', 'on') }} } @keyframes rotateYp { 0% { transform: rotateY( 60deg); } 20% { transform: rotateY( 120deg); } 40% { transform: rotateY( 180deg); } 60% { transform: rotateY( 240deg); } 80% { transform: rotateY( 300deg); } 100% { transform: rotateY( 360deg); } } ha-state-icon { {{ 'animation: rotateYn .25s linear;' if is_state('switch.adguard_home_protection', 'off') }} } @keyframes rotateYn { 100% { transform: rotateY( 360deg); } 80% { transform: rotateY( 300deg); } 60% { transform: rotateY( 240deg); } 40% { transform: rotateY( 180deg); } 20% { transform: rotateY( 120deg); } 0% { transform: rotateY( 60deg); } }

[@IBetraye]

Just figured it out by using the ha-state-icon selector > ha-icon. You might want to adjust that in your guide as well?

[@SmartHomeJunkie]

I already did that in the description of the video. Also the code that can be downloaded is changed as well so that it works with the latest version of the Mushroom cards.

[@amyg7851]

Hi Ed, Loving this - thanks so much for the detailed tutorial. I know you're also a Dwains Dashboard user - just wondering if you'd managed to get animated icons working on DD? I've got a whole heap of custom animations working on my test dashboard (standard lovelace), but as soon as I try to transfer to Dwains Dashboard none of it works :(

[@JonteRiele]

Hi, Great video! I was checking your Washing Machine animation and the way you position the second icon on top of the first. I got it working like you have and it looks good on my browser on my laptop. In the companion app (iPhone) it isn't. The second icon, the animating circle, seems to be positioned too high. Do you have the that as well? Any suggestions to fix this for both?

[@SmartHomeJunkie]

That shouldn't be the case. Is have to double check in the companion app, but it should behave the same way. I'll get back to you as soon as I've seen this behavior at my end.

[@JonteRiele]

Did you have time already to check this?

[@andjohansen83]

Did you find a solution for this? I have the same issue on companion app with android though@@JonteRiele

[@andjohansen83]

I found that setting top: -95px did the trick on companion app. However this screws up the layout on normal browser. So not really sure why is behaves different on browser and app.

[@capbrantz4935]

Nice video, but looks difficult this time

[@SmartHomeJunkie]

Yes, it looks difficult, but if you give it time, I hope you will see that it's not so bad.

[@BruhMan_5]

Even though it's not worth it since they're so small, is it possible to animate the icon badges also

[@SmartHomeJunkie]

Yes, I think it is if you address the right css selector.

[@westcoastpyro9769]

This is fantastic and I'm going to add this heavily into my new dashboard. However I really want to be able to animate the badges in the mushroom template cards... Say add a spinning fan badge for my furnace. The main icon is the dancing flame, but i want the badge to show a fan spinning when the system's fan is on. Been trying to isolate it in developer tools. Found the div.icon and the slot marked "badge" but my css is really not very good so I'm struggling to transfer that information to the yaml to make it work.

[@DonClassifieds]

hi just donated to this on your shop link. code does not work says Custom element doesn't exist please advise🙁

[@SmartHomeJunkie]

You probably didn’t install a custom component. Did you install the Mushroom cards?

[@DonClassifieds]

I still can get it to work installed all mushroom cards show but no animation please advise@@SmartHomeJunkie

[@DonClassifieds]

got it working had to update v1.2 @@SmartHomeJunkie

[@DonClassifieds]

hi now ive got the animated icons working how do I add my devices to the icons?@@SmartHomeJunkie

[@mrfixitpa]

With the purchase of this code, does it include the boolean code also needed on some of these?

[@SmartHomeJunkie]

The code is the save as what I show in the video. It's just for your convenience and to say thank you for your sponsoring donation.

[@DIPDIPOTATOCHIP]

if you only want to have it animate when its on/open, or whatever you can do this card_mod: style: | @keyframes boing { 0% { transform: scale3d(1, 1, 1); } 7% { transform: scale3d(1.25, 0.75, 1); } 10% { transform: scale3d(0.75, 1.25, 1); } 12% { transform: scale3d(1.25, 0.85, 1); } 16% { transform: scale3d(0.95, 1.05, 1); } 19% { transform: scale3d(1.05, 0.95, 1); } 25% { transform: scale3d(1, 1, 1); } } ha-icon { animation: {%- set sensor = states('binary_sensor.front_door_sensor') %} {%- if sensor == 'on' %}boing 3s linear infinite; transform-origin: 50% 90%; {%- endif %} } bascially I change the icon color and all the other text and icon info in the usual place, but just added this to the bottom of the card, and it animates the boing only when the door is open.

[@DIPDIPOTATOCHIP]

As this is in a nice compact locationm you could add other keyframes and add a elseif 😊

[@eilifiversen6200]

Really nice video, have played around with animations a bit now, and want to spin a badge icon in a mushroom template card, but i cant find a way to apply the animation to that part. In my head replacing this: card_mod: style: mushroom-shape-icon$: | ha-icon { {{ '--icon-animation: spin 1s linear infinite;' if is_state('binary_sensor.some_sensor', 'on') }} } with : card_mod: style: mushroom-badge-icon$: | ha-icon { {{ '--icon-animation: spin 1s linear infinite;' if is_state('binary_sensor.some_sensor', 'on') }} } should work, but it dosent, anybody know if it is possible to animate the badge icon?

[@SmartHomeJunkie]

Oh that's an interesting idea! If I find the time I will look into it myself too.

[@westcoastpyro9769]

I would also love to know how to do this. I haven't gotten the badge going yet - just the larger icon.

[@sonicloud3149]

I have some family and friends I’d like to add to HASS as people. I’d like to make them have access to my HASS system but only want them to see a particular dashboard. I don’t want them to see anything other than allow them to open my gate and front door. I have all this for myself, but of course I have total access. I don’t want my family and friends to see anything but what I want them to see and use. Is there a way to have multi-user, but with restricted permissions?

[@SmartHomeJunkie]

Yes, there are multiple ways. Good idea for a future video!

[@JasperJanssen]

Okay, this is super clever and cool - but I will not be doing it, at least not for now.

[@jlpouffier]

Where is the link to Rhys post that inspired you? (01:05)

[@SmartHomeJunkie]

In the description.

[@RobvanKoningsbruggen]

This is gone keep me soo busy 😂

[@SmartHomeJunkie]

Yep, I'm afraid so... ;)

[@user-mfsc-2024]

for testing and simplicity i just add two template chips and simple css code to change the icon color. But it didnt work. type: custom:mushroom-chips-card chips: - type: template double_tap_action: action: none entity: switch.ac_conditioner hold_action: action: none icon: mdi:fan content: Adrian tap_action: action: toggle icon_color: '' - type: template double_tap_action: action: none entity: switch.ac_conditioner icon: mdi:fan tap_action: action: none hold_action: action: none card_mod: style: mushroom-template-chip:nth-child(2)$: | ha-icon { color: green; } ` the 2nd icon wont change to green

[@SmartHomeJunkie]

You don't need card-mod to change the icon color. You can just enter the icon color in the card itself.

[@juffle]

As Mushroom version 3.0.0+ this how-to is not working anymore. You need to change the ha-icon to ha-state-icon and change the DOM

[@SmartHomeJunkie]

Yes, As I already stated in the description of this video.

[@certefied1]

Keep getting "No card type found" Mushroom is installed.

[@SmartHomeJunkie]

You made a mistake in the card YAML

[@rockypollifrone768]

my code keeps getting removed, after I save it in home assistant sample below type: custom:mushroom-chips-card chips: - type: entity entity: alarm_control_panel.cam_5 alignment: center card_mod: style: mushroom_template - chip:nth-child(1)$: | ha-icon { {{ 'animation: bounce is linear infinite;' if is_state('alarm_control_panel.cam_5', ,'triggered') }} } @keyframes bounce { 0%, 10%, 50%, 80%, 100% {transform: teanslateY(0); } 40% { transform: teanslateY(-1.2px) routate(5deg); } 46% { transform: teanslateY(-1.1px) routate(-4deg); } }