POC Smooth Element Expand Animation

smooth-expand.js

function getElementsAfter(el, {stopAt, skip, only} = {}) {
	let elements = [];
	while (el) {
		while (el.nextElementSibling) {
			el = el.nextElementSibling
			elements.push(el)
		}
		
		while (el && !el.nextElementSibling) {
			el = el.parentElement
		}
	}

	elements = elements.filter(el => {
		if (skip) {
			if (el.matches(skip)) {
				return false
			}
		}

		if (only) {
			if (!el.matches(only)) {
				return false
			}
		}
		
		return true
	});

	if (stopAt) {
		const indexLast = elements.findIndex(el => el.matches(stopAt))
		if (indexLast != -1) {
			elements = elements.slice(0, indexLast)
		}	
	}

	return elements;
}

function animateExpand(el, { from = 0, to = 200, duration = 320, stopAt, skip, only, indexLast } = {}) {
	const elements = getElementsAfter(el, {stopAt, skip, only})

	const start = Date.now();

	function animate() {
		let progress = (Date.now() - start) / duration;

		if (progress >= 1) {
			progress = 1
		}

		const offset = from + ((to - from) * progress)

		elements.forEach(el => el.style.transform = `translateY(${offset}px)`)
		
		if (progress < 1) {
			requestAnimationFrame(animate);
		}
	}

	requestAnimationFrame(animate);
}