Есть ли лучший способ разбить мои столбцы с помощью ScrollMagic и изменить размер макета?

Question

https://codepen.io/cfxd/pen/Zdvygp

Требования

1. Должно выглядеть четким без JS (можно просто установить enabled = false на вершине JS для двойной проверки)
2. Полноэкранное изображение должно отображаться фиксированным при загрузке страницы
3. Карты должны быть расположены в ряды по две и в альтернативном положении (макет не может быть основан на столбцах по причинам реагирования)
4. Все карты 100vh и шириной 50%
5. Изображение 1 смещается на половину ширины, затем карты по очереди закрепляются и прокручиваются
6. Нижний колонтитул «раскрывается» после прокрутки всех карт

Я чувствую, что, возможно, я упускаю что-то, что облегчает расширение, потому что если я получу, скажем, 6 рядов карточек, код для всех сцен станет громоздким. Даже используя цикл for, код очень нечитаемый. Есть ли способ сделать это немного легче и более управляемым?

Кроме того, в рабочей среде возникают серьезные проблемы с выравниванием при изменении размера браузера. Вы можете воспроизвести это, используя полный код страницы , а затем:

1. Прокрутка до конца с Dev Tools закрыты
2. Open Dev Tools

Я слышал, что обсуждалось, что этот тип проблемы с изменением размера должен решаться в CSS, но мне не ясно, относится ли это к этому случаю, и если да, то где вообще начинать.

Любые указатели приветствуются.

<div class="container">
  <div class="img-full">Fullscreen Image</div>
  <div class="rows">
    <div class="row row-1">
      <div class="card card-content pin-1-1">Content 1</div>
      <div class="card card-image pin-1-2">Image 1</div>
    </div>
    <div class="row row-2">
      <div class="card card-content pin-2-1">Content 2</div>
      <div class="card card-image pin-2-2">Image 2</div>
    </div>
  </div>
</div>
<footer>Footer</footer>

body {
  margin: 0;
}
.container {
  margin-bottom: 20vh;
}
.img-full {
  width: 100%;
  height: 100vh;
  background-color: #e6eae1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rows {
  position: relative;
}
.row {
  display: flex;
  flex-wrap: nowrap;
}
.row:nth-child(even) {
  flex-direction: row-reverse;
}
.card {
  width: 50%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-content {
  background: #ccc;
}
.card-image {
  background-color: #70A9A1;
}
footer {
  background: #C52;
  height: 20vh;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
}

(function() {

  var enabled = true;

  var controller = new ScrollMagic.Controller();
  if(enabled) {
    new ScrollMagic.Scene({
      triggerElement: '.img-full',
      triggerHook: 'onLeave',
      duration: '150%',
    })
      .setPin('.img-full', {pushFollowers: false})
      .addTo(controller);

    new ScrollMagic.Scene({
      triggerElement: '.pin-1-2',
      triggerHook: 'onEnter',
      duration: '50%',
    })
      .setPin('.pin-1-2', {pushFollowers: false})
      .addTo(controller);

    new ScrollMagic.Scene({
      triggerElement: '.pin-1-1',
      triggerHook: 'onLeave',
      duration: '50%',
    })
      .setPin('.pin-1-1', {pushFollowers: false})
      .addTo(controller);

    new ScrollMagic.Scene({
      triggerElement: '.pin-1-2',
      triggerHook: 'onLeave',
      duration: '100%',
      offset: (document.querySelector('.pin-1-2').offsetHeight / 2),
    })
      .setPin('.pin-1-2', {pushFollowers: false})
      .addTo(controller);

    new ScrollMagic.Scene({
      triggerElement: '.pin-2-2',
      triggerHook: 'onEnter',
      duration: '50%',
    })
      .setPin('.pin-2-2', {pushFollowers: true})
      .addTo(controller);

    new ScrollMagic.Scene({
      triggerElement: '.pin-2-2',
      triggerHook: 'onLeave',
      duration: '100%',
      offset: (document.querySelector('.pin-2-2').offsetHeight / 2),
    })
      .setPin('.pin-2-2', {pushFollowers: true})
      .addTo(controller);

    new ScrollMagic.Scene({
      triggerElement: '.pin-2-1',
      triggerHook: 'onEnter',
      duration: '150%',
    })
      .setPin('.pin-2-1', {pushFollowers: true})
      .addTo(controller);
  }
})();