0

I have a parallax/animation page where I pin an element for the duration of its container. I also override the natural mouse scroll behavior with function:

function smoothScroll() {
    var $window = $(window);
    var scrollTime = 1;
    var scrollDistance = 400;

    $window.on("mousewheel DOMMouseScroll", function (event) {
        event.preventDefault();
        var delta = event.originalEvent.wheelDelta / 120 || -    event.originalEvent.detail / 3;
        var scrollTop = $window.scrollTop();
        var finalScroll = scrollTop - parseInt(delta * scrollDistance);

        TweenMax.to($window, scrollTime, {
            scrollTo: { y: finalScroll, autoKill: true },
            ease: Power1.easeOut,
            overwrite: 5
        });
    });
}

This seem to cause my pinned element to be choppy and lagg behind, I suspect the reason is that scrollMagic updates the position of my pinned element again before the unnatural scrolling is complete (without my smoothscroll the pinend element scrolls smooth).

I have googled and read scrollmagic documentation but am still clueless how to make it smooth. Any ideas?

Edit:

Here are two fiddles showing the problem:

No choppy plane but no smooth scroll -> http://codepen.io/anon/pen/azexRm

Choppy plane + smooth scrolling -> http://codepen.io/anon/pen/wBVZYQ

Cœur
  • 37,241
  • 25
  • 195
  • 267
Camathon
  • 514
  • 2
  • 5
  • 22
  • Is it possible for you to create a jsFiddle or Codepen demo of the problem? It would really help understand the situation you are in & suggest a solution to it. – Tahir Ahmed Apr 15 '15 at 18:58
  • I agree with Ahmed, provide a fiddle, if possible. Also make sure to use the latest version of ScrollMagic (2.0.3), as there were some recent fixes regarding jitters. – Jan Paepke Apr 16 '15 at 07:48
  • Thanks for the attention! Added two codepens illustrating the issue. This is with ScrollMagic v 2.0.3 – Camathon Apr 16 '15 at 12:35
  • I have got two suggestions: **1.** I don't think the problem lies with the "smooth scrolling" of yours. The problem perhaps is how you have set up your pinned element, specially the `duration` of your `body-plane` object. If you change this `duration` to say `0`, then your pinned `body-plane` will look as smooth as it should. Go ahead and try it out for yourself. But of course, there is a problem. You want the `body-plane` to stop at a certain point and what `0` does is that it pins the object indefinitely? – Tahir Ahmed Apr 16 '15 at 20:04
  • **2.** Second suggestion that I have for you is to try to associate `y` of the `body-plane` for changing scroll values instead of `top`. If you animate `top` it will produce _jank_ or _stutter_ or whatever you want to call it because it animates objects per pixel. Point is it will not be smooth. I cannot do much without having access to your other JS files as I could only do so much parsing and understanding the _uglified_ version of _js-startpage_ of yours to get to these results. – Tahir Ahmed Apr 16 '15 at 20:14
  • @JanPaepke will hopefully be able to further help out I assume. Sir? – Tahir Ahmed Apr 16 '15 at 20:15
  • @TahirAhmed 1: Yeah, initially i had duration 0, but then the customer thought the plane should land and then there was no more of that ;) It does pin the element indefinably. Also pinning the element seems to mess with the top-position for some reason (i assume it's because of the difference in position between relative and pinned elements). – Camathon Apr 17 '15 at 12:59
  • @TahirAhmed 2: I did try that aswell, but it's very hard (I didn't manage) to set a top position for the plane with translate-y that makes it appear sticky. Sorry for the uglified version :-) i pulled it from the demo site where it's being bundled (also my co-worked removed the smooth scroll ruining the illustration of the choppyness), here's a paste bin http://pastebin.com/raw.php?i=zxKYdvV7 – Camathon Apr 17 '15 at 13:05
  • In the end we might not use the smooth scroll, because co-worker (senior ofc) doesn't like that it messes with a users normal scroll speed. I can understand it to an extent, but for anyone not using a mac track pad the scroll will be choppy either way.. I'd still be interested if and how to solve it anyways :-) – Camathon Apr 17 '15 at 13:08
  • Hi there. I kinda agree with your coworker. Behavior like this can be considered scroll jacking, to which I have a general (personal) disliking. Apart from that even the smooth scroll version works without choppyiness for me. So maybe it's a performance issue? If you plan to investigate further, please post an issue here: https://github.com/janpaepke/ScrollMagic/issues as it's more readable than a comment discussion. :) – Jan Paepke Apr 22 '15 at 12:55

0 Answers0