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

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

デモサイトです。

Have a nice day

デモコードです。

dreamy-kate-x26yu1 - CodeSandbox

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

https://www.framer.com/docs/use-scroll/##page-scroll

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

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

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

簡単ですが、以上です。