Thanks. This fixed it. Although if you are using a dark theme background you can’t see the animation. Needs a white or light theme.
1 Like
I amattempting to animate an icon for a conditional chip card and the method referenced for chip cards in Part 5 of your animation series doesn’t seem to work. Is there something different that needs to be done if the chip in question is a conditional type? I have tried referencing it as mushroom-conditional-chip:nth-child(4)$ and as mushroom-entity-chip:nth-child(4)$. I have also tried changing --icon-animation: shake 400ms ease-in-out infinite; to just animation: shake 400ms ease-in-out infinite; as I noticed was done with some of your examples. Here’s my card code in full:
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: sensor.lights_active
state_not: <font color='#6a7377'>Everything is off!</font>
chip:
type: template
entity: sensor.lights_active
icon: mdi:lightbulb
icon_color: yellow
content: '{{ states(''sensor.lights_active'')}}'
tap_action:
action: more-info
- type: conditional
conditions:
- entity: sensor.open_windows
state_not: No windows are open.
chip:
type: template
icon: mdi:window-open
entity: sensor.open_windows
content: '{{ states(''sensor.open_windows'')}}'
tap_action:
action: navigate
navigation_path: /phone-devices
- type: conditional
conditions:
- entity: sensor.open_doors
state_not: No doors are open.
chip:
type: template
entity: sensor.open_doors
icon: mdi:door-open
content: '{{ states(''sensor.open_doors'')}}'
tap_action:
action: navigate
navigation_path: /phone-devices
- type: conditional
conditions:
- entity: binary_sensor.washer_on
state: 'on'
chip:
type: entity
entity: binary_sensor.washer_on
content_info: none
icon: mdi:washing-machine
icon_color: green
styles:
color: green
alignment: center
view_layout:
grid-area: messages
card_mod:
style:
mushroom-conditional-chip:nth-child(4)$: |
ha-icon {
--icon-animation: shake 400ms ease-in-out infinite;
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); }
}
Thank you for any help you can provide.
HI please code for thermostat card zhx
It’s easy to miss 
Dig the Rackstuds BTW. Started using them when CDL first got them in.
1 Like
Just remove icon_color: white from the last Chip.
1 Like
With Conditional Chips you need to specify the mushroom-conditional-chip:nth-child() then the Chip and Shadow Root. Like this:
card_mod:
style:
mushroom-conditional-chip:nth-child(4):
mushroom-template-chip$: |
ha-icon {
If you need to correct the Chip height, you can do so like this:
.: |
mushroom-conditional-chip {
height: calc(var(--chip-height));
}
Just use animation not --icon-animation for Chips.
2 Likes
Thank you for your quick reply!! I have made the changes you suggested and it still isn’t animating. Here’s what I have now:
- type: conditional
conditions:
- entity: binary_sensor.washer_on
state: 'on'
chip:
type: entity
entity: binary_sensor.washer_on
content_info: none
icon: mdi:washing-machine
icon_color: green
alignment: center
view_layout:
grid-area: messages
card_mod:
style:
mushroom-conditional-chip:nth-child(4)$:
mushroon-entity-chip$: |
ha-icon {
animation: shake 400ms ease-in-out infinite;
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); }
}
Thank you
edit: I also tried verbatim to your example with mushroom-template-chip$:
Should be just nth-child(4): not nth-child(4)$:
1 Like
Thank you once again. I should have looked closer.
1 Like
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-person-card
entity: person.firstname_lastname
icon_type: entity-picture
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.sm_g998b_battery_level
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: var(--ha-card-background);
}
Only issue I can see there is card_mod needs to be two tabs over:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-person-card
entity: person.firstname_lastname
icon_type: entity-picture
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.sm_g998b_battery_level
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: var(--ha-card-background);
}
I’m trying to mode the animated fan card, & could do with a little help 
I changed the colour of the icon from green to orange (I’m using it with a fan heater), and want to show last used or changed as secondary info.
- type: custom:mushroom-fan-card
entity: switch.fan_heater
icon_animation: true
layout: vertical
fill_container: true
secondary_info: >
{% if relative_time(states.switch.fan_heater.last_updated) == '0 seconds' %}
Now
{% else %}
{{ relative_time(states.switch.fan_heater.last_updated) }} ago
{% endif %}
style: |
mushroom-shape-icon{
--icon-color: orange !important;
--shape-color: rgba(242, 169, 59, 0.25) !important;
}
This doesn’t show anything for secondary info.
Is there a way to make this work with the mushroom fan card? If not, is there a way to use the mushroom template card (which will show the secondary info), and animate the icon?
I just had a thought - im using the ios (red/blue) theme.
When I change to the backend default theme it looks fine but on the ios one the chip card is transparent.
That suggests the theme might be the issue. Not sure how to fix though.
Templating is only supported on the Template Card.
1 Like
I don’t think an example of this has been provided, apologies if I missed it!
Has anyone been able to get a conditional chip to display if there are any updates available in the update domain, along with displaying how many. I would rather do it across the full domain rather than naming individual updates. Thx.
Aah, thanks for clarifying that.
I’ve recreated it with a template card, and feel as though I’m almost there.
The animation works and the colour has changed to orange, but when I turn off the fan heater the animation continues & the colour stays orange, instead of changing to grey.
- type: custom:mushroom-template-card
entity: switch.fan_heater
primary: Fan Heater
secondary: >
{% if relative_time(states.switch.fan_heater.last_updated) == '0 seconds' %}
Now
{% else %}
{{ relative_time(states.switch.fan_heater.last_updated) }} ago
{% endif %}
icon: mdi:fan
layout: vertical
fill_container: true
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: spin 1s linear infinite;
}
style: |
mushroom-shape-icon{
--icon-color: orange !important;
--shape-color: rgba(242, 169, 59, 0.25) !important;
}
I’ve tried a few variations of the code to animate & change the colour but my knowledge with this is pretty limited 
Any idea on how to stop the animation when the heater is turned off, and also change the colour to grey when turned off?
amazing !!!
can you share your code ?
Hello Eoin, I think I have what you are asking for, but I ended up making separate sensors that show the update/problem/backup state.
Let me know what you think and sorry for spelling mistakes.
mushroom:
- type: conditional
conditions:
- entity: sensor.update_availible
state_not: '0'
chip:
type: entity
entity: sensor.update_availible
double_tap_action:
action: none
content_info: state
icon_color: orange
tap_action:
action: navigate
navigation_path: /lovelace-XXX/default_view
hold_action:
action: none
- type: conditional
conditions:
- entity: sensor.battery_low_warning
state_not: '0'
chip:
type: entity
entity: sensor.battery_low_warning
double_tap_action:
action: none
tap_action:
action: navigate
navigation_path: /lovelace-XXX/default_view
hold_action:
action: none
icon_color: orange
content_info: state
- type: conditional
conditions:
- entity: sensor.problems_warning
state_not: '0'
chip:
type: entity
entity: sensor.problems_warning
double_tap_action:
action: none
content_info: state
tap_action:
action: navigate
navigation_path: /lovelace-XXX/default_view
hold_action:
action: none
icon_color: deep-orange
- type: conditional
conditions:
- entity: sensor.hacs
state_not: '0'
chip:
type: entity
entity: sensor.hacs
double_tap_action:
action: none
content_info: state
icon_color: orange
tap_action:
action: navigate
navigation_path: ..\hacs
hold_action:
action: none
- type: conditional
conditions:
- entity: sensor.backup_state
state_not: backed_up
chip:
type: entity
entity: sensor.backup_state
content_info: state
icon_color: deep-orange
in the config:
template:
- sensor:
- name: update_availible
state: "{{ states.update|selectattr('state','eq','on')|map(attribute='entity_id')|list|count }}"
icon: mdi:update
attributes:
entities: "{{ states.update|selectattr('state','eq','on')|map(attribute='entity_id')|list }}"
- name: battery_low_warning
state: >
{% set lista = states.sensor |rejectattr('attributes.device_class', 'undefined') | selectattr('attributes.device_class', 'eq', 'battery') | list %}
{% set ns = namespace(below=[]) %}
{%- for ent in lista -%}
{%- if 20 >= ent.state | int(200) | int and not ent.entity_id in ['sensor.d219a923004b1200_battery','sensor.db90e424004b1200_battery',] -%}
{% set ns.below = ns.below + [ ent.entity_id ] %}
{% endif -%}
{% endfor -%}
{{ ns.below |count}}
icon: mdi:battery-alert
attributes:
entities: >
{% set lista = states.sensor |rejectattr('attributes.device_class', 'undefined') | selectattr('attributes.device_class', 'eq', 'battery') | list %}
{% set ns = namespace(below=[]) %}
{%- for ent in lista -%}
{%- if 20 >= ent.state | int(200) | int and not ent.entity_id in ['sensor.d219a923004b1200_battery','sensor.db90e424004b1200_battery',] -%}
{% set ns.below = ns.below + [ ent.entity_id ] %}
{% endif -%}
{% endfor -%}
{{ ns.below | join(', ') }}
- name: problems_warning
state: "{{ states.binary_sensor |rejectattr('attributes.device_class', 'undefined') | selectattr('attributes.device_class', 'eq', 'problem')| selectattr('state', 'eq', 'on')| map(attribute='entity_id') | list |count }}"
icon: mdi:thermometer-alert
attributes:
entities: "{{ states.binary_sensor |rejectattr('attributes.device_class', 'undefined') | selectattr('attributes.device_class', 'eq', 'problem')| selectattr('state', 'eq', 'on')| map(attribute='entity_id') | list }}"
1 Like
That looks like exactly what I was after, thank you!
Thanks! You are the great! 