avoid jitter without using fixed position

[m9dfukc]

hey,

I made some parallax animations using stellar.js ... in Chrome everything looks fine but using other browsers there is some heavy jittering (for all elements using a ratio below 1). Looking through the documentation there is written that position: fixed should be used to avoid that ... unfortunately position fixed isn't an option as I would lose the possibility to do relative positioning to the "mother" element. Is there some workaround or do you have some tips how to avoid the stutter without using a fixed position?

thanks

[markdalgleish]

The problem is that without fixed positioning, you're essentially pitting the browser's JavaScript speed against its rendering speed.

Every time you scroll, the browser is moving the element to where it would normally be, then Stellar.js is repositioning it backwards to an earlier position. In fast browsers like Chrome you might not notice it, whereas in slower browsers it is painfully obvious.

The two workarounds are:

1. Use fixed positioning, which essentially detaches the element from being affected by scroll events; or
2. Use a background image, since background images can be fixed.

Apart from that, there isn't much you can do about it. As far as I'm aware, whichever solution works for you would have to be a variant of those two workarounds.

[splitbrain]

I'm fighting with the same problem. I'm working on a horizontal page with multiple scenes. Each scene shall have its own parallax scrolling. Using absolute positioned elements (relative to their scene parent) works, but jitters.

I'm trying to come up with a way to use fixed positioning, but having problems to position elements relative to their parent then.

I believe it should be possible to let the library calculate the correct fixed position itself. Eg. check if the parent is in the viewport and where it is located relative to the browser window, then set the fixed position of the element appropriately.

Any chance to get something like this implemented (maybe with some data-fixed-relative parameter?).

[markdalgleish]

I think this might be possible without any extra attributes, if we decide that a fixed element inside an element with data-stellar-offset-parent="true" means that it should first be offset by its parent's offset. I'll try this out and see if it feels right.

[arusak]

Hello,

Can't make it work with position: fixed. I have a vertical series of sections, each has its own parallax (somehow like stellar.js homepage but vertical).

When positioning absolutely, everything works fine. Inner div are aligned to their offset parent section.
http://test.33kita.ru/felines-absolute/

To avoid jitter I have to use position: fixed, and it really removes jitter, but the divs are aligned to window (seems to me).
http://test.33kita.ru/felines-fixed/

How can I tell stellar.js to properly align fixed elements?

[philsalesses]

reopen please, this is a big deal

[mprofitlich]

I'd be really happy, too, if you could please reopen this issue. You wrote it might be possible to implement this easily, is it?

[bcamarneiro]

+1

[ptbello]

+1

[tomascharad]

+1

[stilltli]

+1

[Lucaz5520]

Wow I am 2 years late but I ran into this question and had the same situation tonight where I needed to stop the jitter but without using position: fixed and I have found a solution and hope this helps anyone else out there.

So I was using GreenSock's TweenMax building some cool stuff when I noticed that when it's "ScrollToPlugin" is activated it does not cause the elements to jitter even when they have a ration below 1. So all you would need to do (at least in my case) is to use a smooth scrolling feature and it will stop the jitters.

Include TweenMax & ScrollToPlugin then use this piece of code
(These 2 assets can be found HERE )

$(function(){

    var $window = $(window);        //Window object

    var scrollTime = 1.2;           //Scroll time
    var scrollDistance = 170;       //Distance. Use smaller value for shorter scroll and greater value for longer scroll

    $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,   //For more easing functions see http://api.greensock.com/js/com/greensock/easing/package-detail.html
                autoKill: true,
                overwrite: 5                            
            });

    });

});

Hope this helps someome