ba-block-cli/src/blocks/timeline/timeline.js

Auto-create blocks for WordPress ACF

// DOM content loaded event listener
document.addEventListener('DOMContentLoaded', function() {
    console.log('Progress init');

    // Activate the timeline elements on scroll
	var elements = document.querySelectorAll('.timeline-section .icon-container');
	window.addEventListener("scroll", function() {
		let top = this.scrollY + (window.innerHeight / 2);
		if (elements) {
			var bodyRect = document.body.getBoundingClientRect();
			elements.forEach(function(element) {
				var elemRect = element.getBoundingClientRect(),
					offset = elemRect.top - bodyRect.top;
				if (offset < top) {
					element.classList.add('active');
				} else {
					element.classList.remove('active');
				}
			});
		}
	});
});