使用页面过渡库Swup js重新加载页面后，Scrollmagic Pinning无法识别元素的高度

Question

我正在尝试使用Swup JS在我的网站上实现Scrollmagic库。我需要在特定页面上固定一个元素。 当我刷新页面时可以使用，但是如果我更改页面然后再返回，似乎Scrollmagic无法识别元素的高度。固定只有在刷新页面后才能起作用。

我已经创建了2个函数。一种用于scrollmagic init，另一种用于销毁它。

我认为我必须找到一种方法在事件“ contentReplaced”上触发scrollmagic init函数，然后在另一页上触发destroy函数。但是我不知道如何。

这是我的init函数代码的一部分：

if (document.querySelector('.mockup_txt_wrap')) {
    var ctrlHome;
    function initScrollMagicMain() {
        // Init ScrollMagic
        ctrlHome = new ScrollMagic.Controller();
        // Pin text 
        var pin = new ScrollMagic.Scene({
            triggerElement: '#mockup',
            triggerHook: 0.3,
            duration: '100%'
        })
        .removePin(true)
        .addIndicators()
        .setPin('.mockup_txt_wrap')
        .addTo(ctrlHome);
    }
    initScrollMagicMain();
    swup.on('willReplaceContent', function unload() {
        if (document.querySelector('.mockup_txt_wrap')) {
            ctrlHome.destroy(true);
        }
    });
}

这是link，如果有帮助的话。