Как создать эту сложную анимацию на моем сайте и сделать ее адаптивной?

Question

Мне нужно воспроизвести похожий эффект этого: https://dribbble.com/shots/3275340-Exploring-The-North-Face на домашней странице сайта, над которым я работаю. Я прочитал некоторые комментарии в этой ссылке, и создатель сказал, что эффект был создан с помощью Adobe After Effects, поэтому, возможно, этот эффект не полностью выполним в веб-среде.

( Старый ) В настоящее время в качестве альтернативы можно использовать пользовательский путь SVG, настроенный для отображения только содержимого внутри него, например, такой вопрос: Переполнение SVG-окна просмотра: скрыто / кадрирование .

Моя первая цельрешал, как сделать переход между двумя словами не линейным, поэтому я создал контур облаков с помощью svg path. Моя проблема с этим кодом заключается в том, что, как только я оставляю свое разрешение для разработки (приблизительно 1900x920) моего монитора, путь svg не изменяется, и после окончания изображения его выталкивают.

Myпроблемы сейчас 2:

• Решено Обратите внимание на переход по двум словам, как он не линейный
• Решено Он отзывчивость всего этого раздела, как он ломается, просто перемещаясь на 10 пикселей от разрешения моего экрана

Старый Скрипка: https://jsfiddle.net/4kd36ya8/1/

ОБНОВЛЕНИЕ : я изменил весь код, чтобы попробовать другое: маски CSS (https://css -tricks.com / clipping-masking-css / ) и это, кажется, работает очень хорошо с тем, что я пытаюсь достичь. Проблема с положением слов. Если я добавлю их в position: fixed, то в Microsoft Edge будет ошибка (см. этот вопрос для справки; обратите внимание, что я уже пробовал исправление, описанное в посте, но безуспешно).

Ток Скрипка: https://jsfiddle.net/ztgyq1kc/4/

Ток Код:

body {
  /* Just to make the document scroll over */
  height: 300vh;
}

.home-header {
  height: 100vh;
}
.home-header .inside {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-mask-image: url("https://i.postimg.cc/SN3Wjsx3/test.png");
  mask-image: url("https://i.postimg.cc/SN3Wjsx3/test.png");
  z-index: 2;
}

.image {
  width: 100%;
  height: auto;
  display: inline-block;
}

.cloud-writing {
  height: 0;
  line-height: 0;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12.5rem;
  letter-spacing: -1rem;
  text-align: center;
  position: fixed;
  top: 50%;
  width: 100%;
}
.cloud-writing.white {
  color: #fff;
  z-index: 3;
}
.cloud-writing.blue {
  color: blue;
  z-index: 1;
}

<div class="home-header">
  <div class="inside">
    <div class="cloud-writing white">Text1</div>
    <img src="https://via.placeholder.com/1920x1080?text=placeholder" class="image" alt="" />
  </div>
  <div class="cloud-writing blue">Text2</div>
</div>

Моей следующей целью будет добавление библиотеки параллакса (я пока не знаю, какая именно) для обработки всех анимаций.