横スクロールアニメーションでLottieを動かしてみよう

こんにちわ。nap5です。

横スクロールアニメーションでLottieを動かしてみたので、紹介したいと思います。

以下のスレッドを参考にしました。

Horizontal scroll & pinning & scrub

デモサイトです。

Vite App

デモコードです。

dazzling-zeh-7otxpv - CodeSandbox

単一のスクロールトリガーをそれぞれのセクションごとに割り付けることでこの動きを実現できるようです。なかなか難しいですね。

簡単ですが、以上です。