【GSAP】スクロールに連動させてテキストをアニメーションさせる

以前ScrollTriggerを使ってセクションを横スクロールさせる方法を紹介したのですが、セクションや画像ではなく、テキストをスクロールに連動させて横方向に動かすことはできるのか気になったので、試してみました。

時々、途中でテキストが横切っていくデザインのサイトを見かけてどうなっているのか気になっていたんですよね。

というわけで、まずはデモからどうぞ！

See the Pen horizontal_scroll-4 by Michi (@Michi_) on CodePen.

<p class="horizontal">
  <span class="horizontal-text">horizontal</span>
  <span class="horizontal-text">animation</span>
</p>

.horizontal{
  display: flex;
  overflow: hidden;
}
.horizontal-text{
  display: inline-block;
  font-size: 20vw;
  opacity: 0.1;
  white-space: nowrap;
  margin-right: 11.5vw;
}

gsap.registerPlugin(ScrollTrigger);

const section = gsap.utils.toArray(".horizontal-text");

gsap.to(section, {
  xPercent: -100 * (section.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".horizontal",
    scrub: 1,
    start: "top bottom",
    end: "bottom top",
    markers: "true",
  }
});

ScrollTriggerを使ってセクションを横スクロールさせる方法を解説したときに、最後に紹介したピン留めせずに横方向にアニメーションさせる方法を使っています。

ScrollTriggerを使ってセクションを横スクロールさせる方法を詳しく知りたい！という方はこちらの記事をご覧ください。コードの内容について詳しく説明しています。

【GSAP】ScrollTriggerを使って横スクロールさせる

操作は縦にスクロールさせる動きなのに、表示は横スクロールの動きになるサイトを時々見かけます。このような動きは、GSAPのScrollTriggerを使用することで簡単に実装することができます。ユーザーは縦スクロールの動きだけですべてのコンテ...

要素を横に並べて横スクロールさせているので、テキストも２つ以上の要素として横並びにする必要があります。ここでは<span>タグを使ってテキストをふたつに区切りました。

また、テキストをアニメーションさせる際のポイントは、アニメーションさせたいテキストを display: inline-block; に設定することです。

ここではテキストに合わせて要素の幅を変えたいので、インラインブロック要素に変更しましたが、幅が一定に決まっているのであれば、ブロックレベル要素にして、widthで幅を設定しても良さそうです。

ただ、デモを見てもらうとわかるのですが、テキストは最初から最後まで見ることができないので、本当に装飾用になりそうです。