Как реализовать плавный заголовок перехода с исчезновением и появлением анимации? [закрыто] ⇐ CSS

[Anonymous]

Я пытаюсь реализовать заголовок плавного перехода, аналогичный анимации в этом справочнике: Справочная анимация.
Вот что я пробовал до сих пор: Моя попытка.Мой код размещен на StackBlitz: Мой код.
Подробности заголовка:
Заголовок разделен на два раздела:
Раздел навигации: содержит логотип и кнопку закрытия.
Раздел информации: отображает данные, например точки. и другая информация может быть добавлена.
Желаемое поведение:
При прокрутке вниз:

• Раздел навигации должен располагаться в верхней части страницы. заголовок.
• Информационный раздел должен плавно и медленно исчезнуть с анимацией. Когда информационный раздел исчезает, его пространство должно
  заниматься основным содержимым (например, текстом lorem ipsum) как часть
  эффекта развертывания/свертывания.
  
  Проблемы, с которыми я столкнулся:
• Обнаружение прокрутки: я не конечно, нужно ли мне обнаружение прокрутки или оно реализовано неправильно в моем текущем коде.
• Округление заголовка: закругленные края заголовка не работают должным образом во время анимации.
• Плавная анимация: мне не удается добиться такой же плавной анимации исчезновения/появления, как показано в ссылке.
  
  Расширяющееся поведение: переход от исчезающей информации Раздел основного контента, расширяющийся на свое место, выглядит не гладко.

Что я пробовал :
Применил классы перехода Tailwind для анимации.
Использовал window.scrollY для обнаружения прокрутки, но я не уверен, необходимо ли это или реализовано правильно.
/>Попытка добавить округление с помощью rounded-xl, но переход происходит не плавно или вообще не происходит.
Вопрос:
Как добиться точного плавного перехода и анимации показано в ссылке с поведением развертывания/свертывания? Буду очень признателен за любые предложения или улучшения моего подхода.

Подробнее здесь: https://stackoverflow.com/questions/793 ... -animation