スクロール連動でGIFのようなコマ送りアニメーション【GSAP ScrollTrigger】

フロントエンド

スクロールするとキャラクターが動きます。こちらの方が見やすいかも。

See the Pen GSAP scrollTrigger animation chimmy by ayuko (@masyu) on CodePen.

解説

CSSスプラウトという今となっては廃れ技術なのですが一瞬流行った方法を利用しています。
まずはこんな画像を用意します。ひとつひとつのコマは等幅でないといけません。


この画像を、CSSで背景画像に設定して、background-positionで見せる位置をスクロール連動で変えていくという仕組みです。

GSAPのScrollTriggerは、スクロール中でもとある地点で画面を固定して中身だけ動かすことが簡単にできます!

タイトルとURLをコピーしました