Create Stunning ANIMATED MUSHROOM CARDS On Your Dashboard NOW!

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!

NOTE: Since version 3.0.0 of Mushroom cards, the CSS has changed. You need to replace ha-icon with ha-state-icon. You also need to change the structure of the code because the structure of the DOM has changed.

For instance:
card_mod:
style: |
ha-state-icon {
{{ '--icon-animation: spin 1s linear infinite;' if is_state('input_boolean.airconditioning_power', 'on') }}
}

And another change since version v3.0.5:

CHANGE --icon-animation: TO animation:

⭐ You can download the UPDATED code that I created for this video at: https://ko-fi.com/s/1f154c6358 ⭐

Links referred to in this video:
Install HACS:    • Install HACS in Home Assistant - 2024...  
How To Cycle Through Scenes Like Hue Using a Button in Home Assistant:    • How to Cycle through Scenes like Hue ...  
Create your own Garden Watering System:    • How to Create YOUR OWN  Garden Wateri...  
You've Got Mail in Home Assistant:    • You've Got Mail in Home Assistant. Tu...  
How To Monitor Your Washing Machine:    • How To Monitor Your Washing Machine i...  
Material Design Icons site: https://materialdesignicons.com/
CSS Clip Path Generator: https://www.cssportal.com/css-clip-pa...
More examples of animated mushroom cards: https://community.home-assistant.io/t...

Blog version: https://www.smarthomejunkie.net/creat...

⭐⭐⭐
Join this channel to get access to perks: 📺    / smarthomejunkie  
Please consider becoming my patron 🏅 at   / smarthomejunkie  
Or please support me by buying me a ☕ at https://ko-fi.com/smarthomejunkie/
⭐⭐⭐

My Devices: https://github.com/smarthomejunkie/My...

Instagram:   / smarthomejunkie  
Twitter:   / smarth0mejunkie  
Facebook:   / smarthomejunkie  
TikTok:   / smarthomejunkie  
Discord:   / discord  

Music by:
2TECH-AUDIO: https://2tech-audio.bandcamp.com/

00:00:00 Introduction
00:01:34 Install Card-Mod
00:02:43 Explain the animated chips
00:03:04 Edit the chips card
00:07:11 Download the MDI icon for polygon use
00:07:47 Apply the clip path to our animation
00:09:25 Create the animated airconditiong card
00:10:05 Create the animated scenes cards
00:11:09 Edit the animated Light Mushroom cards
00:12:03 Create the Animated Sprinkler Card and the Animated Washing Machine Card
00:12:55 Create the Washing Machine Animated Card

#homeassistant #animation #animated #animateddashboard #dashboard #mushroom #tutorial #smarthome #homeautomation