こんにちは。
お客様からのご要望があったので、スクロールに連動して文字の色が左から右へゆっくりと変化するテキストアニメーションを、JavaScriptライブラリ「GSAP（GreenSock Animation Platform）」を使って実装してみました。
動きはとてもシンプルですが、ユーザーの視線を自然に誘導できたり、重要なコピーにさりげないアクセントを加えたりと、さまざまな場面で活用できます。
「スクロールに合わせて変化する表現を取り入れたい」「GSAPを試してみたい」という方は、ぜひ使ってみてください。おしゃれでかっこいいです。
完成サンプル
スクロールに連動して文字の色が変わってます。
See the Pen Untitled by Goro goro works (@gorogoroworks-jp) on CodePen.
まずはGSAPを導入する
今回のアニメーションでは、GSAP（GreenSock Animation Platform）と、そのプラグインである ScrollTrigger を使用します。
どちらもCDNで簡単に読み込めるため、環境構築はとてもシンプルです。
以下の2行を、HTMLファイルの <head> タグ内または <body> タグの最後（</body> の直前）に追加するだけでOKです。
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>GSAP（ジーサップ） とは、Webサイト上のアニメーションを自由にコントロールできるJavaScriptライブラリです。正式名称は「GreenSock Animation Platform」で、テキストや画像、SVG、スクロールなど、あらゆる要素を滑らかに動かすことができます。
HTML構造
今回のアニメーションでは、1つのテキストを「2重構造」で配置することで、上に重ねた文字の横幅をスクロールに応じて広げていき、色が変わったように見せる仕組みになっています。
ですので、同じ内容のテキストを2行書く必要があります。以下のコードを参考にしてください。
<div class="gsapBlock">
<div class="gsapBox">
<div class="gsapText gsapText-front">
<p>吾輩は猫である。名前はまだ無い。</p>
</div>
<div class="gsapText gsapText-back">
吾輩は猫である。名前はまだ無い。
</div>
</div>
</div>
<div class="gsapBlock">
<div class="gsapBox">
<div class="gsapText gsapText-front">
<p>どこで生れたかとんと見当がつかぬ。</p>
</div>
<div class="gsapText gsapText-back">
どこで生れたかとんと見当がつかぬ。
</div>
</div>
</div>
<div class="gsapBlock">
<div class="gsapBox">
<div class="gsapText gsapText-front">
<p>何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
</div>
<div class="gsapText gsapText-back">
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
</div>
</div>
</div>ポイント
- 上にある .gsapText-front の <p> 要素がアニメーションで 幅0% → 100% に広がります。
- 下にある .gsapText-back は白文字（初期状態の文字）です。
- そのため、文字がスクロールで白→グレーに変化していくように見えます。
CSS
こちらがCSSです。サンプルのためにマージン大きめにしてたりするので、その辺はお好みで変更してください。
.gsapBlock {
margin-top: 48px;
}
.gsapBox {
height: max-content;
position: relative;
width: max-content;
}
.gsapText {
font-size: 20px;
font-weight: 300;
line-height: 2;
z-index: 0;
}
/* 前面に重なる文字 */
.gsapText-front {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fcba03; /* 上の文字色 */
z-index: 1;
pointer-events: none;
}
.gsapText-front p {
display: block;
height: 100%;
overflow: hidden;
white-space: nowrap;
width: 0%;
margin: 0;
}
/* 背景側の白文字 */
.gsapText-back {
position: relative;
color: #fff;
z-index: 0;
}Java script
gsap.registerPlugin(ScrollTrigger);
// すべての .gsapBlock を取得
document.querySelectorAll(".gsapBlock").forEach(block => {
const redText = block.querySelector(".gsapText-front p");
// 初期化（幅0%）
redText.style.width = "0%";
// アニメーション設定
gsap.to(redText, {
scrollTrigger: {
trigger: block,
start: "top 80%",
end: "bottom 60%",
scrub: true
},
width: "100%"
});
});- .gsapText-front p 要素の width を 0% → 100% にアニメーション
- scrub: true によってスクロール連動で滑らかに動きます
- 各 .gsapBlock に対して 個別にScrollTriggerが設定されているため、行ごとに時間差が生まれ、自然なズレが出ます
ぜひ参考にしてみてください。