How to interpolate justifyContent with scroll in framer-motion?

Question

I have code that works to animate between x values, however it does not when trying to go from justify-content: center to left.

here is the code snippet:

function Navbar() {
  const { scrollY } = useScroll();
  const x = useTransform(scrollY, [0, 100], ["center", "left"]);

  return (
    <motion.div 
    layout
      className={styles.parent}
      style={{ justifyContent: x, display: "flex" }}
      transition={{
        duration: 0.5
      }}
    > 
      <Image
            src="/BlackLogo-2.svg"
            alt="Cg Logo"
            width={100}
            height={100}
            style={{padding: 20,}}
            priority
          />
    </motion.div>
  )

}

Answer 1

I've figured out a solution. You simply use the useMotionValueEvent function to check whether you have scrolled beyond a point or not and set it as a state, then you have to wrap your child (my image) in a motion.div, while setting the class in the outer div, like so:

function Navbar() {
  const { scrollY } = useScroll();
  const [Scrolled, setScrolled] = useState(false);
  
  useMotionValueEvent(scrollY, "change", (latest) => {
    if (latest > 200) {
      setScrolled(true);
    }
    else {
      setScrolled(false);
    }
  })

  return (
    <div 
      style={{justifyContent: Scrolled? "left" : "center"}}
      className={styles.icon}
    > 
      <motion.div
      layout
      transition={{type: "spring", stiffness: 700, damping: 30}}
      >
        <Image
          src="/BlackLogo-2.svg"
          alt="Cg Logo"
          width={100}
          height={100}
          style={{padding: 20,}}
          priority
        />
      </motion.div>
    </div>
  )

}