Animated vertical timeline

HTML 

You can edit the text but don't change any of the text in < brackets >. You can also add or remove items on the timeline by selecting everything from the opening item tag  <!- TIMELINE ITEM -!>  to the end item tag <!- END OF TIMELINE ITEM -!>.

NOTE: Ensure all odd TIMELINE ITEMS include the js--fadeInLeft tag, and all even TIMELINE ITEMS include the js--fadeInRight tag.

Edit the titles by altering the h2 lines, and edit the text by editing the p lines.

<section class="timeline">
    <div class="container">

      <!- TIMELINE ITEM -!>
      <div class="timeline-item">
                <div class="timeline-img"></div>
        <div class="timeline-content js--fadeInLeft">
          <h2>Project Briefing</h2>
            <div class="Xdate">JAN 3RD 2017</div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
        </div>
      </div>
        <!- END OF TIMELINE ITEM -!>
        <!- TIMELINE ITEM -!>
      <div class="timeline-item">
                <div class="timeline-img"></div>
        <div class="timeline-content timeline-card js--fadeInRight">
            <h2>Title</h2>
            <div class="Xdate">DATE OR SUBTITLE</div>
          <p>Adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
        </div>
      </div>
        <!- END OF TIMELINE ITEM -!>
        <!- TIMELINE ITEM -!>
      <div class="timeline-item">
                <div class="timeline-img"></div>
        <div class="timeline-content timeline-card js--fadeInLeft">
            <h2>Project Spec Outlined</h2>
            <div class="Xdate">FEB 2ND 2017</div>
          <p>Dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
        </div>
      </div>
        <!- END OF TIMELINE ITEM -!>
        <!- TIMELINE ITEM -!>
      <div class="timeline-item">
                <div class="timeline-img"></div>
        <div class="timeline-content timeline-card js--fadeInRight">
            <h2>Final Launch</h2>
            <div class="Xdate">MARCH 10TH 2017</div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
        </div>
      </div>
        <!- END OF TIMELINE ITEM -!>
      
    </div>
  </section>

CSS

Update hex codes as necessary for colors. 

// COLORS
  // LINE
  .timeline:before {
    background: #36D7B7;
  }
  // DOTS
  .timeline-img {
  background: #E9D460;
  }
  // TIMELINE ITEM BACKGROUND
  .timeline-content {
    background: #fafafa;
  }
  // SUBTITLE AREA
  .Xdate {
    background: #36D7B7;
    color: #fff;
  }
  
  
  .timeline:before {
    content: '';
    width: 5px;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .timeline-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  margin-top: 65px;
  margin-left: -15px;
}
    .timeline-item:nth-child(even) {
      .timeline-content {
        float: right;
        .Xdate {
          right: auto;
          left: 0;
        }
        &::after {
          content: '';
          position: absolute;
          border-style: solid;
          width: 0;
          height: 0;
          top: 70px;
          left: -15px;
          border-width: 10px 15px 10px 0;
          border-color: transparent #fafafa transparent transparent;
        }
      }
    }
  .timeline-item {
    width: 100%;
    margin-bottom: 70px;
    &::after {
      content: '';
      display: block;
      clear: both;
    }
  }
  .timeline-content {
    position: relative;
    width: 45%;
    box-sizing: border-box !important;
        padding: 80px 40px 40px 40px !important;
    border-radius: 1px;
    &::after {
      content: '';
      position: absolute;
      border-style: solid;
      width: 0;
      height: 0;
      top: 70px;
      right: -15px;
      border-width: 10px 0 10px 15px;
      border-color: transparent transparent transparent #fafafa;
    }
  }
  .Xdate {
    display: inline-block;
    padding: 10px 40px;
    font-size: 13px;
    position: absolute;
    top: 0;
    width: 100%;
    box-sizing: border-box !important;
    right: 0;
  }

  @media screen and (max-width: 768px) {
    .timeline {
      &::before {
        left: 20px;
      }
    .timeline-img {
      left: 20px;
    }
      .timeline-content {
        max-width: 100%;
        width: auto;
        margin-left: 70px;
      }
      .timeline-item {
        &:nth-child(even) {
          .timeline-content {
            float: none;
          }
        }
        &:nth-child(odd) {
          .timeline-content {
            &::after {
              content: '';
              position: absolute;
              border-style: solid;
              width: 0;
              height: 0;
              top: 70px;
              left: -15px;
              border-width: 10px 15px 10px 0;
              border-color: transparent #fafafa transparent transparent;
            }
          }
        }
      }
    }
  }

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/scrollreveal.js/3.3.1/scrollreveal.min.js"></script>
<script>
$(function(){

  window.sr = ScrollReveal();

  if ($(window).width() < 768) {

    if ($('.timeline-content').hasClass('js--fadeInLeft')) {
        $('.timeline-content').removeClass('js--fadeInLeft').addClass('js--fadeInRight');
    }

    sr.reveal('.js--fadeInRight', {
        origin: 'right',
        distance: '30px',
        easing: 'ease-in-out',
        duration: 800,
      });

  } else {
    
    sr.reveal('.js--fadeInLeft', {
        origin: 'left',
        distance: '30px',
          easing: 'ease-in-out',
        duration: 800,
      });

      sr.reveal('.js--fadeInRight', {
        origin: 'right',
        distance: '30px',
        easing: 'ease-in-out',
        duration: 800,
      });

  }
  
  sr.reveal('.js--fadeInLeft', {
        origin: 'left',
        distance: '30px',
          easing: 'ease-in-out',
        duration: 800,
      });

      sr.reveal('.js--fadeInRight', {
        origin: 'right',
        distance: '30px',
        easing: 'ease-in-out',
        duration: 800,
      });


});

</script>