Closed alimartondi closed 2 years ago
I ran into this issue as well. a while back. You can try doing this
const isClientRender = () => typeof window !== 'undefined' && typeof document !== 'undefined'; return <>{isClientRender && YOUR_CODE_GOES_HERE}</>
Hope this help.
JUST ADD TO index.tsx
if (typeof window == "undefined") { // browser code return(<h1></h1>) }
this is work for me hope it helps! 😄
import React, { useEffect, useState } from 'react';
import {
Animator,
ScrollContainer,
ScrollPage,
batch,
Fade,
} from 'react-scroll-motion';
const ScrollSteps = () => {
const [isBrowser, setIsBrowser] = useState(false);
useEffect(() => {
setIsBrowser(typeof window !== undefined ? true : false);
}, []);
return (
<>
{isBrowser && (
<ScrollContainer>
<ScrollPage page={0}>
<Animator animation={batch(Fade())}>
<h2>EXAMPLE1</h2>
</Animator>
</ScrollPage>
<ScrollPage page={1}>
<Animator animation={batch(Fade())}>
<h2>EXAMPLE2</h2>
</Animator>
</ScrollPage>
<ScrollPage page={2}>
<Animator animation={batch(Fade())}>
<h2>EXAMPLE3</h2>
</Animator>
</ScrollPage>
</ScrollContainer>
)}
</>
);
};
export default ScrollSteps;
I think this should be in the readme because I don't think it's a bug
Great work btw! I love the component
Hey, instead of importing ScrollContainer from "react-scroll-motion" directly, you can import it like this.
const ScrollContainer = dynamic(
() => import("react-scroll-motion").then((mod) => mod.ScrollContainer),
{ ssr: false }
);
Worked for me!
Helpfully , thank you!
Thankyou everyone, your answers really helped me, even i'm confused which one to try! 😂
Worked for me as well! Thank you guys :)
hello, I really like using your work. but I got error when using it for my Next Js project. When the website is rendered for the first time it runs normally, but when I refresh (reload) the error "window is not defined" appears, thank you