So I created this preloader that shows when the var loading = true but I want the loader to fade out. This is what my files look like.
Home page with all the stuff.
return (
<>
{loading ? (
<Loading />
) : (
<>
<Navbar />
<Hero />
<About />
<Skills />
<Contact />
</>
)}
</>
);
Loading function file
const Loading = () => {
const pathVariants = {
hidden: {
opacity: 0,
pathLength: 0,
},
visible: {
opacity: 1,
pathLength: 1,
transition: {
duration: 2,
ease: 'easeInOut',
},
},
};
const cVariants = {
hidden: {
opacity: 0,
},
visible: {
opacity: 1,
transition: {
duration: 1,
ease: 'easeInOut',
delay: 2,
},
},
};
return (
<>
<AnimatePresence>
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
<PreLoader>
<Header>
<motion.svg
width='286'
height='209'
viewBox='0 0 286 209'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<motion.g variants={cVariants} initial='hidden' animate='visible'>
<path
id='C'
d="svglol"
fill='#FF564A'
/>
</motion.g>
<motion.g>
<motion.path
id='Polygon 1'
d="svglol"
stroke='#FF564A'
variants={pathVariants}
initial='hidden'
animate='visible'
/>
</motion.g>
</motion.svg>
</Header>
</PreLoader>
</motion.div>
</AnimatePresence>
</>
);
};
export default Loading;
So how can I make it so that the Loading function fades out? I tried many things such as AnimatePresence wrapped around the Loader itself but that doesn't seem to work. (I am also using styled-components btw)
return (
<AnimatePresense>
{loading ? (
<Loading key="loading" />
) : (
<React.Fragment key="main">
<Navbar />
<Hero />
<About />
<Skills />
<Contact />
</ React.Fragment>
)}
</AnimatePresense>
);
Tips to get this working
I know it is boring, but I might reread the AnimatePresense doc a couple of times. I had to read it 2 or 3 times personally before I figured out all the gotchas
Cheers
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.