I’m using CasparCG as a graphics engine and am making an HTML template using NXTEdition Graphics. I currently have a very simple template with a ticker scrolling at the bottom of the screen. When the ticker text ends it does not start over. I want it to be continuous not to have a blank space on the scrolling. I attempted duplicating the ticker-items, however it just created the gap after that instead. I’m pretty new to working with JSX.

Here’s my current index.jsx file:

import React from 'react';
import { render, FramerMotion, useCasparData } from '@nxtedition/graphics-kit';
import './style.css';

const NewsTicker = () => {
  const {
    ticker1Header, ticker1Text,
    ticker2Header, ticker2Text,
    ticker3Header, ticker3Text
  } = useCasparData(); // Get dynamic data from CasparCG

  // Provide default text if no data is received
  const defaultTicker1Text = ticker1Text || 'Default Ticker Text 1';
  const defaultTicker2Text = ticker2Text || 'Default Ticker Text 2';
  const defaultTicker3Text = ticker3Text || 'Default Ticker Text 3';

  const defaultTicker1Header = ticker1Header || 'Header 1:';
  const defaultTicker2Header = ticker2Header || 'Header 2:';
  const defaultTicker3Header = ticker3Header || 'Header 3:';

  return (
    <FramerMotion hide={false}>
      <div className="container">
        <div className="ticker-container">
          <div className="ticker">
            <div className="ticker-content">
              <div className="ticker-item">
                <span className="ticker-item-header">{defaultTicker1Header}</span> {defaultTicker1Text}
              </div>
              <div className="ticker-item">
                <span className="ticker-item-header">{defaultTicker2Header}</span> {defaultTicker2Text}
              </div>
              <div className="ticker-item">
                <span className="ticker-item-header">{defaultTicker3Header}</span> {defaultTicker3Text}
              </div>
            </div>
          </div>
        </div>
      </div>
    </FramerMotion>
  );
};

render(NewsTicker);

And my style.css file:

body {
  margin: 0;
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.ticker-container {
  display: flex;
  align-items: center;
  background: white;
  padding: 0 2vw;
  font-size: 2vw;
  color: black;
  width: 100%;
  box-sizing: border-box;
  height: 10vw;
}

.ticker {
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  height: 100%;
}

.ticker-content {
  display: inline-block;
  padding-left: 100%;
  animation: ticker 10s linear infinite;
}

@keyframes ticker {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

.ticker-item {
  display: inline-block;
  padding-left: 2vw; /* Space between ticker items */
  white-space: nowrap;
}

.ticker-item-header {
  font-weight: bold;
  margin-right: 1vw; /* Space between header and ticker text */
}