近年のWEBサイトでオープニングアニメーションを採用するコンテンツが増えましたね。
そんな時に非常に便利なライブラリがGASPです。
ということでメモしました。
GSAPとは？
GSAPとはアニメーションを実装するために特化したライブラリです。
2つのライセンスがあり、無料版と有料版があります。
詳しくは公式サイトでご確認ください。
デモを作成しました。以下はデモページの解説となります。
GSAPを実装する
ライブラリを設定しましょうCDNは以下です。
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
javascriptを記述する
ファンクションとなるjavascriptを記述します。
(function () {
'use strict';
(function () {
const jsTitle = document.querySelectorAll('.js-mv_tit-item');
jsTitle.forEach(target => {
let newText = '';
const text = target.textContent;
const result = text.split('');
for (let i = 0; i < result.length; i++) {
newText += '<span>' + result[i] + '</span>';
}
target.innerHTML = newText;
});
})();
(function () {
const jsOptext = '.js-loader-Optext > span';
const jsLoaderBg = '.js-loader-bg';
const jsPic = '.js-mv-pic [id*=item]';
const jsTitle = '.js-mv_tit-item span';
const jsReaddText = '.js-mv_tit-read';
const jsHeader = '.js-header';
gsap.set(
[jsPic, jsTitle, jsReaddText],
{
opacity: 0,
y: 30
},
);
gsap.set(jsOptext, {
opacity: 0,
y: -50
});
gsap.set(jsHeader, {
opacity: 0,
y: -50
});
const tl = gsap.timeline();
tl.to(
jsOptext, {
opacity: 1,
y: 0,
duration: 0.8,
delay: 0.8,
stagger: {
amount: 1,
from: "start",
ease: "sine.in"
}
},
).to(
jsOptext, {
opacity: 0
}
).to(
jsLoaderBg, {
y: '-100%'
},
'+=0.5'
).to(jsPic, {
opacity: 1,
y: 0,
duration: 0.8,
stagger: {
amount: 0.6,
from: "start",
ease: "elastic.inOut(1, 0.3)"
}
}, '+=0.2').to(
jsTitle, {
opacity: 1,
y: 0,
stagger: {
amount: 1,
from: "start",
ease: "elastic.inOut(1, 0.5)"
}
},
"-=0.1"
).to(
jsReaddText, {
opacity: 1,
y: 0,
},
"-=0.2"
).to(
jsHeader, {
opacity: 1,
y: 0,
},
'<'
);
})();
})();
幕の次に出るテキストの文字列を分割しspanで囲む設定をします。
これは後述しますが、複数の要素を順番にアニメーションさせるために必要な初期設定です。
(function () {
const jsTitle = document.querySelectorAll('.js-mv_tit-item');
jsTitle.forEach(target => {
let newText = '';
const text = target.textContent;
const result = text.split('');
for (let i = 0; i < result.length; i++) {
newText += '<span>' + result[i] + '</span>';
}
target.innerHTML = newText;
});
})();
トリガーとなるクラスを変数に設定します。
const jsOptext = '.js-loader-Optext > span';//最初のテキスト const jsLoaderBg = '.js-loader-bg';//次に幕 const jsPic = '.js-mv-pic [id*=item]';//幕が上がった後に出現するイメージ const jsTitle = '.js-mv_tit-item span'; //イメージの後に出るタイトル const jsReaddText = '.js-mv_tit-read'; //タイトルの後の出るリード const jsHeader = '.js-header'; //最後のヘッダー
順番は特に問題はないですが、アニメーションの順に変数を設定しています。
次にアニメーションをさせない状態を初期設定します。
GSAPはパーツを順番にアニメーションさせます。そのため最後に出てくるパーツを意図通りに出現させるために、その設定を行います。
gsap.set(
[jsPic, jsTitle, jsReaddText],
{
opacity: 0,
y: 30
},
);
gsap.set(jsOptext, {
opacity: 0,
y: -50
});
gsap.set(jsHeader, {
opacity: 0,
y: -50
});
以下でタイムラインを作成します。
const tl = gsap.timeline();
では実際のアニメーションを設定します。
//幕の次に出るテキスト
tl.to(
jsOptext, {
opacity: 1,
y: 0,
duration: 0.8,
delay: 0.8,
stagger: {
amount: 1,
from: "start",
ease: "sine.in"
}
},
)
tl.toの中に座標や透過度、速さやイージングなどを設定します。
ここでポイントはstaggerプロパティです。これを指定することで、複数の要素を順番にアニメーションさせることができます。
ここでは、幕の次に出るテキストのspanを左から順番に1秒おきにアニメーションさせています。
easeプロパティは色々ありますので、公式サイトをご参考にしてください
ここから、出現パーツの順にアニメーションを設定していきます。
tl.to(
略
).to(
jsOptext, {
opacity: 0
}
).to(
jsLoaderBg, {
y: '-100%'
},
'+=0.5'
).to(jsPic, {
opacity: 1,
y: 0,
duration: 0.8, // seconds
stagger: {
amount: 0.6,
from: "start",
ease: "elastic.inOut(1, 0.3)"
}
}, '+=0.2')....
tl.toを最初のアニメーションで、次のアニメーションを.to(〜)で設定していきます。
これがGSAPの良いところで、意図したパーツを意図した順番に出現させることが直感的に比較的簡単に設定できます。
気に入らなければ、順番を変更するなどの編集が容易です。
まとめ
GSAPは慣れるまでに多少手間取ることもありますが（自分も習得できたとは言えませんが…）、考え方は至ってシンプルで
gsap.setで初期状態をセットして、timelineを作成、timelineに対して.toでアニメーションをつなげていく。
というものです。慣れてしまえば様々なバリエーションが作成できます。
今後、色々試したいと思います。
CSS、HTMLについてはデモを作成したので、そちらでご確認ください。
