Gsapを使用したテキストアニメーション #1
はじめに
概要
Gsapを使用して、Webサイトでよく見かける見出しのアニメーションを実装していきます。サンプルコードもダウンロードできますので、Gsapを取り入れたい方はこちらで理解を深めてください。
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
実装内容
パターン1
タイトルテキスト
パターン2
タイトルテキスト
パターン3
タイトルテキスト
ポイント解説
HTML
<div class="main-title"> <h1 class="js_1">タイトルテキスト</h1> <span class="line js_1-2"></span> </div> <!-- /.main-title -->
gsapで指定する要素を明確にするために、js独自のクラスを記述します。ここではテキストのアニメーションには.js_1並びに、ラインのアニメーションには.js_1_2としています。(名前は任意)
SCSS
.main-title {
width: fit-content;
margin-bottom: 50px;
&.overflow-hidden {
overflow: hidden;
}
}
h1 {
span {
will-change: transform;
font-weight: bold;
font-size: 30px;
display: inline-block;
}
}
.line {
width: 100%;
display: block;
border: 0.5px solid #0c1c24;
&-center {
width: 100%;
display: block;
border: 0.5px solid #0c1c24;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
&-right {
width: 100%;
display: block;
border: 0.5px solid #0c1c24;
position: absolute;
right: 0;
}
}ラインが消える表現として、main-titleにoverflow: hidden;を使用しています。こちらを指定しないとこのようになります。
パターン2
タイトルテキスト
main-titleをwidthをコンテンツの幅に設定しておくことも重要です。ここではfit-contentを使用しています。
Javascript
export function txtSpan(el) {
const titleElement = document.querySelector(el),
titleTexts = titleElement.textContent.split("");
titleElement.textContent = "";
let outputTexts = "";
titleTexts.forEach(
(text) => (outputTexts += text === " " ? " " : `<span>${text}</span>`)
);
titleElement.innerHTML = outputTexts;
}
txtSpan(".js_1");まずは、タイトルを一つずつspanタグで囲みます。ここでは、上記のような方法で設定しています。そして、spanタグをdisplay:inline-block;に変更し、アニメーションを設定していきます。※spanタグがinlineのままだと、アニメーションがうまく機能しません。
const txt = gsap.timeline();
txt
.from(".js_1 > span", 1, {
y: "100%",
opacity: 0,
stagger: {
amount: 0.7,
},
ease: "back.out(2.5)",
})
.from(
".js_1-2",
{
duration: 1.2,
ease: "cubic-bezier(0.22, 1, 0.36, 1)",
width: "0",
},
"<=0.6"
);spanタグをy: “100%”としてテキストの下に配置し、fromメソッドでアニメーションさせます。staggerを使用することにより、テキストを１文字ずつずらしてアニメーションさせることができます。staggerについてはこちらを参照ください。
ラインアニメーションは、easeに”cubic-bezier(0.22, 1, 0.36, 1)”を指定し、fromメソッドでwidth: 0;に設定します。CSSを使って開始位置を変更すれば、パターン３のように右から左に伸びるアニメーションも同じ値で実現できます。
まとめ
- Gsapでリッチなアニメーションが実装できる
- CSSアニメーションの知識を応用できる
- 指定する要素を明確にすることが大切
- timelineでアニメーションをコントロールできる