0

I'm trying to place a very simple scroll animation inside a Framer Motion div, something like this:

<motion.div
      animate={{
        translateY: [1000, 0]
      }}
      transition={{ duration: 1 }}
    >
      <BottomSection>            
        <ScrollDiv>
          <Link to="scroll-down" spy={true} smooth={true} offset={50} duration={500}>
            Scroll
          </Link>
        </ScrollDiv>
      </BottomSection>
    </motion.div>
    
    <Space top="_360" bottom="_360" />

    <Element name="scroll-down">
    </Element>
enter code here

However, if I take my ScrollDiv and place it ouside the motion.div, the scroll works correctly. Is there some kind of incompatibility between these 2 libraries? How can I fix this?

wellick53
  • 67
  • 1
  • 10

1 Answers1

0

While I do not have an answer for you, maybe I can help narrow it down. So I am using react-zoom-pan-pinch library with Framer motion library, and also thought there may be an incompatibility between the two. After disabling react-zoom-pan-pinch, Framer Motion still exhibited the same behavior (fluttering photo position when a second finger touch is registered during a drag event -- which I think is Framer Motion switching back and forth between both finger positions for where to display the photo in the gallery).

I dont know if this is what you are seeing or directly helps, but removing ScrollDiv functionality to see if Framer Motion still causes the issue alone will at least allow you to rule out one library and focus your efforts. As for framer motion, I did find this bug which looks like there is not an active solution yet

https://github.com/framer/motion/issues/185

Kevin Skilton
  • 1