
> [!NOTE]
> Due to TweenMax being deprecated, I have replaced it with GSAP3, making necessary additions and adjustments.

A total of four patterns of animations are created where elements lined up in a row flow from right to left or top to bottom, creating an infinite loop animation that spans the entire screen. The images flow infinitely without interruption. The code and demo site in this article are created to move from right to left.

※ The vendor prefixes are omitted in the code in this article.

## Goal

- Create an infinite loop animation where images flow from one end of the screen to the other.
- Creating an Infinite Loop Animation with CSS animation
- Creating an Infinite Loop Animation with CSS animation (Multiple Elements)
- Creating an Infinite Loop Animation with CSS animation (Text Elements)
- Using the jQuery plugin "GSAP"

## Creating an Infinite Loop Animation with CSS animation

Create a single image, such as a horizontally or vertically aligned image, of elements (group of images) that you want to move. Load the prepared image twice in HTML and wrap them in a single `div` `.

```html
<div class="loop_wrap">
  <img src="img.jpg" />
  <img src="img.jpg" />
</div>
```

To display the image as wide as the window, specify `width: 100vw;` and `overflow: hidden;` for the `div` that surrounds the entire content. Also, specify `display: flex;` to align the images horizontally. Set the height to your preferred height.

```css
.loop_wrap {
  display: flex;
  width: 100vw;
  height: 300px;
  overflow: hidden;
}

.loop_wrap img {
  width: auto;
  height: 100%;
}
```

To achieve the movement of flowing from one end to the other on the screen, use the `transform` property and change the distance of movement on the X-axis with `translateX`. Prepare two animations with different start and end points.

```css
@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
```

Apply the created animations to the elements you want to animate. Set the two animations created in HTML to each of the images loaded twice. At this time, set the `animation-duration` to the same value and set the `animation-delay` to half the duration for one of the images. To make it loop infinitely, specify `infinite` in the `animation` property. Use linear for the `animation-timing-function` to maintain a constant pace.

```css
.loop_wrap img:first-child {
  animation: loop 50s -25s linear infinite;
}

.loop_wrap img:last-child {
  animation: loop2 50s linear infinite;
}
```

### Reason for Loading Images Twice

Prepare two animations with different starting points and set the delay on one of the images. Let's illustrate the movement of the two images separately. Image 1 (green) moves from X-axis 100% to -100% and returns to 100%, repeatedly moving to -100%, while image 2 (yellow) moves from X-axis 0 to -200% and returns to 0, repeatedly moving to -200%. This allows the images to flow continuously without interruption.

※ If the image becomes smaller than the window width when resizing the window, a margin will occur during the loop, so for variable layouts that display images to fit the width of the window, additional measures are required.

![](./sample.jpg)

### Demo

[Creating an Infinite Loop Animation with CSS animation](https://demos.chocolat5.com/loop-image-animation/)

## Creating an Infinite Loop Animation with CSS animation (Multiple Elements)

It is also possible to loop individual elements, such as images or link elements, lined up like a gallery. Here, we will loop a collection of images+text, which also serves as a link element.

Divide the elements you want to loop into two groups. In the following example, the same content is loaded twice, but it is not necessary for the content of the two groups to be the same. Wrap the groups of elements in a single `div`.

```html
<div class="loop_wrap">
  <ul>
    <li>
      <a href="#"><img src="img_01.jpg" alt="" />CAR</a>
    </li>
    <li>
      <a href="#"><img src="img_02.jpg" alt="" />CITY</a>
    </li>
    <li>
      <a href="#"><img src="img_03.jpg" alt="" />TAXI</a>
    </li>
    <li>
      <a href="#"><img src="img_04.jpg" alt="" />NEON</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#"><img src="img_01.jpg" alt="" />CAR</a>
    </li>
    <li>
      <a href="#"><img src="img_02.jpg" alt="" />CITY</a>
    </li>
    <li>
      <a href="#"><img src="img_03.jpg" alt="" />TAXI</a>
    </li>
    <li>
      <a href="#"><img src="img_04.jpg" alt="" />NEON</a>
    </li>
  </ul>
