Constructing a Horizontal Timeline With CSS and JavaScript

1. HTML Markup

The markup is equivalent to the markup we outlined for the vertical timeline, aside from three small issues:

We use an ordered listing as a substitute of an unordered listing as that’s extra semantically right.

There’s an additional listing merchandise (the final one) that’s empty. In an upcoming part, we’ll talk about the explanation.

There’s an additional factor (i.e. .arrows) that’s accountable for the timeline navigation.

Right here’s the required markup:

<part class="timeline">
  <ol>
    <li>
      <div>
        <time>1934</time>
        Some content material right here
      </div>
    </li>
     
    <!-- extra listing gadgets right here -->
    
    <li></li>
  </ol>
  
  <div class="arrows">
    <button class="arrow arrow__prev disabled" disabled>
      <img src="arrow_prev.svg" alt="prev timeline arrow">
    </button>
    <button class="arrow arrow__next">
      <img src="arrow_next.svg" alt="subsequent timeline arrow">
    </button>
  </div>
</part>

The preliminary state of the timeline appears like this:

2. Including Preliminary CSS Kinds

After some primary font types, coloration types, and so on. which I’ve omitted right here for the sake of simplicity, we specify some structural CSS guidelines:

.timeline {
  white-space: nowrap;
  overflow-x: hidden;
}

.timeline ol {
  font-size: 0;
  width: 100vw;
  padding: 250px 0;
  transition: all 1s;
}

.timeline ol li {
  place: relative;
  show: inline-block;
  list-style-type: none;
  width: 160px;
  peak: 3px;
  background: #fff;
}

.timeline ol li:last-child {
  width: 280px;
}

.timeline ol li:not(:first-child) {
  margin-left: 14px;
}

.timeline ol li:not(:last-child)::after {
  content material: '';
  place: absolute;
  prime: 50%;
  left: calc(100% + 1px);
  backside: 0;
  width: 12px;
  peak: 12px;
  rework: translateY(-50%);
  border-radius: 50%;
  background: #F45B69;
}

Most significantly right here, you’ll discover two issues:

We assign massive prime and backside paddings to the listing. Once more, we’ll clarify why that occurs within the subsequent part.

As you’ll discover within the following demo, at this level, we can not see all of the listing gadgets as a result of the listing has width: 100vw and its mum or dad has overflow-x: hidden. This successfully “masks” the listing gadgets. Due to the timeline navigation, nevertheless, we’ll be capable of navigate by means of the gadgets later.

With these guidelines in place, right here’s the present state of the timeline (with none precise content material, to maintain issues clear):

3. Timeline Component Kinds

At this level we’ll model the div parts (we’ll name them “timeline parts” any longer) that are a part of the listing gadgets in addition to their ::earlier than pseudo-elements.

Moreover, we’ll use the :nth-child(odd) and :nth-child(even) CSS pseudo-classes to distinguish the types for the odd and even divs.

Listed here are the widespread types for the timeline parts:

.timeline ol li div {
  place: absolute;
  left: calc(100% + 7px);
  width: 280px;
  padding: 15px;
  font-size: 1rem;
  white-space: regular;
  coloration: black;
  background: white;
}

.timeline ol li div::earlier than {
  content material: '';
  place: absolute;
  prime: 100%;
  left: 0;
  width: 0;
  peak: 0;
  border-style: strong;
}

Then some types for the odd ones:

.timeline ol li:nth-child(odd) div {
  prime: -16px;
  rework: translateY(-100%);
}

.timeline ol li:nth-child(odd) div::earlier than {
  prime: 100%;
  border-width: 8px 8px 0 0;
  border-color: white clear clear clear;
}

And eventually some types for the even ones:

.timeline ol li:nth-child(even) div {
  prime: calc(100% + 16px);
}

.timeline ol li:nth-child(even) div::earlier than {
  prime: -8px;
  border-width: 8px 0 0 8px;
  border-color: clear clear clear white;
}

Right here’s the brand new state of the timeline, with content material added once more:

As you’ve most likely observed, the timeline parts are completely positioned. Meaning they’re faraway from the conventional doc movement. With that in thoughts, so as to be certain that the entire timeline seems, we now have to set massive prime and backside padding values for the listing. If we don’t apply any paddings, the timeline might be cropped:

