Infinite Scroll Animation Using HTML, CSS & JavaScript

5 min read
Infinite Scroll Animation Demo

Project Overview

This project showcases a captivating Infinite Scroll Animation, implemented using HTML, CSS, and React (via JavaScript). It creates a continuous, looping display of tags or items, ideal for showcasing skills, keywords, or product features in an engaging and visually dynamic manner. The animation is designed to be content-independent, bi-directional, and highly customizable.

Key features include a responsive layout that adapts to different screen sizes, a smooth looping animation powered purely by CSS, and a React component structure that allows for easy management and randomization of tags and their colors. The animation direction and duration are customizable, offering flexibility for various design needs. A subtle fade effect is applied at the edges to enhance the visual continuity of the infinite scroll.

HTML Structure

The HTML structure for the Infinite Scroll Animation is minimal, serving primarily as a container for the React application. The `body` element includes a `div` with the class `app`, which is the root element where the React components will be rendered. Inside the `app` div, there's a `header` section for the title and description, and a `div` with the class `tag-list` that will house the animated tag sliders. A `div` with the class `fade` is used for the visual fade effect at the edges of the scrolling content. This simple HTML setup allows React to take control of rendering the dynamic content and animations.


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title> Infinite Scroll Animation | Coders_Section </title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->

<!-- partial -->
  <script type="module" src="./script.js"></script>

</body>
</html>

CSS Styling

The CSS for the Infinite Scroll Animation is primarily responsible for creating the continuous looping effect and styling the tags. It sets the basic font and background for the `body` and centers the content within the `app` container. The `tag-list` creates a flexible column layout for the rows of tags. The core of the animation lies in the `.loop-slider .inner` styles, which define the `loop` keyframe animation for horizontal translation. Custom CSS variables (`--direction` and `--duration`) are used to control the animation's behavior. Individual `tag` elements are styled with background colors, padding, rounded corners, and subtle box shadows. A `fade` class creates a gradient overlay at the edges of the `tag-list` to give the illusion of tags appearing and disappearing seamlessly.


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;
}
header h1 {
  font-weight: 600;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
  header h1 {
    font-size: 3rem;
  }
}
header p {
  color: #94a3b8;
}

.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;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2), 0 0.1rem 0.5rem rgba(0, 0, 0, 0.3), 0 0.2rem 1.5rem rgba(0, 0, 0, 0.4);
}
.tag 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%);
  }
}

JavaScript

The JavaScript for the Infinite Scroll Animation is built using React, providing a modular and dynamic approach to generating the animated tag lists. It defines constants for `COLORS`, `TAGS`, `DURATION`, `ROWS`, and `TAGS_PER_ROW` to control the content and animation properties. Helper functions `random` and `shuffle` are used to randomize the duration of each loop and the order of tags within each row. The `InfiniteLoopSlider` functional component renders a looping container that applies CSS animation properties using custom CSS variables. The `Tag` component renders individual tags with a leading '#' symbol and a customizable color. The main `App` component orchestrates the entire display, generating multiple `InfiniteLoopSlider` instances, each populated with a shuffled subset of tags. Finally, `ReactDOM.render` mounts the `App` component to the `document.body`, making the animation visible on the webpage.



import React from 'https://cdn.skypack.dev/react';
import ReactDOM from 'https://cdn.skypack.dev/react-dom';

const COLORS = ['#bbf7d0', '#99f6e4', '#bfdbfe', '#ddd6fe', '#f5d0fe', '#fed7aa', '#fee2e2'];
const TAGS = ['HTML', 'CSS', 'JavaScript', 'Typescript', 'Tailwind', 'React', 'Next.js', 'Gatsby', 'UI/UX', 'SVG', 'animation', 'webdev'];
const DURATION = 15000;
const ROWS = 5;
const TAGS_PER_ROW = 5;

const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
const shuffle = arr => [...arr].sort(() => .5 - Math.random());

const InfiniteLoopSlider = ({ children, duration, reverse = false }) => {
  return /*#__PURE__*/(
    React.createElement("div", { className: "loop-slider", style: {
        '--duration': `${duration}ms`,
        '--direction': reverse ? 'reverse' : 'normal' } }, /*#__PURE__*/

    React.createElement("div", { className: "inner" },
    children,
    children)));



};

const Tag = ({ text, color }) => /*#__PURE__*/
React.createElement("div", { className: "tag", style: { '--color': color } }, /*#__PURE__*/React.createElement("span", null, "#"), " ", text);


const App = () => /*#__PURE__*/
React.createElement("div", { className: "app" }, /*#__PURE__*/
React.createElement("header", null, /*#__PURE__*/
React.createElement("h1", null, "Infinite Scroll Animation"), /*#__PURE__*/
React.createElement("p", null, "CSS only, content independent, bi-directional, customizable")), /*#__PURE__*/

React.createElement("div", { className: "tag-list" },
[...new Array(ROWS)].map((_, i) => /*#__PURE__*/
React.createElement(InfiniteLoopSlider, { key: i, duration: random(DURATION - 5000, DURATION + 5000), reverse: i % 2 },
shuffle(TAGS).slice(0, TAGS_PER_ROW).map((tag) => /*#__PURE__*/
React.createElement(Tag, { text: tag, key: tag })))), /*#__PURE__*/



React.createElement("div", { className: "fade" })));




ReactDOM.render( /*#__PURE__*/
React.createElement(App, null),
document.body);

Live Demo: Infinite Scroll Animation

Watch a live demonstration of the Infinite Scroll Animation below.

Final Thoughts

This Infinite Scroll Animation project offers a visually appealing and efficient way to display lists of items, such as skills, technologies, or product features. By leveraging CSS animations and React's component-based structure, it provides a smooth, continuous loop that enhances user engagement without requiring constant user interaction. Its customizability makes it adaptable for various web design needs.

You can easily customize this component by:

  • Modifying the `TAGS` array to include your own content.
  • Adjusting `DURATION` to control the animation speed.
  • Changing `ROWS` and `TAGS_PER_ROW` to alter the layout and density of the tags.
  • Experimenting with different `COLORS` or adding custom styling to the `Tag` component.

Pro Tip

For more complex animations or interactions, consider integrating a dedicated animation library like GSAP (GreenSock Animation Platform) with React. This can provide finer control over timing, easing, and sequential animations, allowing for even more sophisticated visual effects.

Ready to Use This Project?

Click the button below to download the full source code. Download will be ready in 10 seconds.

Stay Updated

Receive coding tips and resources updates. No spam.

We respect your privacy. Unsubscribe at any time.