I’m finalising the floorplan integration for my home setup. All is working well, except that I notice strong slowdowns with animations enabled. These do not work at all in Safari and my fans end up spinning out of control all over the screen. Works OK with Firefox, but I get a lot of slowdowns, even on powerful laptops, to the point that I am considering disabling them altogether. It reminds me of the endless spinning icon one gets when overloading the history_graph component…
Does anyone use 3+ animations on floorplans with success? Any tip to share?
For reference, here is my code:
Yaml:
- name: Climate fans
entities:
- switch.fan_living_1
- switch.fan_living_2
- switch.fan_living_3
# - switch.fan_kitchen
# - switch.fan_luke
# - switch.fan_liv
# - switch.fan_noa
# - switch.fan_ced
states:
- state: 'on'
class: 'fan-on'
- state: 'off'
class: 'fan-off'
CSS:
#switch\.fan_living_1, #switch\.fan_living_2, #switch\.fan_living_3, #sensor\.ac_living_1_power, #sensor\.ac_living_2_power, #sensor\.booster_pump_power, #sensor\.pool_pump_power, #sensor\.well_pump_power, #sensor\.washing_machine_power {
transform-origin: center;
}
.fan-on {
fill: #ff8a65 !important;
stroke: #000000 !important;
stroke-width: 0.5px !important;
stroke-opacity: 1 !important;
-webkit-animation: rotation 2s infinite linear;
}
.fan-off {
fill: #000000 !important;
fill-opacity: 0.3 !important;
}
As always, any help is much appreciated and I also hope some users find some help to achieve their objective with this post…