Не могу закрепить с помощью ScrollMagic

Question

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

https://jsfiddle.net/v0z9hb6c/

Мой код JS:

var controller = new ScrollMagic.Controller();
var pinIntroScene = new ScrollMagic.Scene({
    triggerElement: '#intro',
    triggerHook: 0
})
.setPin('#intro')
.addTo(controller);

Я застрялв точке, где я вижу только вступление div.Пожалуйста, помогите!

Answer 1

Вам необходимо указать продолжительность.Например, «100%» прикрепит его к тому же значению, что и высота контейнера.
Длительность по умолчанию равна 0, поэтому элемент будет откреплен только в том случае, если пользователь прокручивает назад после начальной позиции.Поскольку ваш элемент находится вверху страницы, я думаю, именно поэтому вы не видите закрепления.

https://jsfiddle.net/pm1vc7oh/27/

var controller = new ScrollMagic.Controller();
var pinIntroScene = new ScrollMagic.Scene({
    triggerElement: '#intro',
    triggerHook: 0,
    duration: "100%" // can also be 300 (for 300px)
})
.setPin('#intro')
.addTo(controller);