FramermotionのuseScrollフックで監視できるスクロールプログレス値を使ってマルチキャプションを動かしてみよう

こんにちは。nap5です。FramermotionのuseScrollフックで監視できるスクロールプログレス値を使ってマルチキャプションを動かしてみたので、紹介したいと思います。

デモサイトです。

デモコードです。

ポイントになるのは以下になります。

Changeコールバックがフックの変数についているので、それをイベントハンドラでハンドリングします。

取得できるプログレス値をrecoilでコンポーネント間で持ち回るために設定するだけです。

useEffect(() => {
    return scrollYProgress.onChange((latest) => {
      // console.log(`scrollYProgress`, latest);
      setScrollTrigger((prevState) => {
        return {
          progress: latest,
        };
      });
    });
  }, []);

簡単ですが、以上です。

• WEB