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');
                }
            });
        }
    }