ScrollMagic Pin and reveal issue

Question

I'm trying to pause a picture for some time. After scrolling a little, the picture (part1) should fade out and reveal the underlying picture. After some more scrolling both should scroll out.

Im using http://janpaepke.github.io/ScrollMagic but somehow the combination of pinning and animating just doen't work.

<body>
<script>
    var controller;
    $(document).ready(function($) {     
        controller = new ScrollMagic();
    });
</script>

<div id="trigger1"></div>
<section>   
    <img id="part1" src="img/part1.jpg" height="950" width="" />
    <img id="part2" src="img/part1.jpg" height="950" width="" />
</section>

<div class="spacer s10"></div>
<div id="trigger2"></dv>

<script>
    $(document).ready(function($) {

        var scene = new ScrollScene({triggerElement: "#trigger1", duration: 1600})
                        .setPin("#part1")
                        .addTo(controller);

        var scene = new ScrollScene({triggerElement: "#trigger2"})
                        .setTween(TweenMax.to("#part1", 2, {opacity: 0}))
                        .addTo(controller);

        // show indicators (requires debug extension)
        scene.addIndicators();
    });
</script>
</body>

score 2 · Accepted Answer · answered Oct 06 '14 at 13:53

If you only use the first image as the pin target, only the first image will be pinned. (duh)
This causes the second image to be pushed down until the pin is complete.

To achieve your described effect you need to pin the container (in you case the section) of both images. Then fade out the image as you'd expect. Make sure to set the first image as position: absolute and elevate the z-index.

hope this helps,
J

ScrollMagic Pin and reveal issue

1 Answers1