概要
複数のアイコンがパラパラと切り替わり、最後に1つがバウンドして定着、ロゴ表示後にカーテンが上がってヒーローが現れる、ポップで親しみやすいオープニング。
使用技術
・GSAP
実装ポイント
・切り替えアイコンは `gsap.utils.toArray(“.anim-icon:not(.final-icon)”)` で最終アイコンを除いて配列化し、`forEach` で opacity 0↔1 を順送り。表示は `stayDuration:0.6` の `delay` で間を取る、いわゆるパラパラ漫画方式
・最終アイコンは `rotation:360` ＋ `elastic.out(1, 0.5)` でくるっと回りながら弾んで定着。ロゴも `elastic.out` でバウンド登場させ、`”<0.3″` で少し重ねる
・空トゥイーン `.to({}, {duration:0.8})` を挟んで「見せる間」を作ってからカーテンを `yPercent:-100`＋`power4.inOut` で上昇
・ヒーローは `.from(“.hero-content”, { scale:0.9, y:30, ease:”back.out(1.7)” }, “-=1.0”)` でカーテン上昇と重ねて出現。丸みとバウンド感で統一したトーン
コアスニペット
const icons = gsap.utils.toArray(".anim-icon:not(.final-icon)");
const stayDuration = 0.6;
// パラパラ切り替え：順に表示→delayで間を置いて消す
icons.forEach((icon) => {
tl.to(icon, { opacity: 1, duration: 0 })
.to(icon, { opacity: 0, duration: 0, delay: stayDuration });
});
// 最終アイコンは回転しながら弾んで定着
tl.to(finalIcon, {
opacity: 1, scale: 1.2, rotation: 360,
duration: 0.8, ease: "elastic.out(1, 0.5)",
});