Infinite Scroll Animation

Learn how to create a Infinite Scroll Animation using CSS. This beginner-friendly tutorial will guide you through the code and its functionality.

Code Snippets

1. HTML (index.html)

<div class="app">
  <header>
    <h1>Infinite Scroll Animation</h1>
    <p>CSS only, content independent, bi-directional, customizable</p>
    <p>This is the React-less version of <a href="https://codepen.io/ykadosh/pen/KKezJzz">this pen</a></p>
  </header>
  <div class="tag-list">
    <div class="loop-slider" style="--duration:15951ms; --direction:normal;">
      <div class="inner">
        <div class="tag"><span>#</span> JavaScript</div>
        <div class="tag"><span>#</span> webdev</div>
        <div class="tag"><span>#</span> Typescript</div>
        <div class="tag"><span>#</span> Next.js</div>
        <div class="tag"><span>#</span> UI/UX</div>
        <!-- duplicated content -->
        <div class="tag"><span>#</span> JavaScript</div>
        <div class="tag"><span>#</span> webdev</div>
        <div class="tag"><span>#</span> Typescript</div>
        <div class="tag"><span>#</span> Next.js</div>
        <div class="tag"><span>#</span> UI/UX</div>
      </div>
    </div>
    <div class="loop-slider" style="--duration:19260ms; --direction:reverse;">
      <div class="inner">
        <div class="tag"><span>#</span> webdev</div>
        <div class="tag"><span>#</span> Gatsby</div>
        <div class="tag"><span>#</span> JavaScript</div>
        <div class="tag"><span>#</span> Tailwind</div>
        <div class="tag"><span>#</span> Typescript</div>
        <!-- duplicated content -->
        <div class="tag"><span>#</span> webdev</div>
        <div class="tag"><span>#</span> Gatsby</div>
        <div class="tag"><span>#</span> JavaScript</div>
        <div class="tag"><span>#</span> Tailwind</div>
        <div class="tag"><span>#</span> Typescript</div>
      </div>
    </div>
    <div class="loop-slider" style="--duration:10449ms; --direction:normal;">
      <div class="inner">
        <div class="tag"><span>#</span> animation</div>
        <div class="tag"><span>#</span> Tailwind</div>
        <div class="tag"><span>#</span> React</div>
        <div class="tag"><span>#</span> SVG</div>
        <div class="tag"><span>#</span> HTML</div>
        <!-- duplicated content -->
        <div class="tag"><span>#</span> animation</div>
        <div class="tag"><span>#</span> Tailwind</div>
        <div class="tag"><span>#</span> React</div>
        <div class="tag"><span>#</span> SVG</div>
        <div class="tag"><span>#</span> HTML</div>
      </div>
    </div>
    <div class="loop-slider" style="--duration:16638ms; --direction:reverse;">
      <div class="inner">
        <div class="tag"><span>#</span> Gatsby</div>
        <div class="tag"><span>#</span> HTML</div>
        <div class="tag"><span>#</span> CSS</div>
        <div class="tag"><span>#</span> React</div>
        <div class="tag"><span>#</span> Next.js</div>
        <!-- duplicated content -->
        <div class="tag"><span>#</span> Gatsby</div>
        <div class="tag"><span>#</span> HTML</div>
        <div class="tag"><span>#</span> CSS</div>
        <div class="tag"><span>#</span> React</div>
        <div class="tag"><span>#</span> Next.js</div>
      </div>
    </div>
    <div class="loop-slider" style="--duration:15936ms; --direction:normal;">
      <div class="inner">
        <div class="tag"><span>#</span> Next.js</div>
        <div class="tag"><span>#</span> React</div>
        <div class="tag"><span>#</span> webdev</div>
        <div class="tag"><span>#</span> Typescript</div>
        <div class="tag"><span>#</span> Gatsby</div>
        <!-- duplicated content -->
        <div class="tag"><span>#</span> Next.js</div>
        <div class="tag"><span>#</span> React</div>
        <div class="tag"><span>#</span> webdev</div>
        <div class="tag"><span>#</span> Typescript</div>
        <div class="tag"><span>#</span> Gatsby</div>
      </div>
    </div>
    <div class="fade"></div>
  </div>
</div>

2. CSS (styles.css)

body {
  font-family: 'Montserrat', sans-serif;
  background: #1e293b;
  color: #f8fafc;
}

.app {
  min-width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

header { 
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1rem;
  text-align: center;
  
  h1 {
    font-weight: 600;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    
    @media (min-width: 768px) {
      font-size: 3rem;
    }
  }
  
  p {
    color: #94a3b8;
    margin-bottom: 0.5rem;
  }
  
  a {
    color: #7393c1;
  }
}

.tag-list {
  width: 30rem;
  max-width: 90vw;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: 1rem 0;
  position: relative;
  padding: 1.5rem 0;
  overflow: hidden;
}

.loop-slider {
  .inner {
    display: flex;
    width: fit-content;
    animation-name: loop;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: var(--direction);
    animation-duration: var(--duration);
  }
}

.tag {
  display: flex;
  align-items: center;
  gap: 0 0.2rem;
  color: #e2e8f0;
  font-size: 0.9rem;
  background-color: #334155;
  border-radius: 0.4rem;
  padding: 0.7rem 1rem;
  margin-right: 1rem; // Must used margin-right instead of gap for the loop to be smooth
  box-shadow: 
    0 0.1rem 0.2rem rgb(0 0 0 / 20%),
    0 0.1rem 0.5rem rgb(0 0 0 / 30%),
    0 0.2rem 1.5rem rgb(0 0 0 / 40%);
  
  span {
    font-size: 1.2rem;
    color: #64748b;
  }
}

.fade {
  pointer-events: none;
  background: linear-gradient(90deg, #1e293b, transparent 30%, transparent 70%, #1e293b);
  position: absolute;
  inset: 0;
}

@keyframes loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

Explanation

• @keyframes loop: Defines a continuous horizontal sliding animation. At 0%, the content is at its starting position, and at 100%, it has moved to the left by 50%.
• .app: This class centers all the content both vertically and horizontally on the page using flexbox.
• header: Styles the header section with a column layout, and it uses media queries to make the title font size responsive.
• .tag: This class gives tags a rounded, shadowed appearance with a dark background and spacing for smooth animations.

How it Works:

• HTML: Contains structured elements, such as div containers for .app, .tag-list, and .loop-slider, to organize the page layout.
• CSS:
  • The @keyframes rule animates the slider to loop continuously.
  • The .app class applies flexbox properties to center the content.
  • The .tag class styles the tags with padding, shadows, and background color.
  • The .fade class creates a gradient overlay for a fading effect.

Instructions to Use:

1. Create two files: One for HTML (e.g., index.html) and one for CSS (e.g., styles.css).
2. Link them: Make sure the HTML file links to the CSS file using the <link rel="stylesheet" href="styles.css"> tag in the <head> section.
3. Open the HTML file: Open index.html in a browser to see the bouncing ball animation in action.

Try It Yourself

Copy the code above and paste it into your HTML or CSS editor to experiment with the animation.

Demo

Check out the animation in action: View on Instagram