Scrollmagic: problem with animating content inside parallax sections

I am experimenting with parallax and scrollmagic. In the parallax example from scrollmagic demo I am trying the animated content in the first parallax section.

Here's a script for my experiment .

I can’t get it letter A

to #box

move the way I want it. I tried adding a bounding box and using it as a triggerElement, which didn't work.

In scrolling, it should move down 150px and disappear. Right now it uses "#parallax1"

like triggerElement

and disappears as soon as it reaches the bottom of this section. I want it to disappear at the bottom of this section. How can i do this?

What am I doing wrong?

//////////////////////////////////////////////////////
////////////   //// Parallax Animation    ////////////
//////////////////////////////////////////////////////

// init controller
var controller = new ScrollMagic.Controller({
    globalSceneOptions: {
        triggerHook: "onEnter",
        duration: "200%"
    }
});

// build scenes
// build tween1
var tween1 = new TimelineMax();
tween1.to("#parallax1 > div", 1, {
    y: "80%",
    ease: Linear.easeNone
});

var scene = new ScrollMagic.Scene({
    triggerElement: "#parallax1"
})
    .setTween(tween1)
    .addIndicators()
    .addTo(controller);

new ScrollMagic.Scene({
    triggerElement: "#parallax1"
})
    .setTween("#box", 0.10, {
    alpha: 0,
    yPercent: 0,
    y: "800%",
    ease: Linear.easeNone
})
    .addIndicators()
    .addTo(controller);

new ScrollMagic.Scene({
    triggerElement: "#parallax2"
})
    .setTween("#parallax2 > div", {
    y: "80%",
    ease: Linear.easeNone
})
    .addIndicators()
    .addTo(controller);

new ScrollMagic.Scene({
    triggerElement: "#parallax3"
})
    .setTween("#parallax3 > div", {
    y: "80%",
    ease: Linear.easeNone
})
    .addIndicators()
    .addTo(controller);

/////----  End Parallax Animation  ---------------------------------------------->>