How the timeline looks like without paddings

It’s now time to model the navigation buttons. Do not forget that by default we disable the earlier arrow and provides it the category of disabled.

Listed here are the related CSS types:

.timeline .arrows {
  show: flex;
  justify-content: heart;
  margin-bottom: 20px;
}

.timeline .arrows .arrow__prev {
  margin-right: 20px;
}

.timeline .disabled {
  opacity: .5;
}

.timeline .arrows img {
  width: 45px;
  peak: 45px;
}

The foundations above give us this timeline:

5. Including Interactivity

The essential construction of the timeline is prepared. Let’s add some interactivity to it!

Variables

First issues first, we arrange a bunch of variables that we’ll use later.

const timeline = doc.querySelector(".timeline ol"),
  elH = doc.querySelectorAll(".timeline li > div"),
  arrows = doc.querySelectorAll(".timeline .arrows .arrow"),
  arrowPrev = doc.querySelector(".timeline .arrows .arrow__prev"),
  arrowNext = doc.querySelector(".timeline .arrows .arrow__next"),
  firstItem = doc.querySelector(".timeline li:first-child"),
  lastItem = doc.querySelector(".timeline li:last-child"),
  xScrolling = 280,
  disabledClass = "disabled";

Initializing Issues

When all web page property are prepared, the init perform known as.

1	window.addEventListener("load", init);

This perform triggers 4 sub-functions:

perform init() {
  setEqualHeights(elH);
  animateTl(xScrolling, arrows, timeline);
  setSwipeFn(timeline, arrowPrev, arrowNext);
  setKeyboardFn(arrowPrev, arrowNext);
}

As we’ll see in a second, every of those capabilities accomplishes a sure process.

Equal-Top Timeline Parts

When you bounce again to the final demo, you’ll discover that the timeline parts don’t have equal heights. This doesn’t have an effect on the principle performance of our timeline, however you may choose it if all parts had the identical peak. To realize this, we may give them both a set peak through CSS (straightforward answer) or a dynamic peak that corresponds to the peak of the tallest factor through JavaScript.

The second choice is extra versatile and secure, so right here’s a perform that implements this conduct:

perform setEqualHeights(el) {
  let counter = 0;
  for (let i = 0; i < el.size; i++) {
    const singleHeight = el[i].offsetHeight;
    
    if (counter < singleHeight) {
      counter = singleHeight;
    }
  }
  
  for (let i = 0; i < el.size; i++) {
    el[i].model.peak = `${counter}px`;
  }
}

This perform retrieves the peak of the tallest timeline factor and units it because the default peak for all the weather.

Right here’s how the demo’s trying:

6. Animating the Timeline

Now let’s deal with the timeline animation. We’ll construct the perform that implements this conduct step-by-step.

First, we register a click on occasion listener for the timeline buttons:

perform animateTl(scrolling, el, tl) {
  for (let i = 0; i < el.size; i++) {
    el[i].addEventListener("click on", perform() {
      // code right here
    });
  }
}

Every time a button is clicked, we examine the disabled state of the timeline buttons, and in the event that they aren’t disabled, we disable them. This ensures that each buttons might be clicked solely as soon as till the animation finishes.

So, when it comes to code, the press handler initially accommodates these strains:

if (!arrowPrev.disabled) {
  arrowPrev.disabled = true;
}

if (!arrowNext.disabled) {
  arrowNext.disabled = true;
}

The following steps are as follows:

We examine to see if it’s the primary time we’ve clicked on a button. Once more, understand that the earlier button is disabled by default, so the one button that may be clicked initially is the subsequent one.

If certainly it’s the primary time, we use the rework property to maneuver the timeline 280px to the suitable. The worth of the xScrolling variable determines the quantity of motion.

Quite the opposite, if we’ve already clicked on a button, we retrieve the present rework worth of the timeline and add or take away to that worth, the specified quantity of motion (i.e. 280px). So, so long as we click on on the earlier button, the worth of the rework property decreases and the timeline is moved from left to proper. Nonetheless, when the subsequent button is clicked, the worth of the rework property will increase, and the timeline is moved from proper to left.

