概要
スクロールに合わせて要素をふわっと出現させる演出を、ポップアップ・ブラーフェード・ズーム・回転・クリップワイプ・3Dフリップなど多彩なパターンで一括提供する、汎用の登場アニメーション詰め合わせ。
使用技術
・GSAP + ScrollTrigger（スクロール連動）
実装ポイント
・全パターンを `{ selector, from, to, start, stagger }` の設定オブジェクト配列で一元管理し、共通の `applyAnimation` 関数でまとめて適用する設計
・HTML側は `data-js-fade-up` のようなデータ属性でパターンを指定。属性名に `-chain` を付けると子要素を `stagger` で時間差表示する「連鎖」版に切り替わり、単体・連鎖を同一ロジックで出し分け
・透過と表示切り替えは `autoAlpha`（opacity + visibility）で管理し、ブラーは `filter: “blur(5px)”` から `blur(0px)` へ補間
・`ease` を `back.out(1.7)`（弾み）、`elastic.out(1, 0.5)`（伸縮）、`expo.out`／`circ.out` などパターンごとに変えて印象を作り分け。クリップワイプは `clipPath: “inset(0 100% 0 0)”`、3Dフリップは `rotationX` を利用
・`toggleActions: “play none none reverse”` で再スクロール時に巻き戻す挙動。交互回転版のみ `stagger` 関数で偶数・奇数の `rotation` と `transformOrigin` を反転させ `once: true` で一度だけ再生
コアスニペット
const applyAnimation = ({ selector, from, to, start, stagger }) => {
// 単体アニメーション
gsap.utils.toArray(`[data-js-${selector}]`).forEach((el) => {
gsap.fromTo(el, from, {
...to,
scrollTrigger: { trigger: el, start, toggleActions: "play none none reverse" },
});
});
// 連鎖アニメーション
gsap.utils.toArray(`[data-js-${selector}-chain]`).forEach((parent) => {
const children = parent.querySelectorAll(":scope > *");
gsap.fromTo(children, from, {
...to, stagger,
scrollTrigger: { trigger: parent, start, toggleActions: "play none none reverse" },
});
});
};
animations.forEach(applyAnimation);