Отзывчивый ScrollMagic

Question

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

Вот мой jsfiddle. https://jsfiddle.net/5frsn1kc/41/

К вашему сведению, элементы выглядят корректно, если высота РЕЗУЛЬТАТОВ РАМКИ составляет около 1000 пикселей

Не уверен, как на самом деле, чтобы ценить любое руководство!

HTML

<main>
    <svg width="0" height="0">
        <defs>
            <filter id="dropshadow" height="130%">
                <feGaussianBlur in="SourceAlpha" stdDeviation="4" />
                <!-- stdDeviation is how much to blur -->
                <feOffset dx="-5" dy="10" result="offsetblur" /> <!-- how much to offset -->
                <feComponentTransfer>
                    <feFuncA type="linear" slope="0.5" />
                    <!-- slope is the opacity of the shadow -->
                </feComponentTransfer>
                <feMerge>
                    <feMergeNode /> <!-- this contains the offset blurred image -->
                    <feMergeNode in="SourceGraphic" />
                    <!-- this contains the element that the filter is applied to -->
                </feMerge>
            </filter>
        </defs>
    </svg>
    <div class="container-fluid">

        <div class="row vh-50">
        </div>

        <div class="row">

            <div class="col-6 bg-primary vh-100">
                <div class="d-block" id="trigger1"></div>
                <div class="pin" id="pin1">
                    <svg width="309" height="72" xmlns="http://www.w3.org/2000/svg">
                        <g fill="#00D47B" fill-rule="evenodd" filter="url(#dropshadow)">
                            <path d="M0 0h309v72H0z" />
                        </g>
                    </svg>
                </div>
                <div class="d-block" id="trigger2"></div>
                <div class="pin" id="pin2">
                    <svg width="309" height="204" xmlns="http://www.w3.org/2000/svg">
                        <g fill="#FF8A8A" fill-rule="evenodd" filter="url(#dropshadow)">
                            <path d="M0 0h202v52H0zM309 0v204h-84V0zM0 76h202v52H0zM0 152h202v52H0z" />
                        </g>
                    </svg>
                </div>
                <!-- <div class="d-block" id="trigger3"></div> -->
                <div class="pin" id="pin3">
                    <svg width="351" height="351" xmlns="http://www.w3.org/2000/svg">
                        <g fill="#61007D" fill-rule="evenodd" filter="url(#dropshadow)">
                            <path d="M0 0h351v351H0z" />
                        </g>
                    </svg>
                </div>
            </div>
            <div class="col-6 bg-warning vh-100">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu porta libero. Aenean
                    libero dolor, imperdiet sit amet risus in, tempus vulputate neque. Cras eu augue varius,
                    ultricies nibh eu, vehicula tellus. Proin a turpis lacinia, malesuada enim eu,
                    condimentum lacus. Donec luctus elit eu elit rutrum feugiat. Integer vehicula nisi
                    velit, eu lobortis massa dictum eget. Ut in mauris nec tellus ullamcorper ultricies.
                    Aliquam erat volutpat. Sed dolor turpis, finibus in ligula vitae, feugiat convallis
                    tellus. Donec laoreet luctus diam ac rhoncus. Nullam feugiat nibh vitae mauris rhoncus
                    auctor. Vivamus condimentum, enim eget accumsan eleifend, erat nunc accumsan quam, in
                    condimentum nulla nulla ac elit.</p>
            </div>
        </div>

        <div class="row">
            <div class="col-12 vh-50"></div>
            <div class="col-12 vh-50"></div>
            <div class="col-12 vh-50"></div>
        </div>

    </div>
</main>

CSS

.vh-50 {
      height: 50vh!important;
}

#pin1,
#pin2 {
    z-index: 1;
}

#pin2 {
    padding-top: 95px;
}

#pin3 {
  position: absolute;
  bottom: 0;
}

svg {
    transform: skew(20deg);

    #pin1 & {
        margin-left: 60px;
    }

    #pin2 & {
        margin-left: 118px;
    }

    #pin3 & {
        margin-left: 80px;
    }
    &:not(:root) {
      overflow: visible !important;
    }
}

JS

$(function () {

    // initialize scrollmagic
    var controller = new ScrollMagic.Controller();

    // wait for document ready
    // build scene
    var scene1 = new ScrollMagic.Scene({
    triggerElement: "#trigger1",
    // duration: 430
    // duration: '100%'
    duration:  $("#pin3").height() + 260
    })
    // .setPin("#pin1")
    .setPin("#pin1", {pushFollowers: false})
    .addIndicators({
    name: "1 (duration: 580)"
    })
    .addTo(controller);

    var scene2 = new ScrollMagic.Scene({
      triggerElement: "#trigger2",
      // duration: 330
      // duration: '100%'
      duration: $("#pin3").height() + 188
    })
      .setPin("#pin2", { pushFollowers: false })
      .addIndicators({
        name: "2 (duration: 290)"
      })
      .addTo(controller);

});