Kind of similar request I have. Did you ever find a solution?
These are just AWESOME! This will take the dash to another level, thanks @rhysb !
Now I am curious about, for example, the Washing Machine #2 Animation.
How to create: an icon without animation, but if the washing machine is runningā¦the animated icon?
And when it has stoppedā¦the icon without animation again.
Any thoughts?
Thanks and have a great weekend ahead!
2 Likes
if you use card mod you can use the following code:
type: custom:mushroom-chips-card
chips:
- type: ā¦
card_mod:
style: |
:host { display:
{% set x = ['unavailable', 'unknown', 'none'] %}
{% set e = states('sensor.mobile_battery_level') %}
{% set b = (e|float(100) <= 35) %}
{{ 'inline' if b or e in x else 'none' }}; }
My thought would be something like this:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: sensor.washing_machine
icon: mdi:washing-machine
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
primary: 'Washing Machine #2'
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: shake 400ms ease-in-out infinite;' if is_state(config.entity, 'on') }}
transform-origin: 50% 58%;
clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
- type: custom:mushroom-template-card
entity: sensor.washing_machine
icon: mdi:washing-machine
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: spin 1s linear infinite;' if is_state(config.entity, 'on') }}
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
card_mod:
style: |
ha-card {
height: 66px;
}
1 Like
Needs help please.
I would like to change the code, if the off fan, then the icon will not turn around. If he is on then he will turn around.
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Fan Bathroom
icon: cil:pedestal-fan
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
entity: light.fan_bathroom
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: rotation 1s linear infinite;
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
Just wrap the --icon-animation in an if, like this:
{{ '--icon-animation: rotation 1s linear infinite;' if is_state(config.entity, 'on') }}
2 Likes
Thank you very much
1 Like
Is it ok to do it this way? or iām wrong
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:sprinkler
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
entity: switch.johnson
primary: johnson
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: rotation 1s linear infinite;' if is_state(config.entity, 'on') }}
transform-origin: 29% 88%;
}
@keyframes sprinkle {
0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
6%, 21%, 36%, 51% { transform: rotate(2deg); }
}
Now itās all right 
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:sprinkler
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
entity: switch.johnson
primary: johnson
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: sprinkle 2s linear infinite;' if is_state(config.entity, 'on') }}
transform-origin: 29% 88%;
}
@keyframes sprinkle {
0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
6%, 21%, 36%, 51% { transform: rotate(2deg); }
}
1 Like
Cant get your Partly Cloudy animation to work on a chips card.
What i am doing wrong? 
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:weather-partly-cloudy
icon_color: light-green
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-icon {
--icon-animation: cloudy 10s ease-in-out infinite, sun 2s infinite;
}
@keyframes cloudy {
0%, 100% { transform: translateX(3px); }
30% { transform: translateX(-1px); }
45% { transform: translateX(1.5px); }
75% { transform: translateX(-3.2px); }
}
@keyframes sun {
50% { clip-path: polygon(0 67%, 18% 55%, 16% 31%, 41% 12%, 67% 24%, 77% 59%, 100% 64%, 100% 100%, 0 100%); }
}
Thank you very much for the investment.
Can you make something related to the door? Door sensor opens and closes.
2 Likes
Nice can you share code ?
Already shared it, just a tiny scroll up
1 Like
Awesome work with these! Thanks alot!
I have a question: How to utilize these animations in the weather card where the icon can be different based on the weather entity state? Some kind of if structure I suppose but not too familiar how to do itā¦
1 Like
Hi, what cards do you use for energy entity?
thank you. Animations work good on browser but not on official app. why?
Hello. Hoping someone can help. Iām trying to add a Mushroom Person Card. In all the videos I watch there are features in the videos that I donāt have.
For example, I donāt have the option to āUse entity pictureā
Also, I donāt have the option for āHide stateā or āHide nameā.
Thanks for any help.
The screenshot from the video if from an older version of Mushroom Cards. Your screenshot is from the new/current version. Use entity picture is now in the dropdown āIcon typeā and hide state/name are located under āPrimary/Secondary Informationā dropdowns.
1 Like
Animations are working OK for me in Android app. What OS are you on?
For Chips you will need to use animation: instead of --icon-animation:.