#trying to figure out why my conditional animation dont work

1 messages · Page 1 of 1 (latest)

fringe robin Feb 2, 2025, 10:22 AM

'' - type: conditional
conditions:
- entity: fan.sonoff_1000a82389
state: "on"
chip:
type: entity
entity: fan.sonoff_1000a82389
icon_color: green
card_mod: null
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
animation: rotation linear infinite;
{% if states('fan.sonoff_1000a82389') == 'on' %}
animation-duration: 1s;
{%- else -%}
{%- endif %}
}
tap_action:
action: call-service
service: fan.turn_off
service_data: {}
target:
entity_id: fan.exhaust_fan
content_info: none
icon: mdi:fan
alignment: end it is very long time since i posted here but anyway the animation rotate don´t work

cosmic gulch Feb 2, 2025, 12:15 PM

I haven't tested out your code myself but I see an indentation error here: yaml icon_color: green card_mod: null style: |@keyframes rotation { card_mod should not be null and the lines beneath it down to one above the tap_action should be tabbed once.

cosmic gulch Feb 3, 2025, 9:50 AM

I completely forgot that Mushroom chips are a bit complicated when it comes applying card_mod. Follow this link to find pretty much everything you need for card-mod and Mushroom chips. Mushroom Cards Card Mod Styling/Config Guide - Chips

But... to save you some time, I did most of the work for you (which took me a bit to get everything figured out.)

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: fan.ceiling_fan
    icon: mdi:fan
    content_info: none
  - type: conditional
    conditions:
      - condition: state
        entity: fan.ceiling_fan
        state: "on"
    chip:
      type: entity
      entity: fan.ceiling_fan
      content_info: none
      icon_color: green
card_mod:
  style:
    mushroom-entity-chip:nth-child(1)$: |
      ha-state-icon {
        {% if is_state('fan.ceiling_fan', 'on') %}
          animation: rotation 2s linear infinite;
        {% endif %}
        --color: green;
        --icon-color: red
      }
      @keyframes rotation {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    mushroom-conditional-chip:nth-child(2):
      mushroom-entity-chip$: |
        ha-state-icon {
          {% if is_state('fan.ceiling_fan', 'on') %}
            animation: rotation 2s linear infinite;
          {% endif %}
        }
        @keyframes rotation {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }

Here, there are two chips for the fan. A regular entity chip and an entity chip contained in a conditional chip. (I'll come back to this in a moment.) Notice that the card_mod gets applied at the mushroom-chip-card level and not at the individual chip. nth-child(1)$ refers to the position of the chip within the mushroom-chip-card. The entity chip is in the first position and the conditional card is in the second position. Remember that if you add chips later as you may need to update the positions.