[JS+Editor Module] Subbutton Animations

[ddewar]

Subbutton Animations

Version: v1.0
Creator: ddewar
Animations by: MrBearPresident

Important

Unsupported cards:

• Horizontal buttons stack
• Pop-up
• Separator

Add animations to subbuttons and conditions for when they should be active. This module is made for 4 subbuttons, but can be expanded or reduced by changing the number of expandable sections in the editor section.

Configure this module via the editor or in YAML, for example:

subbutton_animations:
  subbutton1:
    animation: bounce
    condition:
      - condition: state
        entity_id: binary_sensor.always_on
        state: "on"
  subbutton2:
    animation: spin
  subbutton3:
    animation: sound
  subbutton4:
    animation: roam

---

🧩 Get this Module

To use this module, simply copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

subbutton_animations:
  name: Subbutton Animations
  version: "v1.0"
  creator: "ddewar"
  link: "https://github.com/ddewar/"
  description: This module adds the ability to customize animations for subbutton icons.

  unsupported:
    - horizontal-buttons-stack
    - separator
    - pop-up
    - empty-column

  editor:
    - type: expandable
      name: subbutton1
      title: "Subbutton 1"
      icon: "mdi:list-box-outline"
      schema:
        - name: animation
          label: "Animation"
          selector:
            select:
              multiple: false
              mode: dropdown
              options:
                - label: Spin
                  value: "spin"
                - label: Sound
                  value: "sound"
                - label: Roam
                  value: "roam"
                - label: Bounce
                  value: "bounce"
        - name: condition
          label: "Annimation is always visible if no condition is defined. Otherwise, it will be shown when ALL below conditions are fulfilled."
          selector:
            condition: {}

    - type: expandable
      name: subbutton2
      title: "Subbutton 2"
      icon: "mdi:list-box-outline"
      schema:
        - name: animation
          label: "Animation"
          selector:
            select:
              multiple: false
              mode: dropdown
              options:
                - label: Spin
                  value: "spin"
                - label: Sound
                  value: "sound"
                - label: Roam
                  value: "roam"
                - label: Bounce
                  value: "bounce"
        - name: condition
          label: "Annimation is always visible if no condition is defined. Otherwise, it will be shown when ALL below conditions are fulfilled."
          selector:
            condition: {}

    - type: expandable
      name: subbutton3
      title: "Subbutton 3"
      icon: "mdi:list-box-outline"
      schema:
        - name: animation
          label: "Animation"
          selector:
            select:
              multiple: false
              mode: dropdown
              options:
                - label: Spin
                  value: "spin"
                - label: Sound
                  value: "sound"
                - label: Roam
                  value: "roam"
                - label: Bounce
                  value: "bounce"
        - name: condition
          label: "Annimation is always visible if no condition is defined. Otherwise, it will be shown when ALL below conditions are fulfilled."
          selector:
            condition: {}

    - type: expandable
      name: subbutton4
      title: "Subbutton 4"
      icon: "mdi:list-box-outline"
      schema:
        - name: animation
          label: "Animation"
          selector:
            select:
              multiple: false
              mode: dropdown
              options:
                - label: Spin
                  value: "spin"
                - label: Sound
                  value: "sound"
                - label: Roam
                  value: "roam"
                - label: Bounce
                  value: "bounce"
        - name: condition
          label: "Annimation is always visible if no condition is defined. Otherwise, it will be shown when ALL below conditions are fulfilled."
          selector:
            condition: {}
  code: |
    .spin {
      animation: slow-rotate 2s linear infinite;
    }

    .sound {
      animation: sound 0.8s linear infinite;
    }


    .roam {
      animation: roam 10s linear infinite;
    }

    .bounce {
      animation: bounce 2s infinite 2s;
    }


    @keyframes slow-rotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @keyframes sound {
      0% { transform: scale(1); }
      50% { transform: scale(1.10); }
      100% { transform: scale(1); }
    }

    @keyframes roam {
      0% { transform: translate(0px, 5px) rotate(0deg); }
      25% { transform: translate(-5px, 0px) rotate(-45deg); }
      50% { transform: translate(0px, -5px) rotate(0deg); }
      75% { transform: translate(5px, 0px) rotate(45deg); }
      100% { transform: translate(0px, 5px) rotate(0deg); }
    }

    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
        opacity: 1;
      }
      40% { transform: translateY(-8px); }
      60% { transform: translateY(-5px); }
    }

    ${(() => {
        const config = this.config.subbutton_animations || {};

        const hasAnimation = (subbuttonConfig) => {
            if(subbuttonConfig?.animation) {
              return true;
            } else {
              return false;
            }
        };

        const addAnimation = (containerSelector, subbuttonConfig) => {
          if(!hasAnimation) {
            return;
          }

          const subbuttonIcon = card.querySelector(containerSelector);
          if(!subbuttonConfig?.condition || (subbuttonConfig?.condition && checkConditionsMet([].concat(subbuttonConfig.condition), hass))) {
            subbuttonIcon.classList.add(subbuttonConfig.animation);
          } else {
            subbuttonIcon.classList.remove(subbuttonConfig.animation);
          }
        };

        Object.values(config).forEach((c, index) => {
          let subbuttonNumber = Number(Object.keys(config)[index].replace("subbutton", ""))
          addAnimation(`.bubble-sub-button-${subbuttonNumber} .bubble-sub-button-icon`, c);
        });
    })()}

