こんにちわ。nap5です。

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

デモサイトです。

https://react-marked-caption-framermotion-scroll.onrender.com/

デモコードです。

https://codesandbox.io/s/x26yu1

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

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

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

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

簡単ですが、以上です。