The code that implements this performance is as follows:

let counter = 0; 
for (let i = 0; i < el.size; i++) {
  el[i].addEventListener("click on", perform() {
    // different code right here
  
    const signal = (this.classList.accommodates("arrow__prev")) ? "" : "-";
    if (counter === 0) {
      tl.model.rework = `translateX(-${scrolling}px)`;
    } else {
      const tlStyle = getComputedStyle(tl);
      // add extra browser prefixes if wanted right here
      const tlTransform = tlStyle.getPropertyValue("-webkit-transform") || tlStyle.getPropertyValue("rework");
      const values = parseInt(tlTransform.break up(",")[4]) + parseInt(`${signal}${scrolling}`);
      tl.model.rework = `translateX(${values}px)`;
    }
    counter++;
  });
}

Nice job! We’ve simply outlined a means of animating the timeline. The following problem is to determine when this animation ought to cease. Right here’s our method:

When the primary timeline factor turns into absolutely seen, it implies that we’ve already reached the start of the timeline, and thus we disable the earlier button. We additionally be certain that the subsequent button is enabled.

When the final factor turns into absolutely seen, it implies that we’ve already reached the top of the timeline, and thus we disable the subsequent button. We additionally, due to this fact, be certain that the earlier button is enabled.

Do not forget that the final factor is an empty one with a width equal to the width of the timeline parts (i.e. 280px). We give it this worth (or a better one) as a result of we need to ensure that the final timeline factor might be seen earlier than disabling the subsequent button.

To detect whether or not the goal parts are absolutely seen within the present viewport or not, we’ll make the most of the identical code we used for the vertical timeline. The required code which comes from this Stack Overflow thread is as follows:

