Intermediate20 min

Build a news ticker.

The scrolling crawl at the bottom of the screen — CNN, BBC News, Bloomberg. Headlines flow continuously from right to left. This tutorial covers infinite CSS animations, dynamic data arrays, and seamless looping.

News Ticker — OGraf Template

1920 x 1080

Badge Text

Headlinesarray5 items

Play mode

What makes a ticker different?

Infinite scroll

Uses CSS @keyframes with infinite repeat. Content is duplicated for seamless looping.

Array data

Instead of single fields, the schema accepts an array of headlines. Each item scrolls past in sequence.

Full-width bar

Spans the entire bottom edge. A colored badge sits on the left, the scrolling text flows to its right.

The seamless loop trick

The ticker duplicates all the headlines so the scroll appears infinite. When the first set scrolls fully off-screen, the second set has already taken its place — the animation resets invisibly.

graphic.mjs (render method)JavaScript

_renderItems(items) {
  // Duplicate the array for seamless looping
  const allItems = [...items, ...items];

  this._content.innerHTML = allItems.map((item, i) =>
    `<span class="ticker-item">
      <span class="ticker-dot"></span>${item}
    </span>` +
    (i < allItems.length - 1
      ? '<span class="ticker-separator"></span>'
      : '')
  ).join('');
}

The CSS scroll animation

style.css (key parts)CSS

.ticker-content {
  display: flex;
  white-space: nowrap;
  animation: scroll 20s linear infinite;
  padding-left: 100%;   /* Start off-screen right */
}

@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
  /* -50% because content is duplicated */
}

Why -50%?

The content is duplicated (original + copy), so 50% of the total width equals the full length of one set. When the animation hits -50%, the copy has perfectly replaced the original — the loop is seamless.

The manifest

Notice the schema uses an array of strings for headlines, not a single text field. Controllers render this as a list where the operator can add, remove, and reorder items.

ticker.ograf.jsonJSON

{
  "$schema": "https://ograf.ebu.io/v1/specification/json-schemas/graphics/schema.json",
  "id": "dev.ograf.tutorial.ticker",
  "version": "1.0.0",
  "name": "News Ticker",
  "description": "Scrolling headline crawl with an infinite CSS loop. Tutorial from ograf.dev.",
  "author": {
    "name": "ograf.dev",
    "url": "https://ograf.dev"
  },
  "main": "graphic.mjs",
  "stepCount": 1,
  "supportsRealTime": true,
  "supportsNonRealTime": false,
  "schema": {
    "type": "object",
    "properties": {
      "badge": {
        "type": "string",
        "title": "Badge Text",
        "gddType": "single-line",
        "default": "Breaking"
      },
      "items": {
        "type": "array",
        "title": "Headlines",
        "items": {
          "type": "string",
          "gddType": "single-line"
        },
        "default": [
          "EBU releases OGraf Graphics Definition v1 — the open standard for broadcast graphics",
          "SPX Graphics Controller adds full OGraf compliance in upcoming v1.4 release",
          "CasparCG community explores native OGraf renderer integration",
          "Loopic announces one-click OGraf export for all template projects"
        ]
      }
    }
  }
}

Download the full News Ticker package

A real OGraf Graphics Definition v1 package. A compliant renderer reads the manifest and drives the lifecycle. MIT-licensed; drop it into any OGraf-compatible system.

ticker.ograf.json
Manifest — what a renderer reads (id, schema, lifecycle flags)
graphic.mjs
Web Component with load / play / update / stop / customAction / dispose
style.css
Stylesheet, loaded by graphic.mjs via a <link> tag
README.md
Usage notes

Download ticker.zipMIT · fonts included · drop on /check to validate

Deploy to a compliant OGraf renderer

Ticker complete.

You've learned infinite CSS animations, array data schemas, and the content duplication trick for seamless looping.

Next: Full Page Quote All tutorials

More tutorials

View all 11

Beginner15 min

Lower Third

Name & title overlay

Beginner10 min

Bug / LIVE

Corner indicator with pulse

Intermediate15 min

Full Page Quote

Cinematic full-screen typography

Intermediate20 min

Election Bars

Animated percentage chart

Intermediate20 min

Sport Lineup

Team roster grid

Advanced25 min

Score Bug

Live match scoreboard

Intermediate15 min

Countdown Timer

Self-ticking clock

Intermediate15 min

Breaking News

Full-screen urgent alert

Intermediate20 min

Weather Forecast

Conditions & 3-day outlook

Beginner10 min

Social Media Card

Post overlay with avatar

What makes a ticker different?

Infinite scroll

Uses CSS @keyframes with infinite repeat. Content is duplicated for seamless looping.

Array data

Instead of single fields, the schema accepts an array of headlines. Each item scrolls past in sequence.

Full-width bar

Spans the entire bottom edge. A colored badge sits on the left, the scrolling text flows to its right.

The seamless loop trick

The ticker duplicates all the headlines so the scroll appears infinite. When the first set scrolls fully off-screen, the second set has already taken its place — the animation resets invisibly.

graphic.mjs (render method)JavaScript

_renderItems(items) {
  // Duplicate the array for seamless looping
  const allItems = [...items, ...items];

  this._content.innerHTML = allItems.map((item, i) =>
    `<span class="ticker-item">
      <span class="ticker-dot"></span>${item}
    </span>` +
    (i < allItems.length - 1
      ? '<span class="ticker-separator"></span>'
      : '')
  ).join('');
}

The CSS scroll animation

style.css (key parts)CSS

.ticker-content {
  display: flex;
  white-space: nowrap;
  animation: scroll 20s linear infinite;
  padding-left: 100%;   /* Start off-screen right */
}

@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
  /* -50% because content is duplicated */
}

Why -50%?

The manifest

Notice the schema uses an array of strings for headlines, not a single text field. Controllers render this as a list where the operator can add, remove, and reorder items.

ticker.ograf.jsonJSON

{
  "$schema": "https://ograf.ebu.io/v1/specification/json-schemas/graphics/schema.json",
  "id": "dev.ograf.tutorial.ticker",
  "version": "1.0.0",
  "name": "News Ticker",
  "description": "Scrolling headline crawl with an infinite CSS loop. Tutorial from ograf.dev.",
  "author": {
    "name": "ograf.dev",
    "url": "https://ograf.dev"
  },
  "main": "graphic.mjs",
  "stepCount": 1,
  "supportsRealTime": true,
  "supportsNonRealTime": false,
  "schema": {
    "type": "object",
    "properties": {
      "badge": {
        "type": "string",
        "title": "Badge Text",
        "gddType": "single-line",
        "default": "Breaking"
      },
      "items": {
        "type": "array",
        "title": "Headlines",
        "items": {
          "type": "string",
          "gddType": "single-line"
        },
        "default": [
          "EBU releases OGraf Graphics Definition v1 — the open standard for broadcast graphics",
          "SPX Graphics Controller adds full OGraf compliance in upcoming v1.4 release",
          "CasparCG community explores native OGraf renderer integration",
          "Loopic announces one-click OGraf export for all template projects"
        ]
      }
    }
  }
}

Download the full News Ticker package

A real OGraf Graphics Definition v1 package. A compliant renderer reads the manifest and drives the lifecycle. MIT-licensed; drop it into any OGraf-compatible system.

ticker.ograf.json
Manifest — what a renderer reads (id, schema, lifecycle flags)
graphic.mjs
Web Component with load / play / update / stop / customAction / dispose
style.css
Stylesheet, loaded by graphic.mjs via a <link> tag
README.md
Usage notes

Download ticker.zipMIT · fonts included · drop on /check to validate

Deploy to a compliant OGraf renderer