How to make list items scrollup animation look continuous/infinite

user_631651 0
Viewed 50

I have 3 list items that I am rotating upwards after every 3 seconds. I am doing it using transformY property. The problem is that when it reaches the last item it cycles back, giving effect of starting all over again.

How can I make this effect look continuous/infinite by keep rotating upwards even after last item?

setInterval(function() {
  var currActiveItem = $('.list span').css('transform');

  if (currActiveItem == "matrix(1, 0, 0, 1, 0, 0)") {
    $('.list span').css('transform', 'translateY(-67px)');
  } else if (currActiveItem == "matrix(1, 0, 0, 1, 0, -67)") {
    $('.list span').css('transform', 'translateY(-134px)');
  } else {
    $('.list span').css('transform', 'translateY(0)');
  }
}, 3000);
.transformed-z-0 {
  transform: translateZ(0);
}

.list {
  position: fixed;
  overflow: hidden;
  left: 0;
  width: 100%;
  height: 67px;
}

.list-item {
  display: block;
  height: 67px;
  transition: all 0.7s ease-in-out;
  transform: translateY(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<h1 class="transformed-z-0">
  <span class="list">
    <span class="list-item">1</span>
  <span class="list-item">2</span>
  <span class="list-item">3</span>
  </span>
  <br> Some more text
</h1>

css html jquery javascript
1 Answers

One way to do it can be :

  • clone the first element at the end of list (to have correct animation)
  • disable animation while you come to the true first element
  • restart animation like expected

    var firstElem = $('.list span').first().clone();
    $('.list').append(firstElem);
    
    setInterval(function(){
        var currActiveItem = $('.list span').css('transform');

        if(currActiveItem == "matrix(1, 0, 0, 1, 0, 0)") {
          $('.list span').removeClass('no-transition');
          $('.list span').css('transform', 'translateY(-67px)');
        }else if(currActiveItem == "matrix(1, 0, 0, 1, 0, -67)"){
          $('.list span').css('transform', 'translateY(-134px)');
        }else if(currActiveItem == "matrix(1, 0, 0, 1, 0, -134)"){
          $('.list span').css('transform', 'translateY(-201px)');
        }else {
          $('.list span').addClass('no-transition');
          $('.list span').css('transform', 'translateY(0)');
        }
      }, 3000);
    .transformed-z-0 {
        transform: translateZ(0);
      }

      .list {
        position: fixed;
        overflow: hidden;
        left: 0;
        width: 100%;
        height: 67px;
      }

      .list-item {
        display: block;
        height: 67px;
        transition: all 0.7s ease-in-out;
        transform: translateY(0);
      }
      
      .no-transition {
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
      }
<h1 class="transformed-z-0">
  <span class="list">
    <span class="list-item">1</span>
    <span class="list-item">2</span>
    <span class="list-item">3</span>
  </span>
  <br>
  Some more text
</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

user_30547220
Related