概要
「HELLO!」表示のあと、黒→ピンク→黄色の3層が円形マスクで次々と閉じて消え、ポップな背景ヒーローがバウンドしながら組み上がる、鮮やかで元気なオープニング。
使用技術
・GSAP
・CSS `clip-path: circle()` によるアニメーションマスク
実装ポイント
・レイヤー除去は各層の `clip-path` を `circle(150% at 50% 50%)` から `circle(0% at 50% 50%)` へ `expo.inOut` で収縮。`”-=0.6″` で少しずつずらして重ね、色が入れ替わりながら中心へ吸い込まれる連鎖を作る
・中央テキストは `elastic.out(1, 0.5)` でポンッと出し、消える直前に `scale:1.5` で膨らませてから消す小技
・タイトルは CSS初期状態 `translateY(100px) scale(0.5)` から `elastic.out(1, 0.3)` の強いバウンドで登場。`.title-part`（ITO / LOG）を `stagger:0.1` で時間差表示
・装飾円は `stagger: { amount: 0.3, from: “random” }` ＋ `back.out(3)` でランダムに勢いよく飛び出す。全体を elastic / back 系イージングで固め、弾むポップさを演出
・`window load` 後に `setTimeout(playMask, 100)` で起動し、`onComplete` でオーバーレイを `display:none` にしてスクロールを解放
コアスニペット
// 3層を circle(0%) へ収縮、"-=0.6" ずつ重ねて中心へ吸い込む連鎖
tl.to(".layer-1", {
duration: 0.7,
clipPath: "circle(0% at 50% 50%)",
ease: "expo.inOut",
}, "+=0.1")
.to(".layer-2", { duration: 0.7, clipPath: "circle(0% at 50% 50%)", ease: "expo.inOut" }, "-=0.6")
.to(".layer-3", { duration: 0.7, clipPath: "circle(0% at 50% 50%)", ease: "expo.inOut" }, "-=0.6");