GSAP ScrollTriggerで文字列置換処理を作る

2022-03-18

当ページのリンクには広告が含まれています。

使い方の説明はこちら

GSAP ScrollTriggerを試してみたらすごく簡単でした GSAP ScrollTriggerが簡単で面白いという話を聞いたので触ってみました。 GSAPのライセンスは顧客から料金を徴収しないWebサイトであれば問題ないですが、プラグインに...

GSAP ScrollTriggerでスクロールすると文字列*が元の文字に置き換わる処理を書いてみました。Type1とType2はテキストの置き換え処理が少し違うだけです。

See the Pen GSAP ScrollTrigger Replace Text by hakoirioyaji (@hakoirioyaji) on CodePen.

重要な処理はonUpdateコールバックです。

ScrollTrigger.create({
  trigger: element,
  start: "center center+=100",
  end: "center center-=100",
  onUpdate: (self) => {
    const pos = parseInt(orgTextLen * self.progress);
    const str = orgText.substring(pos, 0) + replacedText.substring(pos);
    element.textContent = str;
  },
  markers: true
});

onUpdateコールバックの第1引数selfにprogressパラメーターがあり、スクロール位置によって0 ～ 1の値が入っているので、これをうまいこと処理して文字列を置き換えています。

その他に、スクロール方向のdirection、スクロール速度を取得するgetVelocity()などがあります。詳しくはconsole.log(self);で見たほうが早いと思います。

ちなみに公式が用意しているデモは、スクロール位置で0001～0147までの画像を読み込む作りになっていて面白いです。

結局アイデア次第ですね！