Conseils pour justifier le contenu à l'aide de l'interpolation de défilement de framer-motion

Question

J'ai un morceau de code qui s'anime entre les valeurs x, mais cela ne fonctionne pas lorsque j'essaie de passer de justifier-contenu : centre à gauche.

Ce qui suit est un extrait de code :

fonction Navbar() {
  const { scrollY } = useScroll();
  const x = useTransform(scrollY, [0, 100], ["centre", "gauche"]);

  retour (
    <motion.div
    mise en page
      className={styles.parent}
      style={{ justifierContent : x, affichage : "flex" }}
      transition={{
        durée : 0,5
      }}
    >
      <Image
            src="/BlackLogo-2.svg"
            alt="Logo Cg"
            largeur={100}
            hauteur={100}
            style={{remplissage : 20,}}
            priorité
          />
    </motion.div>
  )

}

Answer 1

J'ai trouvé une solution. Vous utilisez simplement la fonction useMotionValueEvent pour vérifier si le défilement a dépassé un certain point et le définir comme état, puis vous devez envelopper votre élément enfant (mon image) dans motion.div et également définir la classe dans le div externe comme ci-dessous. :

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

}