3

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  ---------------------------------------------->>
Agent Zebra
  • 4,410
  • 6
  • 33
  • 66
  • 1
    Are you looking for something like this: [[Link](http://jsfiddle.net/tahirahmed/pg33x29f/)]? – Tahir Ahmed Jun 24 '15 at 12:24
  • Close to that, I want the `A` to go to `opacity 0` while it's still visible on the page. – Agent Zebra Jun 25 '15 at 01:20
  • 1
    Try playing with `y` & `yPercent` values set inside `TweenMax.set` & the first `new ScrollMagic.Scene({ ... })` lines respectively e.g. set `y` to `250` & set `yPercent` to `200`. This is an ugly / hack-y solution & my lack of understanding of `ScrollMagic` is clearly at play here. I am sure there must be a much cleaner & proper way to do this, but I am not sure how exactly. – Tahir Ahmed Jun 25 '15 at 05:00

1 Answers1

2

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

Mike P
  • 178
  • 8