1	perform isElementInViewport(el) doc.documentElement.clientHeight) &&
7	rect.proper <= (window.innerWidth

Past the perform above, we outline one other helper:

perform setBtnState(el, flag = true) {
  if (flag) {
    el.classList.add(disabledClass);
  } else {
    if (el.classList.accommodates(disabledClass)) {
      el.classList.take away(disabledClass);
    }
    el.disabled = false;
  }
}

This perform provides or removes the disabled class from a component based mostly on the worth of the flag parameter. As well as, it could actually change the disabled state for this factor.

Given what we’ve described above, right here’s the code we outline for checking whether or not the animation ought to cease or not:

for (let i = 0; i < el.size; i++) {
  el[i].addEventListener("click on", perform() {
    // different code right here
    
    // code for stopping the animation
    setTimeout(() => {
      isElementInViewport(firstItem) ? setBtnState(arrowPrev) : setBtnState(arrowPrev, false);
      isElementInViewport(lastItem) ? setBtnState(arrowNext) : setBtnState(arrowNext, false);
    }, 1100);
  
    // different code right here
  });
}

Discover that there’s a 1.1 second delay earlier than executing this code. Why does this occur?

If we return to our CSS, we’ll see this rule:

1	.timeline ol {
2	transition: all 1s;
3	}

So, the timeline animation wants 1 second to finish. So long as it completes, we look forward to 100 milliseconds after which, we carry out our checks.

Right here’s the timeline with animations:

7. Including Swipe Help

To date, the timeline doesn’t reply to the touch occasions. It might be good if we might add this performance, although. To perform it, we will write our personal JavaScript implementation or use one of many associated libraries (e.g. Hammer.js, TouchSwipe.js) that exist on the market.

For our demo, we’ll hold this straightforward and use Hammer.js, so first, we embody this library in our pen:

Then we declare the related perform:

perform setSwipeFn(tl, prev, subsequent) {
  const hammer = new Hammer(tl);
  hammer.on("swipeleft", () => subsequent.click on());
  hammer.on("swiperight", () => prev.click on());
}

Contained in the perform above, we do the next:

Create an occasion of Hammer.

Once we swipe over the timeline within the left path, we set off a click on to the following button, and thus the timeline is animated from proper to left.

Once we swipe over the timeline in the suitable path, we set off a click on to the earlier button, and thus the timeline is animated from left to proper.

The timeline with swipe assist:

Let’s additional improve the consumer expertise by offering assist for keyboard navigation. Our objectives:

When the left or proper arrow key is pressed, the doc must be scrolled to the highest place of the timeline (if one other web page part is at the moment seen). This ensures that the entire timeline might be seen.

Particularly, when the left arrow key is pressed, the timeline must be animated from left to proper.

In the identical means, when the proper arrow key is pressed, the timeline must be animated from proper to left.

The related perform is the next:

perform setKeyboardFn(prev, subsequent) {
  doc.addEventListener("keydown", (e) => {
    if ((e.which === 37) || (e.which === 39)) {
      const timelineOfTop = timeline.offsetTop;
      const y = window.pageYOffset;
      if (timelineOfTop !== y) {
        window.scrollTo(0, timelineOfTop);
      } 
      if (e.which === 37) {
        prev.click on();
      } else if (e.which === 39) {
        subsequent.click on();
      }
    }
  });
}

The timeline with keyboard assist:

9. Going Responsive

We’re virtually completed! Final however not least, let’s make the timeline responsive. When the viewport is lower than 600px, it ought to have the next stacked structure:

As we’re utilizing a desktop-first method, listed here are the CSS guidelines that we now have to overwrite:

@media display screen and (max-width: 599px) {
  .timeline ol,
  .timeline ol li {
    width: auto; 
  }
  
  .timeline ol {
    padding: 0;
    rework: none !necessary;
  }
  
  .timeline ol li {
    show: block;
    peak: auto;
    background: clear;
  }
  
  .timeline ol li:first-child {
    margin-top: 25px;
  }
  
  .timeline ol li:not(:first-child) {
    margin-left: auto;
  }
  
  .timeline ol li div {
    place: static;
    width: 94%;
    peak: auto !necessary;
    margin: 0 auto 25px;
  }
  
  .timeline ol li:nth-child(odd) div {
    rework: none;
  }
  
  .timeline ol li:nth-child(odd) div::earlier than,
  .timeline ol li:nth-child(even) div::earlier than {
    left: 50%;
    prime: 100%;
    rework: translateX(-50%);
    border: none;
    border-left: 1px strong white;
    peak: 25px;
  }
  
  .timeline ol li:last-child,
  .timeline ol li:nth-last-child(2) div::earlier than,
  .timeline ol li:not(:last-child)::after,
  .timeline .arrows {
    show: none;
  }
}

For 2 of the principles above, we had to make use of the !necessary rule to override the associated inline types utilized by means of JavaScript.

The ultimate state of our timeline:

Browser Help

The demo works nicely in all current browsers and units. Additionally, as you’ve probably observed, we use Babel to compile our ES6 code all the way down to ES5.

The one small subject I encountered whereas testing it’s the textual content rendering change that occurs when the timeline is being animated. Though I attempted numerous approaches proposed in several Stack Overflow threads, I didn’t discover a easy answer for all working techniques and browsers. So, hold in your thoughts that you simply may see small font rendering points because the timeline is being animated.

Constructing a Horizontal Timeline With CSS and JavaScript

1. HTML Markup

2. Including Preliminary CSS Kinds

3. Timeline Component Kinds

4. Timeline Navigation Kinds

5. Including Interactivity

Variables

Initializing Issues

Equal-Top Timeline Parts

6. Animating the Timeline

7. Including Swipe Help

8. Including Keyboard Navigation

9. Going Responsive

Browser Help

40 Finest Blackletter and Gothic Fonts for Designers

PTZOptics Transfer SE Beginning at Underneath $1,000!!

25 Greatest Nonprofit Annual Report Template Designs for 2022

LEAVE A REPLY Cancel reply

Most Popular

Flight Time of All DJI Drones (Defined) – Droneblog

Do that you must take the Half 107 take a look at if in case you have a pilot’s license?

DJI Drones Not Turning ON / OFF (Solved) – Droneblog

DJI Mavic 3 Professional – The place is the Serial Quantity? (Answered) – Droneblog

Recent Comments

ABOUT US

POPULAR POSTS

Flight Time of All DJI Drones (Defined) – Droneblog

Do that you must take the Half 107 take a look at if in case you have a pilot’s license?

DJI Drones Not Turning ON / OFF (Solved) – Droneblog

POPULAR CATEGORY