Horizontal Timeline

Horizontal Timeline

An easy to customize, horizontal timeline powered by CSS and jQuery.

Nucleo icons

Sponsored by Nucleo, a free application to collect, customize and export all your icons as icon font and SVG symbols. Made by the CodyHouse folks!

All the resources available on CodyHouse are released under the BSD-3-Clause license. You can support our project with a Paypal donation 🙌

Our vertical timeline is so far one of the most popular resources on CodyHouse. Many of you asked us to include a horizontal timeline as well. Here it is!

Building a horizontal timeline was a bit tricky, because you can’t rely on the vertical (more intuitive) scrolling behaviour. We decided to separate timeline and events, with the first one working like a slider, while the second one occupying the full width and showing a single event at a time.

Creating the structure

The HTML structure is composed by two main ordered lists: the first one containing the timeline dates and the second one the events.
An additional ul.cd-timeline-navigation has been used for the navigation arrows, and a span.filling-line to create the filling effect when a new event is selected.

<section class="cd-horizontal-timeline">
   <div class="timeline">
      <div class="events-wrapper">
         <div class="events">
            <ol>
               <li><a href="#0" data-date="16/01/2014" class="selected">16 Jan</a></li>
               <li><a href="#0" data-date="28/02/2014">28 Feb</a></li>
               <!-- other dates here -->
            </ol>

            <span class="filling-line" aria-hidden="true"></span>
         </div> <!-- .events -->
      </div> <!-- .events-wrapper -->

      <ul class="cd-timeline-navigation">
         <li><a href="#0" class="prev inactive">Prev</a></li>
         <li><a href="#0" class="next">Next</a></li>
      </ul> <!-- .cd-timeline-navigation -->
   </div> <!-- .timeline -->

   <div class="events-content">
      <ol>
         <li class="selected" data-date="16/01/2014">
            <h2>Horizontal Timeline</h2>
            <em>January 16th, 2014</em>
            <p> 
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
            </p>
         </li>

         <li data-date="28/02/2014">
            <!-- event description here -->
         </li>
<!-- other descriptions here --> </ol> </div> <!-- .events-content --> </section>

Adding style & Guidelines

Let's start from the events style: all the items are translated to the left, outside the viewport (translateX(-100%)); the .selected class is added to the visible event item to move it back into the viewport (translateX(0)).

4 classes have been used to create the slider animation: the .enter-right/.enter-left classes added to the selected event item entering the viewport from right/left, and the .leave-right/.leave-left classes added to the event item moving to the right/left while leaving the viewport. These classes are used to apply two different CSS animations: cd-enter-right (for the .enter-right and .leave-left class) and cd-enter-left (for the .enter-left and .leave-right class).

.cd-horizontal-timeline .events-content {
  position: relative;
}
.cd-horizontal-timeline .events-content li {
  position: absolute;
  z-index: 1;
  width: 100%;
  left: 0;
  top: 0;
  transform: translateX(-100%);
  opacity: 0;
  animation-duration: 0.4s;
  animation-timing-function: ease-in-out;
}
.cd-horizontal-timeline .events-content li.selected {
  /* visible event content */
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateX(0);
}
.cd-horizontal-timeline .events-content li.enter-right, 
.cd-horizontal-timeline .events-content li.leave-right {
  animation-name: cd-enter-right;
}
.cd-horizontal-timeline .events-content li.enter-left, 
.cd-horizontal-timeline .events-content li.leave-left {
  animation-name: cd-enter-left;
}
.cd-horizontal-timeline .events-content li.leave-right, 
.cd-horizontal-timeline .events-content li.leave-left {
  animation-direction: reverse;
}
@keyframes cd-enter-right {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes cd-enter-left {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

About the timeline: the position of each date along the timeline is set using jQuery. Dates are not equally distributed along the timeline, but the distance between a date and the next one is proportional to the difference between these dates.

First of all, in the main.js file, we set a minimum distance between two consecutive dates, using the eventsMinDistance variable; in our case, we set eventsMinDistance = 60 (so the minimum distance will be 60px). Then we evaluate all the differences between a date and the following one; to do that we use the data-date attribute added to each date. The minimum difference is then used as a reference to evaluate the distances between two consecutive dates.

For example, let's suppose the minimum found difference is 5 days; that means that the distance, along the timeline, between two dates separated by a lapse of 5days will  be 60px, while the one between two events separated by a lapse of 10 days will be 120px.

About the date format: we used the date format DD/MM/YYYY, but you can also add time, if you need to take that into account. There are 3 different date formats you can use:

Last note: the data-date used for a timeline date has to be set to the respective event item too (list items inside the .events-content element). This way, when a user selects a new date along the timeline, the corresponding event item can be shown.

Join our newsletter

Get our monthly recap with the latest CodyHouse news