How to create a vertical animated ticker with CSS and HTML?

Question

I am trying to create a css only ticker, I got it working for 3 elements but now I am trying to make it dynamic so it works for any number of elements. But I am facing an issue where after the second last element the last and first element are coming into view together. I know I am missing something small but can't figure it out.

https://codepen.io/jalajcodes/pen/gOeQWNW (working with 3 elements)
https://codepen.io/jalajcodes/pen/MWVzoaL (dynamic, not working properly)

Code for the dynamic version:

<ul class="list">
  <li class="item ticker_1">
    <p class="text">Lorem Ipsum One</p>
  </li>
  <li class="item ticker_2">
    <p class="text">Lorem Ipsum Two</p>
  </li>
  <li class="item ticker_3">
    <p class="text">Lorem Ipsum Three</p>
  </li>
  <li class="item ticker_4">
    <p class="text">Lorem Ipsum Four</p>
  </li>
  <li class="item ticker_5">
    <p class="text">Lorem Ipsum 5</p>
  </li>
  <li class="item ticker_6">
    <p class="text">Lorem Ipsum 6</p>
  </li>
  <li class="item ticker_7">
    <p class="text">Lorem Ipsum 7</p>
  </li>
</ul>

$total_tickers: 7;
.list {
  position: relative;
  width: 100%;
  height: 40px;

  .item {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(10px);
    text-align: center;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }

  @for $i from 1 to ($total_tickers + 1) {
    .ticker_#{$i} {
      animation: appear
        #{(($total_tickers - 1) * 2.5)}s
        #{(($i - 1) * 2.5)}s
        infinite
        ease;
    }
  }
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  7% {
    opacity: 1;
    transform: translateY(0);
  }
  10% {
    opacity: 1;
    transform: translateY(0);
  }
  14% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

Any help is appreciated, thanks!

Answer 1

Just messed up the for loop.

In your animation, you want to include the last one (7).

@for $i from 1 to ($total_tickers + 1) {
    .ticker_#{$i} {
      animation: appear
        #{(($total_tickers) * 2.5)}s
        #{(($i - 1) * 2.5)}s
        infinite
        ease;
    }
  }

Answer 2

All you have to do is just remove - 1 from the loop.

example:

@for $i from 1 to ($total_tickers + 1 ) {
    .ticker_#{$i} {
      animation: appear
        #{(($total_tickers) * 2.5)}s //changes
        #{(($i) * 2.5)}s  // changes
        infinite
        ease;
   }
  }