GSAP スタッガー フェードアップ
このスニペットは、複数の要素を少しずつ時間差でふわっと出現させる、定番の登場アニメーションを GSAP で実装したものです。鍵となるのは stagger オプションで、ここでは 0.15 秒ずつずらしながら各カードが下からせり上がります。
解説
このスニペットは、複数の要素を少しずつ時間差でふわっと出現させる、定番の登場アニメーションを GSAP で実装したものです。鍵となるのは stagger オプションで、ここでは 0.15 秒ずつずらしながら各カードが下からせり上がります。from メソッドで開始状態を opacity:0・y:40・scale:0.8 に指定しているため、透明で少し小さく下にある状態から本来の位置へ動きます。イージングに back.out(1.6) を使うことで、最後にわずかに行き過ぎてから戻る弾むような質感が出ます。
活用シーン
- ヒーロー直下のカードやアイコンが順番に現れる演出
- サービスの特徴を並べたセクションの初回表示
- メニューやリストが開くときのリズミカルな出現
動きの強さは y や scale の値、テンポは stagger と duration で調整します。このデモは repeat:-1 と yoyo:true で繰り返していますが、実際のサイトでは一度きりの登場にして、ScrollTrigger と組み合わせスクロールで発火させるのが自然です。注意点として、動きに敏感な利用者のために prefers-reduced-motion を判定し、その場合はアニメーションを省くか控えめにする配慮を入れてください。
使用例・適したシーン
- SPA / PJAX 風 Web サイト
- ポートフォリオの遷移演出
よくある質問
出現の時間差を変えるには
stagger の値を変えると要素ごとのずれ幅が変わります。数値を大きくするとゆっくり順番に、小さくするとほぼ同時に現れます。0.1 から 0.2 秒あたりが扱いやすい目安です。
スクロールしたときに一度だけ再生したいです
GSAP の ScrollTrigger プラグインを併用し、対象セクションが画面に入ったタイミングで発火させます。repeat と yoyo を外して一度きりの再生にすれば、本番向けの自然な登場演出になります。