Timeline using ACF Pro https://webdesign.tutsplus.com/tutorials/building-a-vertical-timeline-with-css-and-a-touch-of-javascript--cms-26528

page-timeline.php

<?php
/**
 * This file adds a timeline to your desired page in Genesis Framework.
 *
 * @author  Omar Al-Ansari
 * @link    http://www.alansari.io
 */

// Force full width content
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

add_action( 'genesis_entry_content', 'io_about_me_timeline' );
/**
 * Outputs a timeline using custom fields
 */
function io_about_me_timeline() {

	if ( is_singular( $post_types = 'page' ) && is_page( $page = 'timeline' ) ) {
		
		// check if the repeater field has rows of data
		if( have_rows('timeline_items') ):

			echo '<div class="timeline"><ul>';

		 // loop through the rows of data
		 while ( have_rows('timeline_items') ) : the_row();

			$timelineDate = get_sub_field('timeline_date');
			$timelineContent = get_sub_field('timeline_content');

			printf('<li><div><h3>%s</h3> %s</div></li>', $timelineDate, $timelineContent);
				
		 endwhile;

		    echo '</ul></div>';

		else :

		    // no rows found

		endif;

	}

}

// Enqueue timeline-init.js
add_action( 'wp_enqueue_scripts', 'io_enqueue_timeline_scripts' );
function io_enqueue_timeline_scripts() {
	wp_enqueue_script( 'timeline-init', get_stylesheet_directory_uri() . '/js/timeline-init.js', array( 'jquery' ), '', true );
}

genesis();

style.css

/* # Timeline
---------------------------------------------------------------------------------------------------- */
.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
  background: #ddd;
}

.timeline ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: inherit;
}

.timeline ul li div {
  position: relative;
  bottom: 0;
  width: 400px;
  padding: 15px;
  background: #88b7d5;
  border-radius:4px;
}


.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: 15px 20px 15px 0;
  border-color: transparent #88b7d5 transparent transparent;
}

.timeline ul li:nth-child(3n+1):nth-child(odd) div {
  background: #3591d1;
}

.timeline ul li:nth-child(3n+1):nth-child(odd) div::before {
  border-color: transparent #3591d1 transparent transparent;
}

.timeline ul li.in-view:nth-child(3n+1):nth-child(odd)::after {
	background: #3591d1;
}

.timeline ul li:nth-child(even) div {
  left: -439px;
}

.timeline ul li:nth-child(even) div::before {
  right: -15px;
  border-width: 15px 0 15px 20px;
  border-color: transparent transparent transparent #88b7d5;
}

.timeline ul li:nth-child(3n+1):nth-child(even) div {
  background: #35dc69;
}

.timeline ul li:nth-child(3n+1):nth-child(even) div::before {
  border-color: transparent transparent transparent #35dc69;
}

.timeline ul li.in-view:nth-child(3n+1):nth-child(even)::after {
	background: #35dc69;
}

.timeline ul li::after {
  background: #ddd;
  transition: background .5s ease-in-out;
}
 
.timeline ul li.in-view::after {
  background: #88b7d5;
}
 
.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;
}

@media screen and (max-width: 1024px) {
  .timeline ul li div {
    width: 250px;
  }
  .timeline ul li:nth-child(even) div {
    left: -289px; /*250+45-6*/
  }
}

@media screen and (max-width: 860px) {
  .timeline ul li {
    margin-left: 20px;
  }
   
  .timeline ul li div {
    width: calc(100vw - 350px);
  }
   
  .timeline ul li:nth-child(even) div {
    left: 45px;
  }
   
  .timeline ul li:nth-child(even) div::before {
    left: -15px;
    border-width: 15px 20px 15px 0;
    border-color: transparent #88b7d5 transparent transparent;
  }
}

@media screen and (max-width: 780px) {
	.timeline ul li div {
    width: calc(100vw - 250px);
  }	
}

timeline-init.js

// https://webdesign.tutsplus.com/tutorials/building-a-vertical-timeline-with-css-and-a-touch-of-javascript--cms-26528
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)
  );
}

var items = document.querySelectorAll(".timeline li");
 
// code for the isElementInViewport function
 
function callbackFunc() {
  for (var i = 0; i < items.length; i++) {
    if (isElementInViewport(items[i])) {
      items[i].classList.add("in-view");
    }
  }
}
 
window.addEventListener("load", callbackFunc);
window.addEventListener("scroll", callbackFunc);