Timeline

/*Downloaded from https://www.codeseek.co/q51/timeline-wjJGOM */
body {
  width: 400px;
  margin: auto;
  padding-top: 100px;
  padding-bottom: 400px;
  font-family: sans-serif;
  font-size: 0.8em;
  line-height: 1.5em;
}

#timeline .entry {
  border-left: 5px solid #eee;
  padding-left: 20px;
  padding-bottom: 5em;
  position: relative;
  color: #ccc;
  transition: 0.2s;
}
#timeline .entry::after {
  content: "";
  width: 21px;
  height: 21px;
  background: #eee;
  border-radius: 100%;
  position: absolute;
  display: inline-block;
  left: -16px;
  top: 0;
  transition: 0.5s;
  box-shadow: 0px 0px 0px 0px white;
  border: 0px solid transparent;
  margin-left: 3px;
  margin-top: -4px;
}
#timeline .entry::before {
  content: "";
  width: 5px;
  display: inline-block;
  background: #4499ff;
  height: 0%;
  position: absolute;
  left: -4.5px;
  top: 0%;
  transition: 0.5s;
}
#timeline .entry:first-of-type {
  padding-top: 0;
}
#timeline .entry:first-of-type::after {
  top: 0;
}
#timeline .entry:last-of-type {
  border-left: 5px solid transparent;
}
#timeline .entry:last-of-type::before {
  width: 0;
}
#timeline .entry.active {
  color: #000;
}
#timeline .entry.active::after {
  background: #4499ff;
  box-shadow: 0px 0px 0px 4px white inset;
  border-radius: 100%;
  border: 4px solid #4499ff;
  left: -17px;
  margin-left: 0px;
  margin-top: -7px;
}
#timeline .entry.was-active {
  color: #333;
}
#timeline .entry.was-active::after {
  background: #4499ff;
}
#timeline .entry.was-active::before {
  height: 100%;
}
#timeline .entry h3 {
  margin-top: 0;
}

/*Downloaded from https://www.codeseek.co/q51/timeline-wjJGOM */
$( document ).ready(function() {
    //on ready, set first pip as active
    $('#timeline .entry').first().addClass('active');
    //on scroll, check what's above the half-way point on the viewport
    //first, get and cache the viewport size
    var vw = $( window ).innerWidth();
    var vh = $( window ).innerHeight();
    //console.log (vw);
    //console.log (vh);
    // refresh these on resize!
    $( window ).resize(function(){
      vw = $( window ).innerWidth();
      vh = $( window ).innerHeight();
    });
    $( window ).scroll(function(){
      //check each entry for its position relative to the viewport
      $('.entry').each(function(){
        var offsetTop = $(this).offset();
        var windowScrollTop = $(window).scrollTop();
        // console.log(offsetTop.top);
        // console.log(windowScrollTop)
        //Check if it's past 50%
        var ViewCheck = offsetTop.top - (windowScrollTop+(vh/2));
        // console.log(ViewCheck);
        if (ViewCheck < 0){
           //Add/remove classes as needed
          $(this).addClass('active').removeClass('was-active').prev().addClass('was-active').removeClass('active');
        } else {
          $(this).removeClass('active was-active').next().removeClass('active was-active'); 
        }
      })
    })
});