search

1000ship / react-scroll-motion

🎞 Easy to make scroll animation
https://1000ship.github.io/react-scroll-motion
MIT License
422 stars 47 forks source link

Isn't it available for nextjs? #12

Closed hallen95 closed 2 years ago

hallen95 commented 2 years ago

Hello, i'm kinda new with all the libraries that has to do with transitions and scrolls. I have a project with next, is this library working in it?

1000ship commented 2 years ago

I didn't try that before. Isn't it works?

Omid-Mirzaee-Yazdi commented 2 years ago

I am trying to get it working with next but I keep getting this error "ReferenceError: navigator is not defined" i'm not sure if I am something wrong or there is an issue here is the full console log:

index.js?46cb:323 Uncaught at Object. (\node_modules\react-scroll-motion\dist\utils\environment.js:3:30) at Module._compile (node:internal/modules/cjs/loader:1101:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18) at Object. (f\node_modules\react-scroll-motion\dist\ScrollContainer.js:27:37) at Module._compile (node:internal/modules/cjs/loader:1101:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10) getNodeError @ client.js?374c:7 eval @ index.js?46cb:322 setTimeout (async) _callee$ @ index.js?46cb:305 tryCatch @ runtime.js?ecd4:45 invoke @ runtime.js?ecd4:274 prototype. @ runtime.js?ecd4:97 asyncGeneratorStep @ index.js?46cb:31 _next @ index.js?46cb:49 Promise.then (async) asyncGeneratorStep @ index.js?46cb:40 _next @ index.js?46cb:49 eval @ index.js?46cb:54 eval @ index.js?46cb:46 _initNext @ index.js?46cb:372 initNext @ index.js?46cb:375 eval @ next-dev.js?3515:46 ./node_modules/next/dist/client/next-dev.js @ main.js?ts=1642868722691:117 options.factory @ webpack.js?ts=1642868722691:633 webpack_require @ webpack.js?ts=1642868722691:37 webpack_exec @ main.js?ts=1642868722691:722 (anonymous) @ main.js?ts=1642868722691:723 webpackJsonpCallback @ webpack.js?ts=1642868722691:1179 (anonymous) @ main.js?ts=1642868722691:9

igotDiamonds commented 2 years ago

@Omid-Mirzaee-Yazdi "ReferenceError: navigator is not defined" error happening because Next.js trying to render it on server side, where navigator object is not present. To avoid this issue try use dynamic import with { ssr: false } option

lcskoerner commented 2 years ago

I have the same issue here.

It's breaking on utils\environment.js:3: when trying to read the user agent.

What if instead?

if (typeof window !== undefined) { var isIphone = /iPhone/.test(navigator.userAgent); var isSafari = /Safari/.test(navigator.userAgent); }

beaumontyun commented 2 years ago

Having the same issue with ssr:false. It says "Fade", or "Move" etc. are not functions when I called them.

1000ship commented 2 years ago

I tried to use navigator.userAgent, cause there's some minor issue in iOS Safari. When user scroll up and down, iOS Safari browser's screen height change frequently. (Because of search bar, that UI shrinks when you scroll down, expand when you scroll up.)

So I added that code (environment.ts), that throws that error in NextJS. I just fixed now, sorry for late update guys :(