Scrollmagic: My parallax scrolling did not move smoothly.

Created on 3 Oct 2015 · 13Comments · Source: janpaepke/ScrollMagic

parallax scrolling test

Hello there. I made a parallax scrolling with ScrollMagic. But it has little issue like this GIF image. When scrolling, the images are scrolled but move up and down little repeatedly in the same time. This issue can be found in Safari, Firefox, Chrome on OS X 10.11 Did I code wrong source? Please confirm the source. Thanks a lot read it. Have a nice code:>

index.html

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="index.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="greensock/TweenMax.min.js"></script>
        <script src="js/scrollmagic/uncompressed/ScrollMagic.js"></script>
        <script src="js/scrollmagic/uncompressed/plugins/animation.gsap.js"></script>
        <script src="js/scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script>
        <script type="text/javascript" src="skrollr.min.js"></script>
    </head>
    <body style="height: 15500px">
        <img id="logo" src="logo.png"></img>
        <img id="logo-fix" src="logo.png" style="position: fixed; right: 5px;"</img>
        <h2 id="pt1" style="position: absolute">ParallaxTest 1</h2><br><br>
        <h2 id="pt2" style="position: absolute">ParallaxTest 2</h2>


<!-- Parallax scroll code start -->
        <section id="trigger2">
            <div id="pxPt" style="position: relative">
                <!-- You'll be not able to see loose1.png in GIF, cause did not recored. -->
                <img id="pt1" style="position: absolute" src="loose1.png"></img>
                <img id="pt2" style="position: absolute" src="loose2.png"></img>
                <img id="pt3" style="position: absolute" src="loose3.png"></img>
            </div>
        </section>
<!-- Parallax scroll code end -->

    </body>
</html>

<script>
    $(function () { // wait for document ready
        var controller = new ScrollMagic.Controller();
        // build scene
        var logoScene = new ScrollMagic.Scene({
            pushFollowers: false,
            duration: 0,  // the scene should last for a scroll distance of 100px
            offset: 0      // start this scene after scrolling for 50px
        })
        .setPin("#logo") // pins the element for the the scene's duration
        .addTo(controller);


// Parallax scroll code start
        var tween = new TimelineMax()
        .add([
            TweenMax.fromTo("#pxPt #pt1", 1, {scale: 1, autoAlpha: 0.05, top: 150}, {top: 15250, ease: Linear.easeNone}),
            TweenMax.fromTo("#pxPt #pt2", 1, {scale: 1, autoAlpha: 0.42, top: 50}, {top: 15350, ease: Linear.easeNone}),
            TweenMax.fromTo("#pxPt #pt3", 1, {scale: 1, autoAlpha: 0.42, top: 75}, {top: 15500, ease: Linear.easeNone})
        ]);

        var parallaxScene = new ScrollMagic.Scene({
            triggerElement: "#trigger2",
            duration: 15500
        })
        .setTween(tween)
        .addIndicators()
        .addTo(controller);
// Parallax scroll code end

    });
</script>

Source

say8425

Most helpful comment

I had a similar issue with a parallax section after a pinned section.
After half a day of struggles I solved it adding a fixed positioned empty element before the parallax section.

CSS workaround (to keep HTML clean)

#parallax-section::before {
    position: fixed;
    content: '';
}

Let me know if it works for you too.

Alberto2686 on 13 Nov 2016

👍10

All 13 comments

I make the source more light. So frequent of moving up and down issue is reduced. But this issue is still remained.

before

<section id="trigger2">
    <div id="pxPt" style="position: relative">
        <img id="pt1" style="position: absolute" src="loose1.png"></img>
        <img id="pt2" style="position: absolute" src="loose2.png"></img>
        <img id="pt3" style="position: absolute" src="loose3.png"></img>
    </div>
</section>

...

