search

locomotivemtl / locomotive-scroll

🛤 Detection of elements in viewport & smooth scrolling with parallax.
https://locomotivemtl.github.io/locomotive-scroll
MIT License
7.94k stars 1.12k forks source link

data-direction attr not refreshing correctly #283

Open nixks opened 3 years ago

nixks commented 3 years ago

Greetings everyone,

I have been trying to implement the header hide on scroll using the direction attribute as seen here #127

I noticed this weird behavior every time the page is scrolled the data-direction is refreshed as supposed to but in the end of scroll (when the loco scroll is complete) the data-direction is always set to "up" as final. Not my first implementation of LC but first time I get this.

LC is used in combination with GSAP its plugin Scrolltrigger. I've tried to set it manually with different calls but the ending is always the same. The only way to unstuck this behavior is either by scrolling to the end, that's where LC starts to set the attribute correctly. Not a solution ofc in any way.

Another thing I noticed is that it is also gets the correct behavior once I set an onclick event to the first section of my page to .scrollTo my 2nd section.

Any advice is welcome.

nixks commented 2 years ago

Hi again, I came around with a temp fix on this if anyone face the same situation.

On LS instance initialization

const locoScroll = new LocomotiveScroll({ el: document.querySelector(".smooth-scroll"), smooth: true, **multiplier: 0.8,** reloadOnContextChange: true, getDirection: true });

changing the decimal value of the multiplier seems that fixes the data-attribute direction to maintain the direction scrolled instead of changing it to always "up" as mentioned. This seems to work on multiplier values 0.6 and above. Setting the multiplier to a value of 0.5 and lower causes the problem to occur.