React Framer motion animation 在开发中有效，但在生产构建中无效

Question

Here, in the production build the opacity and translateY values are stuck to their default values and wont change with scrolling, whereas they do change with scrolling in the development build.

const Subcard = ({title, text, index, scrollDiv})=>{
  const myRef = useRef(null)
  const { scrollYProgress } = useScroll({
    container: scrollDiv,
    target: ref,
    offset: ["start end", "end 0.75"]
  })

  const opacity = useTransform(scrollYProgress, [0,1], [0,1])
  const translateY = useTransform(scrollYProgress, [0, 1], [600, 0])

  return(
    <motion.div
      ref = {myRef}
      style={{
        padding:'2rem', 
        borderRadius:'0.25rem',
        paddingBottom:'2rem',
        backgroundColor:'rgb(235,235,235,0.1)',
        marginRight:'1.5rem',
        marginLeft:'1.5rem',
        marginTop:`${index*5}rem`,
        lineHeight:'1.75rem',
        letterSpacing:'0.075rem',
        translateY,
        opacity
      }}
    >
      <div style={{fontSize:'1.5rem', marginBottom:'1rem'}}>{title}</div>
      <div>{text}</div>
    </motion.div>
  )
}

After some trial and error I could replicate this in the development server if I remove the line: container: scrollDiv

But I couldn't figure out how to resolve this issue

Answer 1

Hey I was going nuts because of the same problem. So you're doing exactly what I did, passing the container ref in the prop . In order for this combination to work, add layoutEffect: false, in useScroll 's first parameter ( UseScrollOptions ).

const { scrollYProgress } = useScroll({
    layoutEffect: false,
    container: scrollDiv,
    target: ref,
    offset: ["start end", "end 0.75"]
  })