[Styling Module] Icon Animations

[rafaelovandov]

Icon Animations

Version: 1.1
Creator: Rafo

Important

Supported cards:

• Button
• Select
• Climate
• Media Player
• Cover
• Separator

Adds configurable animations to the main icon in Bubble cards, including device-specific animations for washing machine, dishwasher, robot vacuum, robot mower, bell and smoke alarm.

Choose from a variety of predefined effects such as rotate, bounce, pulse, flip, and more.

You can control animation speed and optionally trigger animations only when certain conditions are met (e.g., entity state is "on").
Configure this module via the editor or in YAML, for example:

icon_animations: 
    animation_type: YOUR_VALUE

---

🧩 Get this Module

To use this module, simply install it from the Module Store (from the editor of any card > Modules), or copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

icon_animations:
    name: "Icon Animations"
    version: "1.1"
    creator: "Rafo"
    link: "https://github.com/Clooos/Bubble-Card/discussions/1726"

    supported:
        - button
        - select
        - climate
        - media-player
        - cover
        - separator

    description: |
        Adds configurable animations to the main icon in Bubble cards, including device-specific animations for washing machine, dishwasher, robot vacuum, robot mower, bell and smoke alarm.
        
        Choose from a variety of predefined effects such as rotate, bounce, pulse, flip, and more.
        
        You can control animation speed and optionally trigger animations only when certain conditions are met (e.g., entity state is "on").
        <br><br>
        <code-block><pre>
        icon_animations: 
            animation_type: YOUR_VALUE
        </pre></code-block>

    code: |
        ${(() => {
          const config = this.config?.icon_animations || {};
          const type = config.animation_type;
        
          const mainSpeed = parseFloat(config.animation_speed_main);
          const secondarySpeed = parseFloat(config.animation_speed_secondary);
        
          const mainDuration = (1 / (mainSpeed > 0 ? mainSpeed : 1)).toFixed(2);
          const secondaryDuration = (1 / (secondarySpeed > 0 ? secondarySpeed : 1)).toFixed(2);
        
          const conditions = config.animate_when;
          let shouldAnimate = !conditions || checkConditionsMet([].concat(conditions), hass);
        
          const icon = card?.querySelector('.bubble-main-icon') || card?.querySelector('.bubble-icon');
          const parent = icon?.parentNode;
          if (!icon || !parent) return '';
        
          function animateWashingMachine() {
            const hasClone = parent.querySelector('.bubble-main-icon.clone');
            if (secondaryDuration && !hasClone) {
              const drum = icon.cloneNode(true);
              drum.classList.add('clone');
              parent.insertBefore(drum, icon);
            }
            return `
              .bubble-main-icon {
                display:flex;justify-content:center;align-items:center;
                position:absolute;
                top:calc((100% - var(--mdc-icon-size))/2);
                left:calc((100% - var(--mdc-icon-size))/2);
                width:var(--mdc-icon-size);height:var(--mdc-icon-size);
                ${secondaryDuration ? `animation: drum-spin ${secondaryDuration}s linear infinite;` : ''}
                transform-origin:50% 59%;
                clip-path:circle(22% at 50% 59%);
              }
              .bubble-main-icon.clone {
                ${mainDuration ? `animation: body-wiggle ${mainDuration}s ease-in-out infinite;` : ''}
                transform-origin:50% 59%;
                clip-path:polygon(0 0,0 100%,35% 100%,34% 68%,60% 41%,71% 56%,65% 74%,47% 79%,32% 69%,35% 100%,100% 100%,100% 0);
              }
              @keyframes body-wiggle {
                0%,100%{transform:translate(0,0) rotate(0);}
                20%{transform:translate(0.4px,-0.4px) rotate(-4deg);}
                40%{transform:translate(-0.4px,0.4px) rotate(4deg);}
                60%{transform:translate(0.4px,0.4px) rotate(-4deg);}
                80%{transform:translate(-0.4px,-0.4px) rotate(4deg);}
              }
              @keyframes drum-spin { from{transform:rotate(0);} to{transform:rotate(360deg);} }
            `;
          }
        
          function animateDishwasher() {
            const hasClone = parent.querySelector('.bubble-main-icon.clone');
            if (secondaryDuration && !hasClone) {
              const spray = icon.cloneNode(true);
              spray.classList.add('clone');
              parent.insertBefore(spray, icon);
            }
            return `
              .bubble-main-icon{
                display:flex;justify-content:center;align-items:center;
                position:absolute;
                top:calc((100% - var(--mdc-icon-size))/2);
                left:calc((100% - var(--mdc-icon-size))/2);
                width:var(--mdc-icon-size);height:var(--mdc-icon-size);
                ${secondaryDuration ? `animation: water-spray ${secondaryDuration}s ease-in-out infinite;` : ''}
                transform-origin:center 75%;
                clip-path:circle(22% at 50% 59%);
              }
              .bubble-main-icon.clone{
                ${mainDuration ? `animation: door-jiggle ${mainDuration}s ease-in-out infinite;` : ''}
                transform-origin:center 75%;
                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);
              }
              @keyframes door-jiggle{
                0%,20%,50%,80%,100%{transform:translate(0,0);}
                40%{transform:translateY(-1.2px) rotate(4deg);}
                60%{transform:translateY(-1.1px) rotate(-3deg);}
              }
              @keyframes water-spray{
                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);}
              }
            `;
          }
        
          function animateRobotVacuum() {
            return `
              .bubble-main-icon{
                display:flex;justify-content:center;align-items:center;
                position:absolute;
                top:calc((100% - var(--mdc-icon-size))/2);
                left:calc((100% - var(--mdc-icon-size))/2);
                width:var(--mdc-icon-size);height:var(--mdc-icon-size);
                ${mainDuration ? `animation: roam ${mainDuration}s ease-in-out infinite;` : ''}
              }
              @keyframes roam{
                0%{transform:translate(0%,0%) rotate(45deg);}
                5%{transform:translate(15%,-15%) rotate(45deg);}
                8%{transform:translate(15%,-15%) rotate(-90deg);}
                18%{transform:translate(-15%,-15%) rotate(-90deg);}
                21%{transform:translate(-15%,-15%) rotate(-180deg);}
                31%{transform:translate(-15%,15%) rotate(-180deg);}
                34%{transform:translate(-15%,15%) rotate(-270deg);}
                44%{transform:translate(15%,15%) rotate(-270deg);}
                47%{transform:translate(15%,15%) rotate(-405deg);}
                57%{transform:translate(-15%,-15%) rotate(-405deg);}
                60%{transform:translate(-15%,-15%) rotate(-270deg);}
                70%{transform:translate(15%,-15%) rotate(-270deg);}
                73%{transform:translate(15%,-15%) rotate(-135deg);}
                83%{transform:translate(-15%,15%) rotate(-135deg);}
                86%{transform:translate(-15%,15%) rotate(-270deg);}
                90%{transform:translate(0%,15%) rotate(-270deg);}
                93%{transform:translate(0%,15%) rotate(-360deg);}
                97%{transform:translate(0%,0%) rotate(-360deg);}
                100%{transform:translate(0%,0%) rotate(-315deg);}
              }
            `;
          }
        
          function animateRobotMower() {
            return `
              .bubble-main-icon {
                display:flex;justify-content:center;align-items:center;
                position:absolute;
                top:calc((100% - var(--mdc-icon-size))/2);
                left:calc((100% - var(--mdc-icon-size))/2);
                width:var(--mdc-icon-size);height:var(--mdc-icon-size);
                ${mainDuration ? `animation: mow ${mainDuration}s linear infinite;` : ''}
              }
          
              @keyframes mow {
                0%   { transform: translate(0%,0%) rotate(0deg); }
                20%  { transform: translate(20%,-20%) rotate(0deg); }
                25%  { transform: translate(20%,-20%) rotate(90deg); }
                45%  { transform: translate(20%,20%) rotate(90deg); }
                50%  { transform: translate(20%,20%) rotate(180deg); }
                70%  { transform: translate(-20%,20%) rotate(180deg); }
                75%  { transform: translate(-20%,20%) rotate(270deg); }
                95%  { transform: translate(-20%,-20%) rotate(270deg); }
                100% { transform: translate(0%,0%) rotate(0deg); }
              }
            `;
          }
        
          function animateBell() {
            return `
              .bubble-main-icon{
                display:flex;justify-content:center;align-items:center;
                position:absolute;top:50%;left:50%;
                width:var(--mdc-icon-size);height:var(--mdc-icon-size);
                transform:translate(-50%,-50%);
                ${mainDuration ? `animation: bell-ding ${mainDuration}s ease-in-out infinite;` : ''}
                transform-origin:top center;
              }
              @keyframes bell-ding{
                0%,100%{transform:translate(-50%,-50%) rotate(0deg);}
                20%{transform:translate(-50%,-50%) rotate(-10deg);}
                40%{transform:translate(-50%,-50%) rotate(10deg);}
                60%{transform:translate(-50%,-50%) rotate(-6deg);}
                80%{transform:translate(-50%,-50%) rotate(6deg);}
              }
            `;
          }
        
          function animateSmokeAlarm() {
            const hasSmoke = parent.querySelector('.smoke-puff');
            if (!hasSmoke) {
              const smoke = document.createElement('div');
              smoke.classList.add('smoke-puff');
              parent.appendChild(smoke);
            }
            return `
              .bubble-main-icon{
                position:absolute;
                top:calc((100% - var(--mdc-icon-size))/2);
                left:calc((100% - var(--mdc-icon-size))/2);
                width:var(--mdc-icon-size);height:var(--mdc-icon-size);
                display:flex;justify-content:center;align-items:center;z-index:2;
              }
              .smoke-puff{
                position:absolute;
                bottom:calc((100% - var(--mdc-icon-size))/2 + 5px);
                left:50%;width:6px;height:6px;
                background:rgba(200,200,200,0.3);border-radius:50%;
                transform:translateX(-50%) scale(1);
                animation:smoke-rise ${mainDuration}s ease-in-out infinite;
                z-index:1;pointer-events:none;
              }
              @keyframes smoke-rise{
                0%{transform:translate(-50%,0) scale(0.6);opacity:0.2;}
                30%{transform:translate(-50%,-6px) scale(0.8);opacity:0.4;}
                60%{transform:translate(-50%,-12px) scale(1);opacity:0.3;}
                100%{transform:translate(-50%,-18px) scale(1.2);opacity:0;}
              }
            `;
          }
        
          function animateRotate() {
            return `
              .bubble-main-icon{animation:rotate ${mainDuration}s linear infinite;}
              @keyframes rotate{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
            `;
          }
        
          function animatePulse() {
            return `
              .bubble-main-icon{animation:pulse ${mainDuration}s ease-in-out infinite;}
              @keyframes pulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.2);}}
            `;
          }
        
          function animateBounce() {
            return `
              .bubble-main-icon{animation:bounce ${mainDuration}s ease-in-out infinite;}
              @keyframes bounce{
                0%,20%,50%,80%,100%{transform:translateY(0);}
                40%{transform:translateY(-1.2px) rotate(5deg);}
                60%{transform:translateY(-1.1px) rotate(-4deg);}
              }
            `;
          }
        
          function animateShake() {
            return `
              .bubble-main-icon{animation:shake ${mainDuration}s linear infinite;}
              @keyframes shake{
                0%,100%{transform:translateX(0);}
                25%{transform:translateX(-4px);}
                75%{transform:translateX(4px);}
              }
            `;
          }
        
          function animateFlip() {
            return `
              .bubble-main-icon{animation:flip ${mainDuration}s linear infinite;}
              @keyframes flip{
                0%{transform:rotateY(0);}
                50%{transform:rotateY(180deg);}
                100%{transform:rotateY(360deg);}
              }
            `;
          }
        
          function animateFade() {
            return `
              .bubble-main-icon{animation:fade ${mainDuration}s ease-in-out infinite;}
              @keyframes fade{0%,100%{opacity:1;} 50%{opacity:0.3;}}
            `;
          }
        
          function animateWiggle() {
            return `
              .bubble-main-icon{animation:wiggle ${mainDuration}s ease-in-out infinite;}
              @keyframes wiggle{
                0%,100%{transform:rotate(0deg);}
                25%{transform:rotate(10deg);}
                75%{transform:rotate(-10deg);}
              }
            `;
          }
        
          function animateScaleUp() {
            return `
              .bubble-main-icon{animation:scale-up ${mainDuration}s ease-in-out infinite;}
              @keyframes scale-up{
                0%{transform:scale(1);}
                50%{transform:scale(1.4);}
                100%{transform:scale(1);}
              }
            `;
          }
        
          const animations = {
            'washing-machine': () => animateWashingMachine(),
            'dishwasher': () => animateDishwasher(),
            'robot-vacuum': () => animateRobotVacuum(),
            'robot-mower': () => animateRobotMower(),
            'bell': () => animateBell(),
            'smoke-alarm': () => animateSmokeAlarm(),
            'rotate': () => animateRotate(),
            'pulse': () => animatePulse(),
            'bounce': () => animateBounce(),
            'shake': () => animateShake(),
            'flip': () => animateFlip(),
            'fade': () => animateFade(),
            'wiggle': () => animateWiggle(),
            'scale-up': () => animateScaleUp(),
          };
        
          if (!shouldAnimate || !animations[type]) return '';
          return animations[type]();
        })()}

    editor:
      - name: animation_type
        label: Animation Type
        selector:
          select:
            options:
              - value: washing-machine
                label: Washing Machine
              - value: dishwasher
                label: Dishwasher
              - value: robot-vacuum
                label: Robot Vacuum
              - value: robot-mower
                label: Robot Mower
              - value: bell
                label: Bell
              - value: smoke-alarm
                label: Smoke Alarm
              - value: rotate
                label: Rotate
              - value: pulse
                label: Pulse
              - value: bounce
                label: Bounce
              - value: shake
                label: Shake
              - value: flip
                label: Flip
              - value: fade
                label: Fade
              - value: wiggle
                label: Wiggle
              - value: scale-up
                label: Scale Up
      - name: animation_speed_main
        label: Animation Speed Main (higher is faster)
        selector:
          text:
            type: number
      - name: animation_speed_secondary
        label: Animation Speed Secondary (higher is faster)
        selector:
          text:
            type: number
      - name: animate_when
        label: Animate when
        icon: mdi:animation-play
        selector:
          condition: {}
      

---

Screenshot:

[Uschinator]

Love this Module. Thanks for it. I found maybe a little bug. I have a robot lawn mower and set the icon to shake so the icon goes from left to right. In the conditions i have a AND Clause which checkes the power consumption of the smart plug on which the robot is pluged into, if it is lower than 20 W then the Robot is mowing, AND it checkes if the time is after sunrise and before sunset.

As soon as i activate the sun clause or even a simple time clause (after 7am and before 5pm) the icon stops shaking.

[rafaelovandov]

My current condition for checking sun position and date/time isn’t very accurate. For now, I’m not going to tweak it because I want to focus on creating animations for specific devices. And again If you have any ideas for device-specific animations, feel free to share them.

[Uschinator]

no worries. i got it working without the date/time.
One cool Animation would be if the lawnmower or roomba could drive on the inside of the icon circle.

[rafaelovandov]

I've already created the robot vacuum to drive inside the circle, so you want the lawnmower to do the same?

[Uschinator]

This is my mower and it would be cool if he would drive inside the circle on the edge to the blue ring (clockwise or counterclockwise). if this is what you already created then i am happy. i am happy with this anyways, it is a great working animation module.

[rafaelovandov]

Already in the version, hope to like it :)