Text scrolling effect not working when using custom states

[marcelomarshmallow]

Describe the bug
The text scrolling effect is not applied to custom states that were written using the “Advanced example: Get state/attribute from other entities” module or the Custom styles & JS templates block.

To Reproduce
Steps to reproduce the behavior:
Create a Bubble Card, e.g. "Button" with button type "State".
Either set the state via “custom styles & JS templates” or via the “Advanced example: Get state/attribute from other entities” module.
Shrink the layout card so that the text scrolling effect would be activated.
Now you can see that the text scrolling effect is not applied to the state.

Expected behavior
The text scrolling effect should be displayed correctly.

YAML

type: custom:bubble-card
card_type: button
button_type: state
entity: binary_sensor.anyubic_kobra_s1_betriebszustand
name: 3D-Drucker
show_attribute: false
show_state: true
show_last_updated: false
show_last_changed: false
force_icon: false
show_icon: true
icon: mdi:printer-3d
modules:
  - home-assistant-default
  - bubble_badges
styles: |-
  ${(() => {
    const entityId = 'sensor.anycubic_kobra_s1_current_print_state';
    card.querySelector('.bubble-state').innerText = hass.states[entityId].state === 'complete' ? 'Fertig'
    : hass.states[entityId].state === 'error' ? 'Fehler'
    : hass.states[entityId].state === 'standby' ? 'Standby'
    : hass.states[entityId].state === 'paused' ? 'Pausiert'
    : hass.states[entityId].state === 'printing' ? 'Druckt'
    : hass.states[entityId].state === 'cancelled' ? 'Abgebrochen'
    : hass.states[entityId].state === 'unavailable' ? 'Nicht verfügbar'
    : hass.states[entityId].state === 'unknown' ? 'Unbekannt'
    : ""
  })()}
tap_action:
  action: navigate
  navigation_path: "#3D-Drucker"
button_action:
  tap_action:
    action: navigate
    navigation_path: "#3D-Drucker"
  hold_action:
    action: none
hold_action:
  action: none
grid_options:
  columns: 6
  rows: auto
bubble_badges:
  badges:
    - name: Restlaufzeit
      target: main_icon
      entity: sensor.anycubic_kobra_s1_restlaufzeit
      condition:
        - condition: state
          entity_id: sensor.anycubic_kobra_s1_current_print_state
          state:
            - printing
sub_button:
  main: []
  bottom: []

Information (please complete the following information):

• OS: Android
• Browser/App: HomeAssistant Companion App 2025.11.4-full (19134)
• Bubble Card version: v3.1.0-rc.2
• Home Assistant version: 2025.12.5

Additional context
I can't use hass.formatEntityState and have to translate my entity state manually, because there is no german translation provided by the integration the sensor is coming from.

Thank you! 🍻

[MackoMici]

I have the same error, and the same thing happens with ${card.querySelector('.bubble-name').innerText.
When I switch between pages, at first it seems to scroll, but it doesn't display what it should, only basic information, and then suddenly the correct text appears and the scrolling stops.

Kepernyofelvetel.2026-01-06.000710.mp4

[JonasDoebertin]

Having the same issue currently when I try to template the state in a module by following the Templating texts (like name or state) example.

The code adds the distance provided by the proximity integration to the state, when the person is not at home.

Module Code:

${card.querySelector('.bubble-state').innerText = hass.formatEntityState(hass.states[entity]) + 
  (state !== 'home'
    && this.config.person_card?.distance_entity
    && hass.states[this.config.person_card.distance_entity]
    && !isNaN(parseFloat(hass.states[this.config.person_card.distance_entity].state))
      ? ' • ' + (parseFloat(hass.states[this.config.person_card.distance_entity].state) / 1000).toFixed(1).replace('.', ',') + ' km' 
      : ''
  ) 
}

Editor schema for the sake of completeness:

- name: distance_entity
  label: Distance Entity
  selector:
    entity:
      filter:
        domain: sensor

It also says If you want to template the state (.bubble-state) don't toggle show_state: true just toggle show_attribute: true without any attribute.". This hint has been followed.

[dusan-ivanco]

Same here, please can you fix it? Thank you very much.

[dusan-ivanco]

            sub_button:
              main:
                - entity: script.irrigation
                  sub_button_type: default
                  show_background: false
                  show_state: true
                  show_icon: false
                  tap_action:
                    action: none
            styles: |
              ${(() => {
                const EL = card.querySelector('.bubble-sub-button-1 .bubble-sub-button-name-container');

                const D1 = new Date();
                const D2 = new Date(hass.states['script.irrigation']['attributes']['last_triggered']);

                const O1 = Date.UTC(D1.getFullYear(), D1.getMonth(), D1.getDate());
                const O2 = Date.UTC(D2.getFullYear(), D2.getMonth(), D2.getDate());
                
                const TD = (O2 - O1) / (1000 * 60 * 60 * 24);
                const RT = new Intl.RelativeTimeFormat('sk', {numeric:'auto'});

                let IT = '';

                switch(true) {
                  case (Math.abs(TD) < 7): {
                    IT = 'Aktivácia' + ' · ' + RT.format(Math.round(TD / 1), 'day');
                    break;
                  }
                  case (Math.abs(TD) < 30): {
                    IT = 'Aktivácia' + ' · ' + RT.format(Math.round(TD / 7), 'week');
                    break;
                  }
                  case (Math.abs(TD) < 365): {
                    IT = 'Aktivácia' + ' · ' + RT.format(Math.round(TD / 30), 'month');
                    break;
                  }
                  default: {
                    IT = 'Aktivácia' + ' · ' + RT.format(Math.round(TD / 365), 'year');
                    break;
                  }
                }

                if(EL['innerText'] !== IT) {
                  EL['innerText'] = IT;
                }
              })()}

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates.
Please make sure to update to the latest version and check if that solves the issue. Let us know if that works for you by adding a comment 👍
This issue has now been marked as stale and will be closed if no further activity occurs. If you want to keep it open, please leave a comment. Thank you for your contributions.

[marcelomarshmallow]

Still present

[chaosangel81]

Same issue here. Spent quite a bit of time trying to solve but haven't yet found a method that works. If anybody finds a fix I'd be very grateful.