Things to consider

[soerenmeier]

async function openChange(open) {
if (isOpen === open)
	return;

isOpen = open;

if (open) {
	if (!probedHeight) {
		subEl.classList.add('probe');
		probedHeight = subEl.offsetHeight;
		subEl.classList.remove('probe');
	}

	gsap.to(subEl, {
		height: probedHeight,
		clearProps: 'height',
		onStart: () => {
			subEl.classList.add('open');
		}
	});
} else {
	gsap.to(subEl, {
		height: 0,
		clearProps: 'height',
		onComplete: () => {
			subEl.classList.remove('open');
		}
	});
}
}
$: openChange(open);

[soerenmeier]

const transition = new GenTransition;
	transition.setTransition(async function*(open, wasRunning) {
		// close
		if (!open) {
			ctnEl.classList.remove('open');
			yield 500;
			ctnEl.classList.remove('visible');
			return;
		}

		// let's probe the height if we're not cancelling an animation
		if (!wasRunning) {
			// check the height
			ctnEl.classList.add('probe-height');
			const height = ctnEl.clientHeight;
			ctnEl.classList.remove('probe-height');
			ctnEl.style.setProperty('--height', height + 'px');
			yield 32;
		}

		ctnEl.classList.add('visible');
		yield 32;

		ctnEl.classList.add('open');
	});
	$: !transition.firstCall() ? transition.update(open) : null;

[soerenmeier]

const transition = new GenTransition;
	transition.setTransition(async function*(open, wasRunning) {
		if (!menuEl)
			return;

		const a = cls => menuEl.classList.add(cls);
		const r = cls => menuEl.classList.remove(cls);

		if (open) {
			document.documentElement.classList.add('no-scroll');

			a('stage-1');
			yield 32;
			a('stage-2');
			yield 200;
			a('stage-3');
		} else {
			r('stage-3');
			r('stage-2');
			yield 500;
			r('stage-1');

			document.documentElement.classList.remove('no-scroll');
		}
	});
	$: !transition.firstCall() ? transition.update(open) : null;

[soerenmeier]

	function onClick(e) {
		open = !open;

		if (open) {
			gsap.to(ctnEl, {
				height: ctnEl.scrollHeight,
				duration: .5,
				clearProps: 'maxHeight',
				onStart: () => {
					ctnEl.classList.add('open');
				}
			});
		} else {
			gsap.to(ctnEl, {
				height: 0,
				duration: .5,
				clearProps: 'height',
				onStart: () => {
					ctnEl.classList.remove('open');
				}
			});
		}
	}