scrollmagic with fixed positioned backgrounds

Question

My problem is, I would like to make a nice site with scrollmagic lib with fixed positioned background. Is there a good way, to achieve it?

Right now i have a fixed positioned background wrapper with 2 layers at the "back" (like z-index -1), and a front layer where i have my scenes. (Just like the scrollMagic landing page top with the hat). The first 2 scene has the first background layer as background, and the second 2 has the other background layer as background.

The scenes content has to work like they are fixed positioned too.

index.html (partial)

<section class="bg-sections">
    <div class="scene1-2-backgrounds"></div>
    <div class="scene3-4-backgrounds"></div>
</section>
<section class="scene-1">
    <p>Some text and other content</p>
</section>
<section class="scene-2">
    <p>Some text and other content</p>
</section>
<section class="scene-3">
    <p>Some text and other content</p>
</section>
<section class="scene-4">
    <p>Some text and other content</p>
</section>

I use Tweenmax (GSAP) for the animation.

scenes.js (partial)

    var scrollAnimation1 = new TimelineMax();

    var sequence1 = new TimelineMax(),
        sequence2 = new TimelineMax(),
        sequence3 = new TimelineMax(),
        sequence4 = new TimelineMax();

    sequence1.to($('.masked-text'), 1, {backgroundPosition: "1800px -60px"});
    sequence2.to($('.scene-2 p.bold'), 0.3, {opacity: 0.7});
    sequence3.to($('.scene-2 p.last-txt'), 0.3, {opacity: 1});
    sequence4.to($('.scene-2'), 0.3, {top: '-100vh', opacity:0});

    scrollAnimation1.add(sequence1, 0);
    scrollAnimation1.add(sequence2, 1);
    scrollAnimation1.add(sequence3, 1);
    scrollAnimation1.add(sequence4, 1.3);

    var scene2 = new ScrollMagic.Scene({
        duration: 1000, 
        offset: 400,        
        tweenChanges: true,
        triggerOffset: 0
    })
        .setPin(".scene-2")
        .setTween(scrollAnimation1)
        .addTo(wController);

Right now it is working, but when the user refreshing the browser when she/he is at the middle of the page, all the animations started to play from the beginning.

scrollmagic with fixed positioned backgrounds

0 Answers0