Can't pin using ScrollMagic

Question

I cannot, for the life of me, get a simple pin to work using ScrollMagic. I don't know what I'm doing wrong. The website, as it is now, cannot get any simpler, yet when I try to add one pin to a div, it doesn't work. I've spent hours trying to figure it out, but yet here I am.

https://jsfiddle.net/v0z9hb6c/

My JS code:

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

I'm currently stuck at a point where all I see is the intro div. Please help!

Answer 1

You need to specify a duration. For example "100%" will pin it for the same value as the container height.
Default duration is 0, so the element will only be unpinned if the user scrolls back past the start position. Because your element is at top of page, I think this is why you see no pinning.

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);