var tween = new TimelineMax()
    .add([
        TweenMax.fromTo("#pxPt #pt1", 1, {scale: 1, autoAlpha: 0.05, top: 150}, {top: 15250, ease: Linear.easeNone}),
        TweenMax.fromTo("#pxPt #pt2", 1, {scale: 1, autoAlpha: 0.42, top: 50}, {top: 15350, ease: Linear.easeNone}),
        TweenMax.fromTo("#pxPt #pt3", 1, {scale: 1, autoAlpha: 0.42, top: 75}, {top: 15500, ease: Linear.easeNone})
    ]);

    var parallaxScene = new ScrollMagic.Scene({
        triggerElement: "#trigger2",
        duration: 15500
    })
    .setTween(tween)
    .addIndicators()
    .addTo(controller);

after

<img id="ptt1" src="loose1.png"></img>
<img id="ptt2" src="loose2.png"></img>
<img id="ptt3" src="loose3.png"></img>

...

var tween = new TimelineMax()
    .add([
        TweenMax.fromTo("#ptt1", 1, {scale: 1, autoAlpha: 0.05, top: 150}, {top: 15250, ease: Linear.easeNone}),
        TweenMax.fromTo("#ptt2", 1, {scale: 1, autoAlpha: 0.42, top: 50}, {top: 15350, ease: Linear.easeNone}),
        TweenMax.fromTo("#ptt3", 1, {scale: 1, autoAlpha: 0.42, top: 75}, {top: 15500, ease: Linear.easeNone})
    ]);

    var parallaxScene = new ScrollMagic.Scene({
        triggerElement: "#pxPt",
        duration: 15500
    })
    .setTween(tween)
    .addIndicators()
    .addTo(controller);

say8425 on 3 Oct 2015

Hi, it's probably because you're moving with top and right instead of transforms. This isn't a problem with ScrollMagic- top and right cause repaints during animation, and are costly, while transforms perform better. For more info, you can check out http://jankfree.org/ or aerotwist's http://csstriggers.com/.

You can also do some hardware acceleration on the elements themselves. I wrote this about skrollr, but it applies for scrollmagic, too: http://codepen.io/sdras/post/hardware-accelerating-parallax-with-skrollr

Hope this helps!

sdras on 24 Dec 2015

Hey,
Actually the scroll magic demo itself is buggy : http://scrollmagic.io/examples/advanced/parallax_sections.html
If you move slowly the scrollbar, you can see a slight flickering of the background. It is very strange because scrollmagic implements requestAnimationFrame.
I gave up using scrollmagic with parallax backgrounds.

nicolaspetitjean on 24 Dec 2015

I don't visually see any jank there, and if I turn on the paint rectangles rendering in devtools for debug, it's not showing any (It would show green if there was a lot of jank). At any rate, using left, top, right etc properties will cause poor performance on update such as animation or scroll.

screen shot 2015-12-24 at 3 57 40 pm

sdras on 25 Dec 2015

The problem seems to be "firefox only" and while moving the scrollbar with mouse pointer, not the wheel. Which browser do you use ?

nicolaspetitjean on 26 Dec 2015

Nope. All of browsers works wrong.

say8425 on 26 Dec 2015

Facing a similar issue. Instead of scroll i have multiple sticky element pinned on the page. After getting pinned the sticky elements get displaced a little when i am scrolling before settling back on the desired place.

Any solutions found ?

vinaynb on 26 Feb 2016

I ask this issue for a long time ago, but I can't find solution. So I did not use this method.

say8425 on 26 Feb 2016

Maybe this issue thread has some pointers for you. I am meanwhile working on implementing the fix they are talking about in that thread...will update if i get it to work.

vinaynb on 26 Feb 2016

I had a similar issue with a parallax section after a pinned section.
After half a day of struggles I solved it adding a fixed positioned empty element before the parallax section.

CSS workaround (to keep HTML clean)

#parallax-section::before {
    position: fixed;
    content: '';
}

Let me know if it works for you too.

Alberto2686 on 13 Nov 2016

👍10

Wow thanks @Alberto2686 it worked for me !! Where did you find this ?

akkolad on 30 Jan 2017

@akkolad I created an essential case study to reproduce the issue and then I started to reduce it until I found the problem.
So a very frustrating process as you can imagine...

Alberto2686 on 31 Jan 2017

👍2

@Alberto2686 you are my hero. I can't believe this worked. bravo.