---

Screenshot:

[Clooos]

Nice addition! Good work on that, and glad that you found out how to use the condition selector!

[ddewar]

Super nice way to avoid the issue of what is considered an "on" state 😆. Is there any way to make the editor repeat blocks? Right now the subbutton support is limited to how many times I copy and paste the block.

[Clooos]

I still haven't found a way myself, I don't know if this is something doable with the ha-form, but I haven't explored all the options yet.

Edit: But if there is really no option, I will maybe try to add one myself at some point, that would be very useful indeed.

Edit 2: Also please update your post, your unsupported cards are not correct, you can also remove the check list at the end 🙂

[Quokka1979]

You can work with a selector, that’s what I used so you only need one block. I use it in my text module.

[ddewar]

Unfortunately, for this one I need different settings for different subbuttons, so selecting multiple would just leave it with the same condition and animation for all of them.

[Quokka1979]

Your right, that would be a problem

[r4wxmes]

I have an air conditioner with a sensor on it. I want to rotate the icon on the subbutton when it is open. I have set everything correctly, but I get the message checkConditionsMet is not defined. What am I doing wrong?

[ddewar]

Hmmm, that might be a question for @Clooos. I just used it in the code and it worked, I don't think there was any sort of dependency I added.

[Clooos]

You need to update Bubble Card to the latest beta, then it will works.

[amstermk]

Tried to add this module… but somehow I am not successful. Other modules I added appear in the module-section of the cards… this one does not. Latest beta from Bubble-card installed..

[Clooos]

Hi! Check again, there is no reason that this one does not appear, have you copied it in /local/bubble/bubble-modules.yaml?

[amstermk]

Hi! Yes I copied the code into /www/bubble/bubbl-modules.yaml. I did the same with your module „conditional icon badges“ and that one appears. See photo

I do have the needed entry in the configuration.yaml

allow_external_dirs:
-/config/www

Edit: ah, and I saved the bubble-modules.yaml and did a HA restart

[Clooos]

I have no clue, I see a comment above from someone who added it successfully 😅

Edit: It's working for me after a simple page refresh.

[amstermk]

… did a page refresh now as well… though did a restart before … and now the module appears… Strange but well it works now… sorry for the hassle…

[Clooos]

Don't worry! There is no need to restart, a simple page refresh should always do the job when a module is added 🙂

[julien94800]

Hi @ddewar , nice job! Would it be possible to adapt it for main icon too?
Thanks in advance

[ddewar]

I didn't test this fully yet, but give it a try if you have some time:

