Hi Jeroen,
Your question has nothing to do with mushroom cards. This topic can only really help you with that.
What you seem to be applying is not yaml or css.
A yaml template controlling whether the border should be shown or not would be something like this:
type: custom:mushroom-template-card
icon: mdi:test-tube
card_mod:
style: |
ha-card {
{% if states('binary_sensor.hallway_motion_sensor_occupancy') == 'on' %}
border: red outset 2px !important;
{% endif %}
}
You can only mix yaml templates with the CSS in card mod. Nothing else. Any state output of the yaml template is rendered as is in the CSS btw.
Thx @dimitri.landerloos
point 1, youre right! i have a lot of mushroom card, and this is I think the only not mushroom card, found youre ācard modā guide
but , it is working now wiht youre code! So thank you verry much.
I have the same problem, I think chips donāt support animation icons.
Not true. But there does seem to be an issue with the built in animations:
Found your problem. But please for the future dont cross-post. I would have got back to you in the other thread in due course.
The built in animations seem to not work for chips on chrome and mobile app (works on firefox not tested elsewhere).
Add some keyframes and it will work.
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: input_boolean.bedroom_all_lights_dropdown
state: 'off'
chip:
type: template
ā¦
I see you pointed out to at some keyframes, I tried the dishwasher etc, they have already keyframes.
On an entity card they work, when I take a chips card it wonāt work.
Show me what you have tried. I have multiple chip animations.
Examples:
On a entity card its working code:
type: custom:mushroom-template-card
icon: mdi:dishwasher
icon_color: '{{ ''blue'' if is_state(''binary_sensor.vaatwasser_status'', ''on'') }}'
primary: ''
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;' if is_state('binary_sensor.vaatwasser_status', 'on') }}
transform-origin: 50% 75%;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
on a chip card not, code
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:dishwasher
icon_color: |-
{% if is_state('binary_sensor.vaatwasser_status', 'on') %}
blue
{%endif%}
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;' if is_state('binary_sensor.vaatwasser_status', 'on') }}
transform-origin: 50% 75%;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
Not how you apply almost anything to the chips. You can only do things to the background of the chip by targeting the chip directly like this.
You are using an old animation. I have updated those animations from Rhysb. Its in the first post in the topic.
Do it like this instead.
Code
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:dishwasher
icon_color: |-
{% if is_state('binary_sensor.vaatwasser_status', 'on') %}
blue
{%endif%}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{{ 'animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;' if is_state('binary_sensor.vaatwasser_status', 'on') }}
transform-origin: 50% 75%;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
I dont mean this in any rude way or with any slight, but it does not feel like you have actually read any of these posts? There is a specific chip section even with animation examples for both the background and icon of the chipsā¦
Also just to add that there is no way that your first card animation works either unless you are using a version of mushroom from at least 6 months ago.
For your template card it would be like this:
Code
type: custom:mushroom-template-card
icon: mdi:dishwasher
icon_color: '{{ ''blue'' if is_state(''binary_sensor.vaatwasser_status'', ''on'') }}'
primary: ''
card_mod:
style: |
ha-state-icon {
{{ 'animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;' if is_state('binary_sensor.vaatwasser_status', 'on') }}
transform-origin: 50% 75%;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
2 Likes
thx for youre reply,
the code for the chip is not working for me, i get the coler etc. but not the animation.
And the new code that you showd me for the entity cardā¦ strangeā¦ but not working, while my ā oldā code of the animation is working
What version of mushroom - card mod - etc are you using?
card mod: 3.2.2
both have updateās, i will make a back-up, update both, and try again.
That will be why. Both outdated. Get ready for all your existing mushroom animations breaking and needing an update.
Dont forget to manually clear your cache from browser/app after any card mod update.
oke, i have update card mod + mushroom, youre code for the chips is working now! thx.
i will search for the post about the new animation codes
1 Like
It worked out! ( for the most part) only the dryer animation wonāt work
For the moment I have the dishwasher animation on the dryerā¦. Fine by me
Thank you for the patience and the guiding,
1 Like
If you want to show the dryer i can help
Maybe tomorrow, the pc is off for today
I will take a look tomorrow.
edit:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:tumble-dryer
icon_color: |-
{% if is_state('binary_sensor.droger_status', 'on') %}
teal
{%endif%}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{{ 'animation: shake 400ms ease-in-out infinite, drum 1s infinite;' if is_state('binary_sensor.droger_status', 'on') }}
transform-origin: 50% 65%;
}
@keyframes shake {
0%, 100% { transform: rotate(4deg); }
50% { transform: rotate(-4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
1 Like
Can anyone help me with scrolling text on a mushroom template card. I have got the whole text scrolling but ideally i only want the secondary information to scroll. Also when i add the cards next to each other the text gets shorterned with ā¦ Is there a way to expand this to scroll all the text?
card_mod:
style: |
mushroom-state-info {
{{ 'animation: my-animation 15s linear infinite;' if is_state('media_player.front_room_tv_2', 'on') }}
transform-origin: 0% 100%;
}
@keyframes my-animation {
0%, 100% { transform: translateX(30%); }
50% { transform: translateX(0%); }
}
Example card at bottom + when in horizontal stack above
Use overflow visible to show the text without the ā¦
Secondary only scrolling
card_mod:
style:
mushroom-state-info$: |
.secondary {
{{ 'animation: my-animation 15s linear infinite;' if is_state('media_player.bedroom_speaker', 'off') }}
transform-origin: 0% 100%;
overflow: visible;
}
@keyframes my-animation {
0%, 100% { transform: translateX(30%); }
50% { transform: translateX(0%); }
}
Thanks that has made the second line only scroll, but i still have the partial textā¦ any other ideas?
Is there also a way to only run if required, ie it detects the text doesnt fit?
the rest I changed like you said.
.
.