Страница перезагружается 2 раза при добавлении свойства pin в gsap
Я использую js библиотеку GSAP для анимирования открытия ноутбука на своей странице. Была задача "не скролить экран пока анимация не закончится" - И я использовал свойство pin: true и моя страница при открытии начала перезагружаться 2 раза. Я это заметил по тексту который находиться выше ноутбука (заглавный текст) у него так же есть анимация, но простая - не связанная с gsap. И по ней я вижу что она выезжает 2 раза и сама страница буд-то дергается. Отключал свойство pin и все становилось на свои места. У меня подозрения на block "pin-spacer" который подгружает свое пространство после через миллисекунды после загрузки страницы. Нужно убрать двойную перезагрузку
Сайт, деплой GH: https://romanvinichenko.github.io/laptop-animation/
JS
gsap.registerPlugin(ScrollTrigger);
gsap.to('.laptop__top', {
scrollTrigger: {
trigger: '.laptop',
start: 'top top',
end: '800px top',
// markers: true,
scrub: 2.5,
pin: true,
},
rotationX: 0,
duration: 5,
});
SCRIPTS
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js">
</script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-
player.js"></script>
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
<script src="js/index.min.js"></script>