Kevin Powell - Community•14mo ago

How to make this animation have infinite loop

https://codepen.io/stressunfit/pen/QWzPOMR Right now this animation is rolling back after a iteration. i want it to keep going up without rolling back down.

stressunfit

CodePen

QWzPOMR

...

8 Replies

Jochem•14mo ago

You have to fake it. Put a second instance of the first element at the bottom of the list, translate to that like you would for the others, then snap back to the front instantly and continue the animation from there something like this

<ol class="listContainer">
  <li class="roomName">
    <span>Bedroom wall</span>
  </li>
  <li class="roomName">
    <span>Kidsroom wall</span>
  </li>
  <li class="roomName">
    <span>Livingroom wall</span>
  </li>
  <li class="roomName">
    <span>Bedroom wall</span>
  </li>
</ol>

<ol class="listContainer">
  <li class="roomName">
    <span>Bedroom wall</span>
  </li>
  <li class="roomName">
    <span>Kidsroom wall</span>
  </li>
  <li class="roomName">
    <span>Livingroom wall</span>
  </li>
  <li class="roomName">
    <span>Bedroom wall</span>
  </li>
</ol>

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.listContainer {
  height: 88px;
  overflow: hidden;
}

.roomName {
  font-size: 65px;
  font-weight: 800;
  list-style: none;
  animation: slide-up 6s infinite;
  animation-delay: 2s;
}

@keyframes slide-up {

  0% {
    transform: translateY(0%);
    /* animation-delay: 1s; */
  }
  33%,
  33% {
    transform: translateY(-100%);
    /* animation-delay: 1s; */
  }
  66%,
  66% {
    transform: translateY(-200%);
    /* animation-delay: 1s; */
  }
  100%,
  100% {
    transform: translateY(-300%);
    /* animation-delay: 1s; */
  }
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.listContainer {
  height: 88px;
  overflow: hidden;
}

.roomName {
  font-size: 65px;
  font-weight: 800;
  list-style: none;
  animation: slide-up 6s infinite;
  animation-delay: 2s;
}

@keyframes slide-up {

  0% {
    transform: translateY(0%);
    /* animation-delay: 1s; */
  }
  33%,
  33% {
    transform: translateY(-100%);
    /* animation-delay: 1s; */
  }
  66%,
  66% {
    transform: translateY(-200%);
    /* animation-delay: 1s; */
  }
  100%,
  100% {
    transform: translateY(-300%);
    /* animation-delay: 1s; */
  }
}

Jus Sus || 💀OP•14mo ago

@Jochem how did it span back. i am unable to figure that out

Jochem•14mo ago

it runs through the list 0% to 100%, then goes back to 0%. You don't have to restore the animation state, and when you don't it just snaps back instantly as soon as the animation to to the last item (the fake copy of the first item) is done, the animation snaps back to show the actual first item, then animates to the actual second item

Jus Sus || 💀OP•14mo ago

@Jochem Niceee!. Thanks for taking your time out to solve my issue🫡.

Jochem•14mo ago

no worries, glad to help 🙂

Jus Sus || 💀OP•14mo ago

@Jochem There is a issue. when it snaps back in. there is a glitch for a second. like it disappears and reappears: https://www.veed.io/view/5edf2757-87df-4c30-8473-6f31c9043ee0?panel=share. 8th second in the video. when it comes back to bedroom text

Srajan

VEED

VEED - Screen Recording - Oct 13, 2023

Make stunning videos with a single click. Cut, trim, crop, add subtitles and more. Online, no account needed. Try it now, free. VEED

Jochem•14mo ago

I think it's because you're animating the li's and not the ol. The animations might not be starting at exactly the same moment or something. I changed the animation to run on the ol instead, changed the translation percentages, and added a wrapper div that got the original height and overflow styling you had on the OL, and I haven't seen it glitch since: https://codepen.io/jochemm/pen/LYMveZr?editors=1100

Jochem

CodePen

LYMveZr

...

Jus Sus || 💀OP•14mo ago

@Jochem Yea it is working fine now!. Thanks....

Gaming

Programming

How to make this animation have infinite loop