Petua untuk justifyContent menggunakan interpolasi skrol framer-motion

Question

Saya mempunyai sekeping kod yang menghidupkan antara nilai x, tetapi ia tidak berfungsi apabila cuba beralih daripada justify-content: center to left.

Berikut ialah coretan kod:

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

  kembali (
    <motion.div
    susun atur
      className={styles.parent}
      style={{ justifyContent: x, paparan: "flex"
      peralihan={{
        tempoh: 0.5
      }}
    >
      <Imej
            src="/BlackLogo-2.svg"
            alt="Logo Cg"
            lebar={100}
            ketinggian={100}
            gaya={{padding: 20,}}
            keutamaan
          />
    </motion.div>
  )

}

Answer 1

Saya jumpa penyelesaian. Anda hanya menggunakan fungsi useMotionValueEvent untuk menyemak sama ada skrol melepasi titik tertentu dan menetapkannya sebagai keadaan, kemudian anda perlu membungkus elemen anak anda (imej saya) dalam motion.div dan juga menetapkan kelas dalam div luar seperti di bawah Paparan :

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

}