CODEWITHSUNDEEP
jqueryscrollmagic
Mike
Mike

Reputation: 5818

ScrollMagic Pin and reveal issue

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>

Upvotes: 3

Views: 2973

Answers (1)

Jan Paepke
Jan Paepke

Reputation: 2027

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

Upvotes: 2

Related Questions