OH3 Scrolling Animation with Repeater results overlapping

Hi All

I am trying to create a scrolling text “banner” to show the Label and State of a group of items.

Group is created as follows:

Expecting to see the Following Scrolling from right to left:

Partition 1 Partition State - Disarmed Partition 2 Partition State - Disarmed Partition 3 Partition State - Armed Partition 4 Partition State - Disarmed

I am however getting the following:

Scroll Text

Note also that only 2 out the 4 items are displayed - assuming this is part of the overlap issue?

From what I can see it looks like the 4 loop members are overlapping each other and I cannot work out how to fix this.

Changing the width values for the components and stylesheet has some effect, but can get the full text to display.

My widget is as follows:

uid: Test_Scrolling_Animation_Repeater
tags: []
props:
  parameterGroups: []
timestamp: Dec 29, 2022, 11:23:14 AM
component: f7-page
config: {}
slots:
  default:
    - component: f7-badge
      config:
        style:
          background: rgba(39,26,226,255)
          border-radius: 5px
          display: flex
          height: 90px
          left: 30px
          overflow: hidden
          position: absolute
          top: 5%
          width: 300px   
      slots:
        default:
          - component: oh-repeater
            config:            
              for: PartitionState
              sourceType: itemsInGroup
              groupItem: PartitionState_Group
              fragment: true
            slots:
              default:
                - component: f7-row
                  config:
                    style:
                    stylesheet: >
                      .scroll_text {
                        display: block; /* Important to give the content a width */
                        width: 300px;
                        overflow: hidden;
                        position: relative;
                        transform: translateX(100%); /* Animation start out of the screen */
                        /* Add the animation */
                        animation: move 6s linear infinite /* infinite make reapeat the animation indefinitely */;
                      } /* Create the animation */ @keyframes move {
                        to { transform: translateX(-100%); }
                      }                    
                  slots:
                    default:
                      - component: Label
                        config:
                          class: scroll_text
                          large: true
                          raised: true
                          style:
                            background: rgba(39,26,226,255)
                            color: rgba(6,192,232,255)
                            font-size: 30px
                            font-weight: 700
                            left: 30px
                            top: 40px
                            width: 300px
                          text: =loop.PartitionState.label +" - " + loop.PartitionState.state

Any suggestions would be appreciated.
Mark

EDIT - So it seems I was too quick to accept what looked to be working.

The solution below works in the Widget Editor and the display is 100%. However when the widget is called from an oh-cell using either popup , popover or the sized popup option the display is incorrect.

So I eventually found a solution after messing around for ages… Had to make THREE changes:
Changed 100% to 200%

transform: translateX(200%); /* Animation start out of the screen */

Changed 100% to 200%

to { transform: translateX(-200%); }

And changed the width of the Label component from 300px to 600px

width: 600px

So what I get in the widget editor is:

Widget Viewer

And in a called widget:

Widget Called
So I am now baffled completely