Garage Door SVG Animation (Not working)

icons.yaml

NOTES:
The switch does not have an on/off state. The states I am mostly concerned about is "Open" and "Closed".
There are also "Opening" and "Closing" but they are unreliable. It is also listed as a 'cover': cover.garage-door

Right now, I believe that it is always displaying the else statement. When simulating the open or
closed state, the card does not display the animation. It just swapps the card colors with the 
'door closed' (else) icon.

--------------------

icon_garage:
  styles:
    custom_fields:
      icon:
        - width: 100%
        - margin-left: -5%
        - margin-top: -15%
        - fill: >
            [[[ return variables.state_on ? '#4b5254' : '#9da0a2'; ]]]
  custom_fields:
    icon: >
      [[[
        let style = `
          <style>
            @keyframes opening {
              0% { opacity: 1; }
              100% { opacity: 0; }              
            }
            .garage-bottom-opening {
              animation: on 0.66s ease;
              animation-fill-mode: forwards;
            }
            .garage-mid-opening {
              animation: on 0.66s ease;
              animation-delay: 0.66s;
              animation-fill-mode: forwards;
            }
            .garage-top-opening {
              animation: on 0.66s ease;
              animation-delay: 1.32s;
              animation-fill-mode: forwards;
            }
            @keyframes closing {
              0% { opacity: 0; }
              100% { opacity: 1; }              
            }
            .garage-bottom-closing {
              animation: on 0.66s ease;
              animation-delay: 1.32s;
              animation-fill-mode: forwards;
            }
            .garage-mid-closing {
              animation: on 0.66s ease;
              animation-delay: 0.66s;
              animation-fill-mode: forwards;
            }
            .garage-top-closing {
              animation: on 0.66s ease;
              animation-fill-mode: forwards;
            }
          </style>
        `;
        if (variables.state_on && variables.timeout < 2000) {
            return `
              <svg viewBox="0 0 24 24">
                ${style}
                <polyline class="garage-house" points="22,9 22,20 20,20 20,11 4,11 4,20 2,20 2,9 12,5 22,9 "/>
                <polyline class="garage-top-opening" points="19,12 5,12 5,14 19,14 19,12 "/>
                <rect class="garage-mid-opening" x="5" y="15" width="14" height="2"/>
                <polyline class="garage-bottom-opening" points="19,18 5,18 5,20 19,20 19,18 "/>
              </svg>
            `;
        }
        if (variables.state_on && variables.timeout > 2000) {
            return `
              <svg viewBox="0 0 24 24">
                <polyline class="garage-house" points="22,9 22,20 20,20 20,11 4,11 4,20 2,20 2,9 12,5 22,9 "/>
              </svg>
            `;
        }
        if (variables.state === 'Closed' && variables.timeout < 2000) {
            return `
              <svg viewBox="0 0 24 24">
                ${style}
                <polyline class="garage-house" points="22,9 22,20 20,20 20,11 4,11 4,20 2,20 2,9 12,5 22,9 "/>
                <polyline class="garage-top-closing" points="19,12 5,12 5,14 19,14 19,12 "/>
                <rect class="garage-mid-closing" x="5" y="15" width="14" height="2"/>
                <polyline class="garage-bottom-closing" points="19,18 5,18 5,20 19,20 19,18 "/>
              </svg>
            `;
        } else {
            return `
              <svg viewBox="0 0 24 24">
                <polyline class="garage-house" points="22,9 22,20 20,20 20,11 4,11 4,20 2,20 2,9 12,5 22,9 "/>
                <polyline class="garage-top" points="19,12 5,12 5,14 19,14 19,12 "/>
                <rect class="garage-mid" x="5" y="15" width="14" height="2"/>
                <polyline class="garage-bottom" points="19,18 5,18 5,20 19,20 19,18 "/>
              </svg>
            `;
        }
      ]]]

Here is what it looks like: https://github.com/LilTrublMakr/Home-Assistant-Icons/tree/master/SVG/LTM-Garage

@johntdyer

Thanks for posting... I see you mentioned adding open to the base template, which makes sense but you didnt mention the other states like closing,opening, closed, ect