</div>
```

The CSS animation is the same as the first example. Replace the `img` tags with `ul` tags. Details of the style settings, such as arranging them horizontally within the `ul`, are omitted. Please adjust as necessary.

If you want to loop link elements, they will flow like flowing somen noodles, so we'll make the animation pause when the mouse is over it to make it easier to click.

Use the `animation-play-state` property. Specify `paused` for the `hover` state of the `div` that surrounds the entire content. If specified for the `ul` that surrounds the group, the other group will continue to move without pausing when the mouse is not on it.

```css
.loop_wrap:hover ul {
  animation-play-state: paused;
}
```

### Demo

[Creating an Infinite Loop Animation with CSS animation (Multiple Elements)](https://demos.chocolat5.com/loop-image-animation/)

## Creating an Infinite Loop Animation with CSS animation (Text Elements)

It is possible to animate text only as well. Write the texts you want to loop inside `div` elements.

```html
<div class="loop_wrap">
  <div>How to make a loop animation.</div>
  <div>How to make a loop animation.</div>
  <div>How to make a loop animation.</div>
  <div>How to make a loop animation.</div>
  <div>How to make a loop animation.</div>
</div>
```

For the `div` elements that surround the text, set `flex: 0 0 auto` and `white-space: nowrap;` to prevent line breaks.

Adjust the text size and spacing between texts as needed.

```css
.loop_wrap div {
  flex: 0 0 auto;
  white-space: nowrap;
}
```

The animation is the same as in the case of images. Use `:nth-child(odd)` and `:nth-child(even)` to apply two different animations alternately.

```css
.loop_wrap div:nth-child(odd) {
  animation: loop 50s -25s linear infinite;
}

.loop_wrap div:nth-child(even) {
  animation: loop2 50s linear infinite;
}
```

### Demo

[Creating an Infinite Loop Animation with CSS animation (Text Elements)](https://demos.chocolat5.com/loop-image-animation/)

## Creating an Infinite Loop Animation with GSAP (TweenMax)

Create a loop using the JavaScript animation library [GSAP](https://gsap.com/).

Prepare an image that you want to loop horizontally, and load it in HTML.

```html
<div id="loop" class="loop_wrap">
  <img src="img.jpg" alt="" />
</div>
```

Later, duplicate the image with JavaScript and set the width so that the images are aligned. Use TweenMax to set the X-axis movement.

```css
.loop_wrap {
  display: -webkit-flex;
  display: flex;
  height: auto;
  overflow: hidden;
}

.loop_wrap > * {
  height: auto;
}
```

Animation settings utilize GSAP's [Timeline](https://gsap.com/docs/v3/GSAP/Timeline/) with the option 'repeat: -1' (infinite repeat). The horizontally flowing animation section is configured for X-axis movement using TweenMax.

Use the `tl.pause()` option of the Timeline to pause and resume the animation when the mouse is over or off.

```js
$(function () {
  const loop = document.getElementById("loop_js");

  // Create a Timeline
  const loopAnim = gsap.timeline({
    repeat: -1, // infinite repeat
  });

  // Define the loopItem as the image inside the div
  let loopItem = (window.innerWidth, loop.children[0]);

  // Set the width for the image and the div surrounding it
  loopItem.style.width = `${window.innerWidth}px`;
  loop.style.width = `${window.innerWidth * 3}px`;

  // Insert the duplicated image into the div
  loop.appendChild(loopItem.cloneNode(true));
  loop.appendChild(loopItem.cloneNode(true));

  // Animation settings
  loopAnim
    .to(loop, { duration: 100, ease: "power0.easeNone", xPercent: -66.6666 })
    .to(loop, { duration: 0, ease: "power0.easeNone", x: 0 });
});
```

### Demo

[Creating an Infinite Loop Animation with GSAP (TweenMax)](https://demos.chocolat5.com/loop-image-animation/)


Four Ways of Creating an Animation Loop in CSS, JavaScript

Tags