こんにちは。今回はGSAPを使用したアニメーションを実装するコードを紹介します。
最初は何も表示されてない状態で、スクロールして可視領域に入ると、左から右に徐々に要素が出てくるというアニメーションです。クライアントさんから実装してくれってよく言われる割に、普通のCSSアニメーションでは実装できず、割と難易度の高いアニメーションです。
大体紹介してくれているサイトでは、背景色と同じ色のボックス要素を動かして、あたかも無から出現しているかのように見せるというコードばかりで、実際に求めているものとは違っていたりと、かなり自分でも探しましたが、今回GSAPというアニメーションライブラリとchatGPTのおかげで、ついに思い描いていたコードを手に入れることができました。
なんと書いたらこのアニメーションを探している人がこのページにちゃんと辿り着いてくれるのかわからないけど、とにかく横からスル〜っと出てくるんですよ。元々は何にも表示されてないんです！何もないところから出現してほしいわけですが、物自体は実は最初からその場から動いてない！要素自体が元々は固定されてて透明なのです。そしてスクロールしたら発火するんです。
どうにか伝わってくれ〜
絶対困ってる人多いと思うのでここに紹介します！ぜひ参考にしてみてください。
テキストアニメーション、画像アニメーション、両方のサンプルコードを記載します。
動作のサンプル
↑スクロールのたびに繰り返します。わかりやすいように背景画像をつけていますがこれから紹介するコードには背景は含まれてません。
これを見ていただければどのようなコードなのかおわかりいただけると思います。
背景がどのような画像、色であれ、まさしく無から出現してくるのです。これを常々追い求めておりました。
実際に使用するコード紹介（テキスト編）
See the Pen Untitled by Goro goro works (@gorogoroworks-jp) on CodePen.
HTML、CSS、JavaScriptの３種類が必要です。順番に紹介します。
まずは先にテキストアニメーションの方を紹介します。
HTML構造
こんな感じで割とシンプルです。
<div class="gradient-text-mask">
<span class="text">Scroll Text Sample</span>
</div>CSS
CSSは、色やサイズに関しては自由に後から変更してもらって大丈夫です。サンプルでは文字のグラデーションをかけてます。不要な人は消してもらって、colorを当ててあげてください。
要素を中央にしたい人は.gradient-text-maskにflexをかけてください。
.gradient-text-mask {
width: max-content;
overflow: hidden;
position: relative;
}
.gradient-text-mask .text {
display: inline-block;
width: 0%;
background: linear-gradient(to right, #ff7e5f, #feb47b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
white-space: nowrap;
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
}JavaScript
まずはGSAPとScrollTriggerというGSAPのプラグインを入れます。
その下にどういう動きにするのかの指示を与えるJavaScriptを記述します。
以下にまとめたコードを記載しておきますのでコピーして使用してください。
footerの/bodyが閉じる直前に記述します。
ページ内に同じclass名を持つ要素が複数あっても、ちゃんと動くようになってます。
<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>
<script>
gsap.registerPlugin(ScrollTrigger);
// 複数の .gradient-text-mask に対応するループ処理
gsap.utils.toArray(".gradient-text-mask .text").forEach((el) => {
gsap.to(el, {
scrollTrigger: {
trigger: el.closest(".gradient-text-mask"),
start: "top 80%",
end: "bottom 20%",
toggleActions: "play reverse play reverse"
},
width: "100%",
duration: 1.2, // ← アニメーションの速さ（秒数）
ease: "power2.out"
});
});
</script>
実際に使用するコード紹介（画像編）
See the Pen Untitled by Goro goro works (@gorogoroworks-jp) on CodePen.
次は画像をアニメーションするコードを紹介します。
HTML構造
〇〇〇〇.jpgのところは画像のパスにしてください。
<div class="image-mask-wrap">
<img src="〇〇〇〇.jpg" alt="画像の説明" class="masked-image" />
</div>CSS
こちらもサイズとアニメーションの速度はご自身で調整してください。
.image-mask-wrap {
overflow: hidden;
width: 100%;
max-width: 500px;
margin: 0 auto;
position: relative;
}
.masked-image {
display: block;
width: 100%;
height: auto;
clip-path: inset(0 100% 0 0);
transition: clip-path 1.2s ease-out; /*アニメーションスピード*/
}
JavaScript
ページ内に同じclass名を持つ要素が複数あっても、ちゃんと動くようになってます。
<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>
<script>
gsap.registerPlugin(ScrollTrigger);
// 複数の画像にアニメーション設定
gsap.utils.toArray(".masked-image").forEach((el) => {
gsap.to(el, {
scrollTrigger: {
trigger: el.closest(".image-mask-wrap"),
start: "top 80%",
end: "bottom 20%",
toggleActions: "play reverse play reverse"
},
clipPath: "inset(0% 0% 0% 0%)",
duration: 1.2,
ease: "power2.out"
});
});
</script>
GSAPとは？
GSAP（GreenSock Animation Platform） は、JavaScriptベースの超高性能アニメーションライブラリです。
主な特徴
- 高速・スムーズなアニメーション
- 複雑な動きも簡単に制御可能
- jQueryより圧倒的に軽量＆パワフル
- CSS、SVG、canvas、スクロール連動など幅広く対応
- 公式プラグイン（例：ScrollTrigger、TextPlugin など）が豊富
ScrollTriggerとは？
GSAPのプラグインのひとつで、「スクロールに応じてアニメーションをトリガーする」ためのツールです。
今回はGSAPの本体と組み合わせて使用します。
- スクロールで文字が出現
- スクロールで画像が動く
- セクションごとに動きが変わる
- 背景が切り替わる
このような動作を実装するための拡張プラグインです。
色々複雑なアニメーションを実現してくれるライブラリですが全然理解してなくてもいいです。今回紹介したコードをコピペすれば動きます。私も全く理解してないです。
どなたかの参考になりますように！ほんまに自分自身が困ってたので。