Kevin Powell - Community•4mo ago

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"
        }}}
        >

9 Replies

vicOP•4mo ago

This video is after I set overflow hidden but still u can see scroll but after removing overflow hidden it is more worse than video Like for 1 sec it shows scroll of both x and y and disappear after the contents display

vagge_b•4mo ago

One potential solution is to temporeraly set one of the two pages (the Exiting or the Entering) to position absolute. This way it doesn't disturb the layout

vicOP•4mo ago

It's not working

vagge_b•4mo ago

https://github.com/framer/motion/discussions/1884 might help you

GitHub

Any way to animate the height of a div with height="auto" when the ...

Hey everyone! I'm having a bit of an issue with Framer Motion (using it in React) that I can't seem to solve elegantly. I have a motion.div that has some content in it. That div has a heigh...

vagge_b•4mo ago

(to set height and with of parent when transitioning) Actually, in the video I see that the scrollbar appears only in one direction Do you use some custom link or something to achive this effect?

vicOP•4mo ago

Thats because I set overflow-y hidden I will try and tell u the results tomorrow I tried <AnimatePresence onExitComplete={ ()=> document.body.style.overflow='hidden' } in App.jsx which has Routes And in project.jsx I add like this <motion.div OnanimationStart={ ()=> overflow='hidden' } OnanimationComplte={ ()=> overflow='auto' } It works Do u think it's an good idea to apply like this ??

vagge_b•4mo ago

Well, if it works I guess it's good Just test it quite a bit to make sure it fully works

vicOP•4mo ago

I done other thing but it works for both responsive and normal Thanks

Gaming

Programming

overflow scroll issue during transition in framer-motion