search

locomotivemtl / locomotive-scroll

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

GatsbyJS: getTranslate() errors with loadable Components and lazy loaded images on/after page transition #167

Open sgeier opened 4 years ago

sgeier commented 4 years ago

Hello 👋

I am seeing the below JS error actually spamming my console until scroller.update() is called. My setup uses Loadable components as well as lazy-loaded images - so a quite challenging setup for a scroller.

Describe the bug The error below appears during a page transition and slightly after as well it seems. If I start scrolling before the actual pages are completely rendered the console gets spammed with that error. In my case, I have only defined one data-scroll-section in my layout file.

image

console.error output

Uncaught TypeError: Cannot read property 'match' of undefined at getTranslate (locomotive-scroll.esm.js:1661) at _default.transform (locomotive-scroll.esm.js:2317) at locomotive-scroll.esm.js:2380 at Array.forEach (<anonymous>) at _default.transformElements (locomotive-scroll.esm.js:2335) at _default.checkScroll (locomotive-scroll.esm.js:2040) at locomotive-scroll.esm.js:1996

To Reproduce Steps to reproduce the behavior: The error appears when switching between views in GatsbyJS.

Expected behavior I expect the error not to appear.

Screenshots If applicable, add screenshots to help explain your problem. image

Desktop (please complete the following information):

Thank you 👊

sgeier commented 4 years ago

Do you need more information on the topic?

droplab commented 3 years ago

I'm encountering a similar issue when loading a component that uses locomotive scroll except I only see it during resizing.

I am destroying the instance when the component unmounts, then re-initing when it mounts the next time.

nicubarbaros commented 2 years ago

I am also facing the problem when the resize happens :)

rekhchand commented 2 years ago

@sgeier Have you found any workaround. I'm facing same issue :(

sgeier commented 2 years ago

Unfortunately not. I got it to work somehow by initializing things with delays or changing the order of how things load.

I ended up not using locomotion because it doesn't work with middle mouse on windows which is wide spread among art ppl.

BrandonLandgraffBranding commented 2 years ago

I'm having the same issue. Whenever I resize the browser I encounter a GatsbyJS: getTranslate() error!

rekhchand commented 2 years ago

In my case, figured it was something to do with routing using gatsby-link. So I replaced <Link> with <a>. I know it's a bad practice but the website I'm working on have just 2 main pages (Home & contact).

@BrandonLandgraffBranding are you using scrollTrigger or intersectionObserver in your project?