React Framer motion animation works in development but doesn't work in production build

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