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

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引数selfprogressパラメーターがあり、スクロール位置によって0 ~ 1の値が入っているので、これをうまいこと処理して文字列を置き換えています。

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

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

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

  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次