Как сделать фиксированный блок и перекрывающий его скроллом через gsap?

Question

[ogneog]

Здравствуйте. Не могу все никак добиться желаемого результата. Не срабатывает тот же pin, который должен фиксировать...

Подскажите, как сделать, чтобы при скролле, верхний блок (красный на скрине) оставался на своем месте и не прокручивался в браузере, но должен срабатывать триггер в середине красного блока, который заставляет зеленый блок подниматься вверх и закрывать красный блок, после чего уже обычный контент идет ...

Использую GSAP, последняя попытка была такой:

gsap.to(block2.current, {
      y: -300, // Поднимаем второй блок вверх при скролле
      scrollTrigger: {
        trigger: block2.current,
        start: "top top", // Начинаем анимацию, когда верх второго блока виден
        end: "center top", // Завершаем анимацию, когда верх второго блока выходит за видимую область
      },
    });

    gsap.to(block1.current, {
      y: 0, // Не изменяем позицию первого блока при скролле
      scrollTrigger: {
        trigger: block1.current,
        start: "top top", // Начинаем анимацию, когда верх первого блока виден
        end: "top top", // Завершаем анимацию, когда верх первого блока остается на виду
        scrub: true,
        pin: true, // Фиксируем первый блок во время анимации
      },
    });