RX100で撮り歩くブログ

RX100やRollei B35で写真を撮ったり何やかんやするブログ

GSAPでスクロールするとテキストが紙芝居みたいに切り替わる動き

GSAPでスクロールで要素がビューポートに入ったときに動かすというのは以前やりました。

blog.mismith.me

今回は要素が見えたときという条件ではなく、スクロール量に応じてアニメーションするといったものを試しました。応用するとパララックス表現とかに使えると思います。

使うものは ScrollTrigger で変わらないですが、scrub というプロパティを true にします。

See the Pen by misumi (@mismith0227) on CodePen.

スクロールに応じたアニメーションはよく見るので、ScrollTrigger の使い方はいろいろと試しておくと、使い所が多そうです。