Custom Button Card Animation

[davel4wa]

Here is a problem that I cannot get my head around. Using Custom Button card I tried to add icon animation and have a peculiar problem. After I got the animation working based on a JS template when the device is in the ‘on’ state, I thought, mission accomplished. However, after closing the card editor, I noticed the animation was not working. After many attempts to devine the problem, it seems the animation, doesn’t initially work when the editor is open, even with the device state ‘on.’ Making any kind of edit, causes the animation to begin. This only works initially. Cycling the device off and on again causes the animation to stop again. Using the same template to create a label always shows the correct result. It’s weird.

show_name: true
show_icon: true
type: custom:button-card
tap_action:
  action: toggle
entity: switch.mbth_heater_switch
name: Bathroom Heater
icon: mdi:heat-wave
styles:
  icon:
    - width: 50px
    - animation: |
        [[[
          if (entity.state === 'on') return 'blink 2s ease infinite;'; 
          return 'none';
        ]]]
  card:
    - width: 400px
    - height: 100px
    - background-color: LightGoldenRodYellow
  name:
    - font-size: 15px
  label:
    - font-size: 15px
state:
  - value: "off"
show_label: true
label: |
  [[[
      var ontime = states['sensor.mbth_heater_ontine_hm'].state;
      return 'OnTime: ' + (ontime) ;
    ]]]
    

[dcapslock (Darryn Capes-Davis)]

@davel4wa

    - animation: |
        [[[
          if (entity.state === 'on') return 'blink 2s ease infinite;'; 

Remove the ‘;’ from the style string. This will be causing the issue as here you just need to return the style.

[davel4wa]

No go with removing the semicolon.
This is what I am seeing now. If I open the card in the editor, tap to turn on the device, the animation does not work. Leaving the device on and editing anything, while the editor is still open, the animation starts.
I have modified the label entry to have the same template as the animation entry and the label correctly shows the result of the template, i.e when the device is on the label shows the correct argument for the animation, when it is off it shows ‘none.’