スクロールに応じて画像がふわっと拡大するやつの実装メモ

スクロールに応じて、画像がふわっと拡大する | manasas ui sandbox

というのを実装してみた。GSAPは『知ってればすぐ実装できるが、情報にたどり着くまでに時間がかかる』ことが多いので、数こなしたら表現の幅が広がって楽しくなれそうだなあ、という印象。

実装は結構単純。Github

jsはこれだけ

  import { gsap } from "gsap";
  import { ScrollTrigger } from "gsap/ScrollTrigger";
  gsap.registerPlugin(ScrollTrigger);

  gsap.fromTo(
    ".js-animation-section",
    {
      width: "25vw",
      height: "25vw",
      borderRadius: "50% 50% 50% 50%",
    },
    {
      width: "100%",
      height: "100vh",
      borderRadius: "0%",
      scrollTrigger: {
        trigger: ".js-trigger",
        start: "center center",
        scrub: true,
        pin: true,
        // markers: true,
      },
    },
  );

htmlは実装に関わる部分はこのくらい

    <div class="main-visual js-trigger">
      <img
        class="main-image js-animation-section"
        src="https://source.unsplash.com/CakC6u4d95g/2400x2400"
      />
    </div>

スクロール量にあわせて変化するscrubというオプションを見つけるまで少しインターネットをさまよった。
あとは『大きさが変化する対象そのもの』ではなく、『変化後の大きさに合わせたWrapperコンポーネント』をtriggerに指定するのがコツだろうか。
startやscrubは『triggerに対しての位置/スクロール量』みたいな感じなので、triggerの大きさ変更はバグの元になりやすそう。

markersをデプロイ時にコメントアウトしたり消したりが嫌なので、後でastroでdev/buildを見分ける方法探してデプロイ時には勝手に消える/dev起動中は出る、みたいにしておきたい。
おわり。