GSAPでクリスマスっぽいアニメーションを作る

おばんです！jig.jp Advent Calendar 2024 20日目の記事を担当します、サウスケイです！
みなさん、クリスマス近いですね！僕は小学生の時にトンチンカンすぎてサンタさんから知恵の輪をプレゼントされたことがあります

さて、今年ももう終わりが見えてきますが、
今年僕がお世話になったライブラリは、SwiperとGSAPです
どちらも手厚いドキュメントと豊富な情報でかなり開発で助かりました

また、フレームワークではAstroもよく使いました。SSG最高

今回は今年お世話になったGSAPを使ってクリスマスに訪れた人が少しでもハッピーになるようなLPを作ってみました！フレームワークはAstroを使います！

GSAP

まずGSAP基本のところから

// 基本のアニメーション
gsap.to()

// 開始位置を指定したアニメーション
gsap.fromTo()

// 複数のアニメーションを整理
const tl = gsap.timeliine()
tl.add(gsap.to())
tl.add(gsap.to())

gsap.toはGSAPにおいて最も基本的なアニメーションです
gsap.toを叩くと指定した要素を動かすことができます

gsap.to("#cube", {scale:2, delay:1})

大きくなったり

gsap.to("#cube", {x:200, delay:1})

動いたり

fromToにすることで初期状態も決めれます

gsap.fromTo("#cube", {background:"#000000"}, {background:"#fb5824", delay:1})

あとはやりたいようにアニメーションを実装していけば良いです

完成品

  // ロゴの色がロード時に変わる
  tl.add(
    gsap.fromTo(
      "#logo",
      { color: "#FF3333" },
      { color: "#fff", duration: 1, delay: 0.8 },
    ),
  );
  // 背景の緑が消える
  tl.add(
    gsap.fromTo(
      "#fv",
      { background: "#006400", width: "100%" },
      { width: 0, background: "#006400", duration: 1, delay: 0.8 },
    ),
  );

  // ロゴがスクロールでデカくなる
  tl.add(
    gsap.fromTo(
      "#logo",
      { scale: 1 },
      {
        scale: 3.0,
        scrollTrigger: {
          trigger: "#space",
          scrub: true,
          start: "top bottom",
          end: "+=1000px",
          pin: "main",
        },
      },
    ),
  );
  
  // 下からラッピングが出てくる
  tl.add(
    gsap.fromTo(
      "#cover",
      { height: 0 },
      {
        height: "100%",
        scrollTrigger: {
          trigger: "#space",
          scrub: true,
          start: "top+=1000 bottom",
          end: "+=1000px",
          pin: "main",
        },
      },
    ),
  );
  
  // ロゴの色が黄色になる→完了時に上からオーナメントが落ちてくる
  tl.add(
    gsap.fromTo(
      "#logo",
      { color: "#fff" },
      {
        color: "#FAC61E",
        scrollTrigger: {
          trigger: "#space",
          scrub: true,
          start: "top+=1000 bottom",
          end: "+=1000px",
        },
        onComplete: ()=>{
          gsap.fromTo("#red", {y:-500}, {y:0,duration: 0.4, yoyo:true })
          gsap.fromTo("#blue", {y:-500}, {y:0,duration: 0.4, yoyo:true, delay: 0.2})
          gsap.fromTo("#green", {y:-500}, {y:0, duration: 0.4, yoyo:true, delay: 0.3})
          gsap.fromTo("#purple", {y:-500}, {y:0,duration: 0.4, yoyo:true, delay: 0.1})
          gsap.fromTo("#yellow", {y:-500}, {y:0,duration: 0.4, yoyo:true, delay: 0.4})
        },
      },
    ),
  );
  
  // 要素固定用
  tl.add(
    gsap.fromTo(
      "#logo",
      {},
      {
        scrollTrigger: {
          trigger: "#space",
          start: "top+=2000 bottom",
          end: "bottom top",
          scrub: true,
          pin: "main",
        },
      },
    ),
  );

ざっくりGSAPの部分を抜粋したのがこちらです
先ほど紹介した基本構文に加えて、fromTo内でonCompleteを実装してます

scrollTriggerはスクロール量に応じてGSAPを発火させるすごいやつです
start:"bottom top"のように指定すれば要素の一番下が、ページの先頭に来た時に発火します
scrubを入れることによってスクロール量に応じて変化するようになり、スクロールを先頭まで戻せばアニメーションも初期状態に戻ります（すごすぎる）

onCompleteはアニメーション完了時に発火する処理ですが、それ以外にも初期位置に戻った時に発火したり、逆にスクロールしたら発火したりなど色々なプロパティが存在します

ロゴ等はIllustratorで自作したりフリー素材を使いました。AIの生成も発達していてこういうちょっとした実装には困りませんね

終わりに

いかがでしたでしょうか。クリスマス、そして年末ですが来年もまた皆さんが幸せな1年になるといいですね！GSAPを活用すれば2025年もグレイトスーパーアニメーションプログラマーになれること間違いありません！それではみなさんメリークリスマス！