18 replies

overflow scroll issue during transition in framer-motion

i post the video of my project in comment of these posts
i set overflow hidden and it works but i cant scroll on projects section which needs scroll but i try overflow auto for only project.jsx but it doesnt work cuz i set overflow hidden on body on other components , if i set overflow hidden on certain div it doesnt work

for now i only sent the framer motion animation code ..
code :

 <motion.div id="project-container" 
        initial={{
            opacity:0
        }}
        animate={{
            opacity:1,transition:{
                delay:0.3,
            }
        }}
        exit={{x: "100vw" , transition:{
            ease:"easeInOut",
            duration:0.3
        }}}
        >

 <motion.div id="project-container" 
        initial={{
            opacity:0
        }}
        animate={{
            opacity:1,transition:{
                delay:0.3,
            }
        }}
        exit={{x: "100vw" , transition:{
            ease:"easeInOut",
            duration:0.3
        }}}
        >

Home.jsx

<motion.div id="container" 
        initial={{ opacity:0 }}
        animate={{ 
            opacity :  1 ,transition:{
            delay:0.3
        }}}
        exit={{x:"-100vw",transition:{
            ease:"easeInOut",
            duration:0.3,
        }}}
       
        >

<motion.div id="container" 
        initial={{ opacity:0 }}
        animate={{ 
            opacity :  1 ,transition:{
            delay:0.3
        }}}
        exit={{x:"-100vw",transition:{
            ease:"easeInOut",
            duration:0.3,
        }}}
       
        >

contact.js

   <motion.div id="contact-container" 
        initial={{
            opacity:0
        }}
        animate={{
            opacity:1
        }}
        exit={{x: "100vw" , transition:{
            ease:"easeInOut",duration:0.3
        }}}

   <motion.div id="contact-container" 
        initial={{
            opacity:0
        }}
        animate={{
            opacity:1
        }}
        exit={{x: "100vw" , transition:{
            ease:"easeInOut",duration:0.3
        }}}

About.js

 <motion.div id="skills-container"
        initial={{
            opacity:0
        }}
        animate={{
            opacity:1,transition:{
                delay:0.3
            }
        }}
        exit={{x: "-100vw" , transition:{
            ease:"easeInOut"
        }}}
        >

 <motion.div id="skills-container"
        initial={{
            opacity:0
        }}
        animate={{
            opacity:1,transition:{
                delay:0.3
            }
        }}
        exit={{x: "-100vw" , transition:{
            ease:"easeInOut"
        }}}
        >

KP-C

Kevin Powell - Community•2y ago•

18 replies

vic

overflow scroll issue during transition in framer-motion

 <motion.div id="project-container" 
        initial={{
            opacity:0
        }}
        animate={{
            opacity:1,transition:{
                delay:0.3,
            }
        }}
        exit={{x: "100vw" , transition:{
            ease:"easeInOut",
            duration:0.3
        }}}
        >

 <motion.div id="project-container" 
        initial={{
            opacity:0
        }}
        animate={{
            opacity:1,transition:{
                delay:0.3,
            }
        }}
        exit={{x: "100vw" , transition:{
            ease:"easeInOut",
            duration:0.3
        }}}
        >

Home.jsx

<motion.div id="container" 
        initial={{ opacity:0 }}
        animate={{ 
            opacity :  1 ,transition:{
            delay:0.3
        }}}
        exit={{x:"-100vw",transition:{
            ease:"easeInOut",
            duration:0.3,
        }}}
       
        >

<motion.div id="container" 
        initial={{ opacity:0 }}
        animate={{ 
            opacity :  1 ,transition:{
            delay:0.3
        }}}
        exit={{x:"-100vw",transition:{
            ease:"easeInOut",
            duration:0.3,
        }}}
       
        >

contact.js

   <motion.div id="contact-container" 
        initial={{
            opacity:0
        }}
        animate={{
            opacity:1
        }}
        exit={{x: "100vw" , transition:{
            ease:"easeInOut",duration:0.3
        }}}

   <motion.div id="contact-container" 
        initial={{
            opacity:0
        }}
        animate={{
            opacity:1
        }}
        exit={{x: "100vw" , transition:{
            ease:"easeInOut",duration:0.3
        }}}

About.js

 <motion.div id="skills-container"
        initial={{
            opacity:0
        }}
        animate={{
            opacity:1,transition:{
                delay:0.3
            }
        }}
        exit={{x: "-100vw" , transition:{
            ease:"easeInOut"
        }}}
        >

 <motion.div id="skills-container"
        initial={{
            opacity:0
        }}
        animate={{
            opacity:1,transition:{
                delay:0.3
            }
        }}
        exit={{x: "-100vw" , transition:{
            ease:"easeInOut"
        }}}
        >

overflow scroll issue during transition in framer-motion

Similar Threads

overflow scroll issue during transition in framer-motion

Similar Threads

Similar Threads

Similar Threads