Ticker anyone? (Example code)

Hello people. It’s been a while but here is another code goodie for you guys and gals. Enjoy the copy and past for some magic. :grin:

type: custom:html-card
content: |
  <div class="ticker-wrap">
    <div class="ticker">
      <span class="item-list-1">
        <span class="item">Home Assistant rocks because it's community ROCKS!</span>
        <span class="item">Come get this AWESOME ticker!</span>
        <span class="item">[[sun.sun.attributes.elevation]]</span>
style: |
  ha-card {
    background: none;
    height: 10px;
    color: white;
    font-family: Zen Dots;
    font-size: 30px;
  body { margin: 0; }
  .ticker-wrap {
    width: 100%;
    height: 80px;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    position: fixed;
    bottom: 0;
    height: 3.5rem;
  .ticker {
    display: inline-block;
    margin-top: 5px;
    animation: marquee 30s linear infinite;
  .item-list {
    position: relative;
    left: 0%;
    animation: swap 20s linear infinite;

  .item {
    display: inline-block;
    padding: 0 1rem;

  /* Transition */
  @keyframes marquee {
    0% {
      transform: translateX(0)
    100% {
    transform: translateX(-100%)

  @keyframes swap {
    0%, 50% {
      left: 0%;
    100% {
      left: 100%;
  position: main

1 Like

Thanks for sharing, any idea how I can display the attribute of a sensor?, FYI, the Come get this AWESOME ticker! doesn’t display using your config.

Fixed. :+1: Check the 3rd content line. I included sun state for you.

Thanks, I was able to get the basic attribute, but the following doesn’t work, is that not valid?


create a sensor.weather_ticker_example that pulls that condition and then use it like this <span class="item">[[sensor.weather_ticker_example]]</span> instead.`

- platform: template
      value_template: "{{ states.weather.home.attributes.forecast[1].condition }}"
1 Like

Hey, it’s been quite a while, not sure if you’re still using this, it still works great except for when the sensor is null (see below), is there anyway to disable/silence the ticker or display a generic message when the sensor is null?

Does it still work in 2024 (HA v2024.2.5) and with the current html-card?

Tried to add it to dashboard and I get:

dennisaion, any hint?

There’s no style param in html-card, I had to change style: to <style>...</style> and then it started to work.
However, I had to rework the idea - please check here for 2024 version: Ticker - reworked 2024