はじめに
概要
Gsapを使用して、Webサイトでよく見かける見出しのアニメーションを実装していきます。サンプルコードもダウンロードできますので、Gsapを取り入れたい方はこちらで理解を深めてください。
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
読者Gsapを使用したテキストアニメーションは、最初にどこを理解するとよいですか？
木村対象要素を取得する処理、動作を始める条件、見た目を変える処理の三つに分けると、コードの流れを追いやすくなります。
読者実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？
木村はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。
実装内容
実装内容では、Gsapを使用したテキストアニメーション #1を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
パターン1
タイトルテキスト
パターン2
タイトルテキスト
パターン3
タイトルテキスト
サンプルコード
サンプルコードでは、Gsapを使用したテキストアニメーション #1を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
上記のコードはこちらからダンロードできます。サンプルコードで押さえたいポイント
サンプルコードは、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。
サンプルコードの確認方法
ブラウザーのコンソールにエラーがないかを確認し、クリックやスクロールを繰り返してもイベントが重複しないかを試します。スマートフォン幅とキーボード操作も確認してください。
ポイント解説
ポイント解説では、Gsapを使用したテキストアニメーション #1を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
HTML
<div class="main-title">
<h1 class="js_1">タイトルテキスト</h1>
<span class="line js_1-2"></span>
</div>
<!-- /.main-title -->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;
}
}パターン2
タイトルテキスト
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");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"
);
MEMBER COMMENTS
コメント（0件）