Horizontal Scrolling Timeline CSS

Are you looking for a horizontal scrolling timeline design for your website? Look no further! This CSS code provides a sleek and interactive timeline layout that allows you to showcase your events, milestones, or any other chronological information. With the help of this code, you can create an engaging user experience and present your content in a visually appealing manner.

The code includes CSS styles for the timeline structure, including gradient backgrounds, scrollable functionality, and responsive design for various screen sizes. Simply copy and paste the code into your project, and customize it to fit your needs.

How to Create Horizontal Scrolling Timeline using CSS

1. First, create the HTML structure for the timeline as follows:

<section class="section intro">
  <div class="container">
    <h1>Horizontal Timeline v2 &rarr;</h1>
    <p>Timeline v1 <a href="https://codepen.io/tutsplus/full/ZKpNwm" target="_blank">here</a></p>
  </div>
</section>

<section class="timeline">
  <div class="info">
    <img width="50" height="50" src="https://assets.codepen.io/210284/face.svg" alt="" />
    <h2>Company History</h2>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
    <p>
        <a href="">Learn more &gt;</a>
    </p>
  </div>

  <ol>
    <li>
      <div>
        <time>1934</time> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos.
      </div>
    </li>
    <li>
      <div>
        <time>1937</time> Proin quam velit, efficitur vel neque vitae, rhoncus commodo mi. Suspendisse finibus mauris et bibendum molestie. Aenean ex augue, varius et pulvinar in, pretium non nisi.
      </div>
    </li>
    <li>
      <div>
        <time>1940</time> Proin iaculis, nibh eget efficitur varius, libero tellus porta dolor, at pulvinar tortor ex eget ligula. Integer eu dapibus arcu, sit amet sollicitudin eros.
      </div>
    </li>
    <li>
      <div>
        <time>1943</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
      </div>
    </li>
    <li>
      <div>
        <time>1946</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
      </div>
    </li>
    <li>
      <div>
        <time>1956</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
      </div>
    </li>
    <li>
      <div>
        <time>1957</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
      </div>
    </li>
    <li>
      <div>
        <time>1967</time> Aenean condimentum odio a bibendum rhoncus. Ut mauris felis, volutpat eget porta faucibus, euismod quis ante.
      </div>
    </li>
    <li>
      <div>
        <time>1977</time> Vestibulum porttitor lorem sed pharetra dignissim. Nulla maximus, dui a tristique iaculis, quam dolor convallis enim, non dignissim ligula ipsum a turpis.
      </div>
    </li>
    <li>
      <div>
        <time>1985</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
      </div>
    </li>
    <li>
      <div>
        <time>2000</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
      </div>
    </li>
    <li>
      <div>
        <time>2005</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
      </div>
    </li>
    <li></li>
  </ol>

</section>

<footer class="page-footer">
  <span>made by </span>
  <a href="https://georgemartsoukos.com/" target="_blank">
    <img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
  </a>
</footer>

2. Use the following CSS code to style the horizontal timeline.

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");

