ScrollMagic - Full video background with scrolling parallax text

Question

This is regarding the ScrollMagic (Basic) Section Wipes - Manual. (http://scrollmagic.io/examples/basic/section_wipes_natural.html)

I have used the above with a video background - I want the sections (text, with blank background) to scroll up and into view the same way that they are in the example, and this works fine. However, I need the text to scroll up and away when the user scrolls back down again - it's fairly simple, but I have been struggling with ScrollMagic.

This is an example of what I am trying to achieve (but way more complicated) - www.sbs.com.au/theboat/.

I need to find a way to make the previous section scroll up and disappear as the new one appears into view.

Here is the ScrollMagic code I am using.

 <section class="panel ">
    <b>ONE</b>
 </section>
 <section class="panel ">
    <b>TWO</b>
 </section>
 <section class="panel ">
    <b>THREE</b>
 </section>
 <section class="panel ">
    <b>FOUR</b>
 </section>
 <section class="panel ">
    <b>FIVE</b>
 </section>
                <script>
                    $(function () { // wait for document ready
                        // init
                        var controller = new ScrollMagic.Controller({
                            globalSceneOptions: {
                                triggerHook: 'onLeave'
                            }
                        });

                        // get all slides
                        var slides = document.querySelectorAll("section.panel");

                        // create scene for every slide
                        for (var i=0; i<slides.length; i++) {
                            new ScrollMagic.Scene({
                                    triggerElement: slides[i]
                                })
                                .setPin(slides[i])
                                .addTo(controller);
                        }
                    });
                </script>

You are required to show what you tried. SO is not here to give a tutorial or write code for you. — Rob, Aug 05 '17 at 13:31

score 0 · Answer 1 · answered Aug 05 '17 at 15:52

After searching through the ScrollMagic demos - I have found my answer. I had to change a trigger event - please see edited code below, which is the first part of the script for Scrollmagic on the home page.

 $(function () { // wait for document ready
    // init
    var controller = new ScrollMagic.Controller({
    globalSceneOptions: {
    triggerHook: 'onCenter'
    }
});

The triggerHook was previously 'onLeave'

ScrollMagic - Full video background with scrolling parallax text

1 Answers1