Framer-motion のスクロール補間を使用した justifyContent のヒント

Question

x 値間をアニメーション化するコードがありますが、justify-content: center から left に遷移しようとすると機能しません。

以下はコード スニペットです:

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

  戻る （
    <モーション.div
    レイアウト
      className={styles.parent}
      style={{ justifyContent: x、display: "flex" }}
      遷移={{
        持続時間: 0.5
      }}
    >
      <画像
            src="/BlackLogo-2.svg"
            alt="CG ロゴ"
            幅={100}
            身長={100}
            style={{パディング: 20,}}
            優先度
          />
    </motion.div>
  ）

}

Answer 1

解決策を見つけました。 useMotionValueEvent 関数を使用して、スクロールが特定のポイントを超えているかどうかを確認し、それを状態として設定します。次に、子要素 (私の画像) を motion.div でラップし、以下のように外側の div にクラスを設定する必要があります。 :

リーリー