.scroll {

	opacity: 0;
	transition: all 1s ease-out;
	transform: translate3d(0, 2rem, 0);

}

.scrolled-in {
	
	opacity: 1;
	transform: translate3d(0, 0, 0);

}

/* demo styles */
body {
  margin: 0;  
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.text {
  display: grid;
  place-items: center;
  min-height: 100vh;
  width: 90%;
  background: #eeeeee;
  padding: 5vw;
  margin: 5vw;
  box-sizing: border-box;
}

img {
  display: inline-block;
  max-width: 25%;
  height: auto;
  margin: 0;
}

h1 {
  font-size: 7vw;
  margin: 10vw;
}

p {
  font-size: 5vw;
  margin: 10vw;
}

document.addEventListener("DOMContentLoaded", function(event) { 

	// get all the scroll-group elemetns.
	scrollGroups = document.querySelectorAll('[class*="scroll-group"]');

	// for each scroll-group element.
  scrollGroups.forEach(el => {
		
		// create an array from the element classes.
		var elClasses = el.className.split ( ' ' );

		// for each of the classes in the array.
		for ( var index in elClasses ) {
	
			// if the class contains the 'scroll-group-' string.
			if ( elClasses[index].match ( /^scroll-group-/ ) ) {
	
				// get the string that follows after the '--' split.
				var targetClassName = elClasses[index].split ( '--' )[1];
	
				// get the children of the element that have the target classname.
				children = el.querySelectorAll('.' + targetClassName);
	
				// for each of the children with the target classname.
				children.forEach(el => {

					// add the 'scroll' class.
					el.classList.add("scroll");
				});
	
				break;
	
			}
		}	
	});

	// get all of the elements with the 'scroll' class.
	const scrollList = document.querySelectorAll(".scroll, [class*='scroll-group']")

	const callback = (entries, observer) => {

		var delay = 0;

		entries.forEach((entry) => {

			if (entry.isIntersecting) {

				setTimeout(function () {
                    // add the class that triggers the animation
                    entry.target.classList.add("scrolled-in");

                }, delay);

                // increase the delay to allow a cascading effect for the elements
                delay += 500; // in milliseconds

			}
	  	})
	}
	
	const options = {}
	
	const myObserver = new IntersectionObserver(callback, options)

	scrollList.forEach(scrollItem => {
		myObserver.observe(scrollItem)
	})

});