Tipps für justifyContent mithilfe der Scroll-Interpolation von Framer-Motion

Question

Ich habe einen Code, der zwischen x-Werten animiert, aber er funktioniert nicht, wenn ich versuche, von justify-content: center nach left zu wechseln.

Das Folgende ist ein Codeausschnitt:

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

  zurückkehren (
    <motion.div
    Layout
      className={styles.parent}
      style={{ justifyContent: x, display: "flex" }}
      Übergang={{
        Dauer: 0,5
      }}
    >
      <Bild
            src="/BlackLogo-2.svg"
            alt="Cg-Logo"
            width={100}
            Höhe={100}
            style={{padding: 20,}}
            Priorität
          />
    </motion.div>
  )

}

Answer 1

我找到了一个解决方案。你只需使用useMotionValueEvent函数来检查是否滚动超过某一点，并将其设置为状态，然后必须将你的子元素（我的图片）包装在motion.div中，同时在外部div中设置类，如下所示：

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>
  )

}