:root {
  --white: #fff;
  --black: #323135;
  --crystal: #a8dadd;
  --columbia-blue: #cee9e4;
  --midnight-green: #01565b;
  --yellow: #e5f33d;
  --timeline-gradient: rgba(206, 233, 228, 1) 0%, rgba(206, 233, 228, 1) 50%,
    rgba(206, 233, 228, 0) 100%;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button {
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

body, .cd__main {
  font: normal 16px/1.5 "Inter", sans-serif;
  background: var(--columbia-blue) !important;
  color: var(--black);
  margin-bottom: 50px;
}

/* .section SECTION
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.section {
  padding: 50px 0;
}

.section .container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.section h1 {
  font-size: 2.5rem;
  line-height: 1.25;
}

.section h2 {
  font-size: 1.3rem;
}

/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline {
  position: relative;
  white-space: nowrap;
  max-width: 1400px;
  padding: 0 10px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 320px auto;
  grid-gap: 20px;
}

.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 30px;
  width: 100px;
  z-index: 2;
}

.timeline::after {
  right: 0;
  background: linear-gradient(270deg, var(--timeline-gradient));
}

.timeline::before {
  left: 340px;
  background: linear-gradient(90deg, var(--timeline-gradient));
}

.timeline .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 40px;
  color: var(--white);
  background: var(--midnight-green);
  white-space: normal;
  border-radius: 10px;
}

.timeline .info img {
  margin-bottom: 20px;
}

.timeline .info p {
  margin-top: 10px;
  color: var(--crystal);
}

.timeline .info a {
  text-decoration: none;
}

.timeline ol::-webkit-scrollbar {
  height: 12px;
}

.timeline ol::-webkit-scrollbar-thumb,
.timeline ol::-webkit-scrollbar-track {
  border-radius: 92px;
}

.timeline ol::-webkit-scrollbar-thumb {
  background: var(--midnight-green);
}

.timeline ol::-webkit-scrollbar-track {
  background: var(--yellow);
}

.timeline ol {
  font-size: 0;
  padding: 250px 0;
  transition: all 1s;
  overflow-x: scroll;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
  scrollbar-color: var(--yellow) var(--midnight-green);
}

.timeline ol li {
  position: relative;
  display: inline-block;
  list-style-type: none;
  width: 160px;
  height: 5px;
  background: var(--white);
  scroll-snap-align: start;
}

.timeline ol li:last-child {
  width: 340px;
}

.timeline ol li:not(:first-child) {
  margin-left: 14px;
}

.timeline ol li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  bottom: 0;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--midnight-green);
  z-index: 1;
}

.timeline ol li div {
  position: absolute;
  left: calc(100% + 7px);
  width: 280px;
  padding: 15px;
  font-size: 1rem;
  white-space: normal;
  color: var(--black);
  background: var(--white);
  border-radius: 0 10px 10px 10px;
}

.timeline ol li div::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
}

.timeline ol li:nth-child(odd) div {
  top: -16px;
  transform: translateY(-100%);
  border-radius: 10px 10px 10px 0;
}

.timeline ol li:nth-child(odd) div::before {
  top: 100%;
  border-width: 8px 8px 0 0;
  border-color: var(--white) transparent transparent transparent;
}

.timeline ol li:nth-child(even) div {
  top: calc(100% + 16px);
}

.timeline ol li:nth-child(even) div::before {
  top: -8px;
  border-width: 8px 0 0 8px;
  border-color: transparent transparent transparent var(--white);
}

.timeline time {
  display: block;
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 8px;
  color: var(--midnight-green);
}

/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 800px) {
  .timeline {
    display: block;
  }

  .timeline::before,
  .timeline::after {
    width: 50px;
  }

  .timeline::before {
    left: 0;
  }

  .timeline .info {
    display: none;
  }
}

/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 5px;
  z-index: 2;
  color: var(--black);
  background: var(--columbia-blue);
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}

3. Finally, add the following JavaScript code to your project. It ensures that all the timeline elements have the same height, creating a visually consistent and pleasing layout.

// VARIABLES
const elH = document.querySelectorAll(".timeline li > div");

// START
window.addEventListener("load", init);

function init() {
  setEqualHeights(elH);
}

// SET EQUAL HEIGHTS
function setEqualHeights(el) {
  let counter = 0;
  for (let i = 0; i < el.length; i++) {
    const singleHeight = el[i].offsetHeight;

    if (counter < singleHeight) {
      counter = singleHeight;
    }
  }

  for (let i = 0; i < el.length; i++) {
    el[i].style.height = `${counter}px`;
  }
}

Customization Guide

To customize the timeline, you can make modifications to the provided CSS code. Here are some ways you can customize the timeline:

1. Adjust Colors: You can change the colors used in the timeline by modifying the CSS variables defined in the :root selector. Update the values assigned to --columbia-blue, --midnight-green, --yellow, and other variables to match your desired color scheme.
2. Change Fonts: If you want to use a different font for the timeline, you can update the @import statement in the CSS code to import a different font from Google Fonts. Replace the URL with the URL of the font you want to use, and update the font-family property in the body, .cd__main selector to use the new font.
3. Adjust Dimensions: You can modify the dimensions of the timeline container and its elements to fit your design requirements. Adjust the width, max-width, padding, and other properties in the .timeline, .timeline ol, .timeline ol li, and other relevant selectors to change the size and spacing of the timeline components.
4. Customize Styling: Feel free to customize the overall styling of the timeline by modifying the CSS properties of the relevant selectors. You can change background colors, font sizes, line heights, border-radius, padding, and other visual properties to match your design preferences.
5. Responsive Design: The provided code includes a media query that applies styles for screens with a maximum width of 800px. You can modify this media query or add additional media queries to adapt the timeline’s appearance for different screen sizes. Adjust the styles within the media query to ensure the timeline remains visually appealing and functional on smaller devices.

That’s all! hopefully, you have successfully created a horizontal scrolling timeline using CSS. If you have any questions or suggestions, feel free to comment below.