0

I am experiencing difficulty getting my ScrollMagic project to behave with using media queries. When I remove the .setPin from the Scene, the queries work perfectly and my elements sit exactly where they should. However, when I turn it back on, the html will not adhere to the media query rules as set out. It will only remember the ORIGINAL "left" attribute that existed when the page rendered.

The HTML looks like this:

<section class="container-fluid purple" id="scene02">
    <img src="img/contact-us-btn.png" class="yellow-btn" data-section="#scene07">
    <div class="container scene">
        <ul class="tabs activetabs">
            <li class="active"><img src="img/icons/section-02-1.png">
                <p>Security</p>
            </li>
            <li><img src="img/icons/section-02-2.png">
                <p>Collaboration</p>
            </li>
            <li><img src="img/icons/section-02-3.png">
                <p>Connectivity</p>
            </li>
        </ul>
    </div>
</section>

The scrollmagic JS looks like this:

// -------------------
// SCENE 02
// -------------------
var scene02_TL = new TimelineLite();
scene02_TL.to("#scene02 .tabs img", 1, {scale:0.6, ease: Linear.easeNone});
scene02_TL.to("#scene02 .tabs p", 1, {scale:1.4, ease: Linear.easeNone});
// build scene
scene_02_main = new ScrollMagic.Scene({triggerElement: "#scene02", duration: 560,offset:800})
                .setTween(scene02_TL)
                .setPin("#scene02 .tabs")
                .addIndicators({name: "02_1 (duration: 560)"}) // add indicators (requires plugin)
                .addTo(controller);

And finally, the LESS that outputs the css looks like this:

.tabs {
    z-index: 17;

    @media screen and (min-width:1200px) {
        .setPosition(@scene-02-starty, 220px, 722px);
        .setDimensions(900px, auto);
    }
    @media screen and (min-width:993px) and (max-width:1199px) {
        .setPosition(@scene-02-starty, 200px, 722px);
        .setDimensions(770px, auto);
    }
    @media screen and (max-width:992px) {
        .setPosition(@scene-02-starty, 40px , 722px);
        .setDimensions(676px, auto);
    }

}

As you can see I have even hard coded the break-points and have checked in inspector, they all fire at the correct places. I have also tried various forms of resets and refreshes..

scene_02_main.refresh();
controller.updateScene([scene_02_main]);
controller.update(true);

Any advice would be greatly appreciated.

RiaanP
  • 91
  • 8

1 Answers1

0

The top-rated answer in this thread helped me solve this issue:

iOS 9 Safari: changing an element to fixed position while scrolling won't paint until scroll stops

I basically added position: sticky; to the mix and I changed my approach from using left and top positioning to using padding to position my elements in a full width container.

.tabs {
    z-index: 17;
    .setDimensions(100%, auto);
    left: 0 !important;
    right:  0 !important;
    transform: translate3d(0px,722px,0px);
    position: -webkit-sticky;
    position: sticky;

    @media screen and (min-width:1200px) {
        padding:0 80px 0 257px;
    }
    @media screen and (min-width:993px) and (max-width:1199px) {
            padding: 0 6px 0 207px;
    }
    @media screen and (max-width:992px) {
            padding: 0 20px;
    }

}
RiaanP
  • 91
  • 8