Pages sometimes get stuck

[derwaldgeist]

I am using react-page-scroller in combination with framer-motion, which controls animations within a page.

This worked well for about 3 pages. But when I added more, I noticed a weird phenomenon: Sometimes, pages get "stuck", i.e. they won't move anymore when I scroll the mouse or use the cursor keys. This happens in both directions, down and up.

Any idea what might cause this? Might this be an interference between react-page-scroller and framer-motion? I am using framer-motion's viewport detection to trigger the in-page animations once page-scroller brings the page into view.

Here's a sample:

<motion.div
    initial="hidden"
    whileInView="visible"
    viewport={{ once: true }}
    transition={{ duration: 0.5 }}
    variants={{
        hidden: { height: '0%' },
        visible: { height: '100%' }
    }}
>

[VikLiegostaiev]

Hi, @derwaldgeist . Are you able to reproduce the same behaviour without framer-motion? Honestly, haven't worked with framer-motion, so have no idea

[daancs]

I had this same error using state when scrolling. I think it's due to react maybe reloading the component when it got updated and that messed with the scrolling?