Responsive Animated Timeline With JavaScript And CSS3

Preview:

Description:

This is a simple, responsive timeline where the event nodes will slide smoothly into the screen on vertical page scrolling.

How to use it:

Add your custom events to the timeline using html unordered list and time tag.

<section class="timeline">
  <ul>
    <li>
      <div>
        <time>2016</time>
        Event Here
      </div>
    </li>
    <li>
      <div>
        <time>2015</time>
        Event Here
      </div>
    </li>
    <li>
      <div>
        <time>2014</time>
        Event Here
      </div>
    </li>
  </ul>
</section>

The primary CSS styles for the timeline.

.timeline ul {
  background: #1B9AAA;
  padding: 50px 0;
}
.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
  background: #fff;
}
.timeline ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: inherit;
}
.timeline ul li div {
  position: relative;
  bottom: 0;
  width: 400px;
  padding: 15px;
  background: #F45B69;
}
.timeline ul li div::before {
  content: '';
  position: absolute;
  bottom: 7px;
  width: 0;
  height: 0;
  border-style: solid;
}
.timeline ul li:nth-child(odd) div { left: 45px; }
.timeline ul li:nth-child(odd) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #F45B69 transparent transparent;
}
.timeline ul li:nth-child(even) div { left: -439px; }
.timeline ul li:nth-child(even) div::before {
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #F45B69;
}
time {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 8px;
}

The animation effects for the event when you scroll down the webpage.

.timeline ul li::after { transition: background .5s ease-in-out; }
.timeline ul li.in-view::after { background: #F45B69; }
.timeline ul li div {
  visibility: hidden;
  opacity: 0;
  transition: all .5s ease-in-out;
}
.timeline ul li:nth-child(odd) div { transform: translate3d(200px, 0, 0); }
.timeline ul li:nth-child(even) div { transform: translate3d(-200px, 0, 0); }
.timeline ul li.in-view div {
  transform: none;
  visibility: visible;
  opacity: 1;
}

Make the timeline work well across browsers and platforms.

@media screen and (max-width: 900px) {
.timeline ul li div { width: 250px; }
.timeline ul li:nth-child(even) div { left: -289px; /*250+45-6*/
}
}
@media screen and (max-width: 600px) {
.timeline ul li { margin-left: 20px; }
.timeline ul li div { width: calc(100vw - 91px); }
.timeline ul li:nth-child(even) div { left: 45px; }
.timeline ul li:nth-child(even) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #F45B69 transparent transparent;
}
}

The main JavaScript to active the timeline.

(function() {
  'use strict';
  // define variables
  var items = document.querySelectorAll(".timeline li");
  // check if an element is in viewport
  // http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
  function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }
  function callbackFunc() {
    for (var i = 0; i < items.length; i++) {
      if (isElementInViewport(items[i])) {
        items[i].classList.add("in-view");
      }
    }
  }
  // listen for events
  window.addEventListener("load", callbackFunc);
  window.addEventListener("resize", callbackFunc);
  window.addEventListener("scroll", callbackFunc);
})();