Scrollmagic: issue with animating content inside parallax sections

Question

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

Here's a fiddle of my experiment.

I can't get the letter A in #box to move how I want it. I'd tried adding a bounding box and using that as the triggerElement, that did not work.

On scrolldown it should move down 150px and fade out. Right now it's using "#parallax1" as its triggerElement and is fading out once it reaches the bottom of that section. I want it to fade out before the bottom of that section. How do I get it to do that?

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

Answer 1

Maybe you can use an element with a position relative of #parallax1 that is put (example) 20px above the bottom of #parallax1 and use that as a trigger