icon_animations:
  name: Subbutton Animations
  version: "v1.0"
  creator: "ddewar"
  link: "https://github.com/ddewar/"
  description: This module adds the ability to customize animations for subbutton icons.

  unsupported:
    - horizontal-buttons-stack
    - separator
    - pop-up
    - empty-column

  editor:
    - type: expandable
      name: mainIcon
      title: "Main Icon"
      icon: "mdi:list-box-outline"
      schema:
        - name: animation
          label: "Animation"
          selector:
            select:
              multiple: false
              mode: dropdown
              options:
                - label: Spin
                  value: "spin"
                - label: Sound
                  value: "sound"
                - label: Roam
                  value: "roam"
                - label: Bounce
                  value: "bounce"
        - name: condition
          label: "Annimation is always visible if no condition is defined. Otherwise, it will be shown when ALL below conditions are fulfilled."
          selector:
            condition: {}

    - type: expandable
      name: subbutton1
      title: "Subbutton 1"
      icon: "mdi:list-box-outline"
      schema:
        - name: animation
          label: "Animation"
          selector:
            select:
              multiple: false
              mode: dropdown
              options:
                - label: Spin
                  value: "spin"
                - label: Sound
                  value: "sound"
                - label: Roam
                  value: "roam"
                - label: Bounce
                  value: "bounce"
        - name: condition
          label: "Annimation is always visible if no condition is defined. Otherwise, it will be shown when ALL below conditions are fulfilled."
          selector:
            condition: {}

    - type: expandable
      name: subbutton2
      title: "Subbutton 2"
      icon: "mdi:list-box-outline"
      schema:
        - name: animation
          label: "Animation"
          selector:
            select:
              multiple: false
              mode: dropdown
              options:
                - label: Spin
                  value: "spin"
                - label: Sound
                  value: "sound"
                - label: Roam
                  value: "roam"
                - label: Bounce
                  value: "bounce"
        - name: condition
          label: "Annimation is always visible if no condition is defined. Otherwise, it will be shown when ALL below conditions are fulfilled."
          selector:
            condition: {}

    - type: expandable
      name: subbutton3
      title: "Subbutton 3"
      icon: "mdi:list-box-outline"
      schema:
        - name: animation
          label: "Animation"
          selector:
            select:
              multiple: false
              mode: dropdown
              options:
                - label: Spin
                  value: "spin"
                - label: Sound
                  value: "sound"
                - label: Roam
                  value: "roam"
                - label: Bounce
                  value: "bounce"
        - name: condition
          label: "Annimation is always visible if no condition is defined. Otherwise, it will be shown when ALL below conditions are fulfilled."
          selector:
            condition: {}

    - type: expandable
      name: subbutton4
      title: "Subbutton 4"
      icon: "mdi:list-box-outline"
      schema:
        - name: animation
          label: "Animation"
          selector:
            select:
              multiple: false
              mode: dropdown
              options:
                - label: Spin
                  value: "spin"
                - label: Sound
                  value: "sound"
                - label: Roam
                  value: "roam"
                - label: Bounce
                  value: "bounce"
        - name: condition
          label: "Annimation is always visible if no condition is defined. Otherwise, it will be shown when ALL below conditions are fulfilled."
          selector:
            condition: {}
  code: |
    .spin {
      animation: slow-rotate 2s linear infinite;
    }

    .sound {
      animation: sound 0.8s linear infinite;
    }


    .roam {
      animation: roam 10s linear infinite;
    }

    .bounce {
      animation: bounce 2s infinite 2s;
    }


    @keyframes slow-rotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @keyframes sound {
      0% { transform: scale(1); }
      50% { transform: scale(1.10); }
      100% { transform: scale(1); }
    }

    @keyframes roam {
      0% { transform: translate(0px, 5px) rotate(0deg); }
      25% { transform: translate(-5px, 0px) rotate(-45deg); }
      50% { transform: translate(0px, -5px) rotate(0deg); }
      75% { transform: translate(5px, 0px) rotate(45deg); }
      100% { transform: translate(0px, 5px) rotate(0deg); }
    }

    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
        opacity: 1;
      }
      40% { transform: translateY(-8px); }
      60% { transform: translateY(-5px); }
    }

    ${(() => {
        const config = this.config.subbutton_animations || {};

        const hasAnimation = (iconConfig) => {
            if(iconConfig?.animation) {
              return true;
            } else {
              return false;
            }
        };

        const addAnimation = (containerSelector, iconConfig) => {
          if(!hasAnimation(iconConfig)) {
            return;
          }

          const icon = card.querySelector(containerSelector);
          if(!iconConfig?.condition || (iconConfig?.condition && checkConditionsMet([].concat(iconConfig.condition), hass))) {
            icon?.classList.add(iconConfig.animation);
          } else {
            icon?.classList.remove(iconConfig.animation);
          }
        };
        

        addAnimation('.bubble-icon', config.mainIcon);

        Object.values(config).forEach((c, index) => {
          let subbuttonNumber = Number(Object.keys(config)[index].replace("subbutton", ""))
          addAnimation(`.bubble-sub-button-${subbuttonNumber} .bubble-sub-button-icon`, c);
        });
    })()}

[julien94800]

Thanks!! So fast!! I just tried, but without sucess.... What is strange is that nothing works anymore with this new version, even on subbuttons whereas it worked well with previous version

[julien94800]

Ok, I think i found!
const config = this.config.subbutton_animations || {};
I just replaced it by :
const config = this.config. icon_animations || {};
and now it seems to work!!
Thanks!!!

[ddewar]

Yup, good catch, sorry to make you debug :)

[julien94800]

It's ok, thanks to you for updating it that quickly! So great work!!! I wish i could help more on all this, but learning step by step