GSAPの基本的な使い方についてまとめていきたいと思います。
基本的な使い方
まずはじめに、GSAPの本体を読み込む必要があります。
CDNで読み込む方法が一番簡単なので、以下のスクリプトを貼り付けましょう。
<!-- bodyの閉じタグ辺りに貼り付けます -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script><!-- GSAP本体 -->
<script src="/assets/js/script.js"></script><!-- アニメーション設定用 -->
</body>
</html>要素をアニメーションさせるには、対象となる要素を指定して、変化させたいプロパティの値を指定します。
See the Pen Untitled by gri-t (@gri-t) on CodePen.
// .box1をx軸方向に移動させる
gsap.to('.box1', { x: 500, duration: 2 });
// .box2をx軸方向に移動させる
gsap.to('.box2', { x: 500, duration: 2, delay: 2 });
// .box3の背景色を変化させる
gsap.to('.box3', { backgroundColor: '#009ec2', duration: 5 });
// .box4の背景色を変化させる・無限に繰り返す
gsap.to('.box4', { backgroundColor: '#00507E', duration: 3, repeat: -1 });指定できるプロパティ
代表的なプロパティには以下のようなものがあります。
| プロパティ | 意味 | デフォルト値 |
|---|---|---|
| delay | アニメーションを開始するまでの遅延時間（秒） | 0 |
| duration | アニメーションの継続時間（秒単位） | 0.5 |
| ease | アニメーションの変化率 | power1.out |
| overwrite | 上書きするか | false |
| paused | trueの場合、一時停止させる | false |
| repeat | アニメーションを何回繰り返すかの指定（-1：無限に繰り返す） | 0 |
| repeatDelay | リピートの間に待機する時間(秒単位)を指定する | 0 |
| stagger | 複数のターゲットが定義されている場合、それぞれの開始時間を簡単にずらすことができる | 0 |
| yoyo | trueの場合、yoyoを有効化 | false |
アニメーションの指定方法
GSAPではCSS関連のプロパティのほとんどをアニメーションすることができます。
See the Pen Untitled by gri-t (@gri-t) on CodePen.
| GSAP | 説明 |
|---|---|
| x: 20 | x軸方向に移動（px） |
| y: 20 | y軸方向に移動（px） |
| scale: 1.5 | 拡大・縮小 |
| scaleX: 1.5 | x軸方向に拡大・縮小 |
| scaleY: 1.5 | y軸方向に拡大・縮小 |
| rotation: 360 | 回転角度 |
| skewX: '20deg' | x軸方向の傾斜変形 |
| skewY: '20deg' | y軸方向の傾斜変形 |
| xPercent | x軸方向に移動（要素の横幅に対して：%） |
| yPercent | y軸方向に移動（要素の縦幅に対して：%） |
トゥイーン（Tween）の種類
アニメーションをどの状態からどのように開始させるかの設定は以下の4つの方法で指定します。
- gsap.to()：現在の状態からアニメーション
- gsap.from()：現在の状態に戻るアニメーション
- gsap.fromTo()：指定した初期状態から指定した完了状態にアニメーション
- gsap.set()：初期状態を指定
See the Pen Untitled by gri-t (@gri-t) on CodePen.
// 3秒後に現在の状態からアニメーションを開始
gsap.to('.target1', {
rotation: 180,
repeat: -1,
duration: 3,
}, 3);
// 3秒後に現在の状態に戻るアニメーションを開始
gsap.from('.target2', {
rotation: 180,
repeat: -1,
duration: 3,
}, 3);
// 3秒後に指定した初期状態から指定した完了状態にアニメーションを開始
gsap.fromTo('.target3', {
x: 100,
}, {
x: 0,
repeat: -1,
duration: 3,
}, 3);
// 初期状態を指定
gsap.set('.target4', {
x: 100,
rotation: 20,
});イージングの種類
アニメーションのイージングの指定には、easeプロパティを使用します。
初期値は「power1.out」となっています。公式サイト「GreenSock公式 - Eases」ではイージングが試せるので、参考になると思います。
See the Pen Untitled by gri-t (@gri-t) on CodePen.
// x軸方向に移動させる
gsap.to('.target1', {
x: 400, duration: 2, ease: 'power1.out'
});
gsap.to('.target2', {
x: 400, duration: 2, ease: 'power2.out'
});
gsap.to('.target3', {
x: 400, duration: 2, ease: 'power3.out'
});
gsap.to('.target4', {
x: 400, duration: 2, ease: 'power4.out'
});
gsap.to('.target5', {
x: 400, duration: 2, ease: 'back.out'
});
gsap.to('.target6', {
x: 400, duration: 2, ease: 'elastic.out'
});
gsap.to('.target7', {
x: 400, duration: 2, ease: 'bounce.out'
});
gsap.to('.target8', {
x: 400, duration: 2, ease: 'circ.out'
});
gsap.to('.target9', {
x: 400, duration: 2, ease: 'expo.out'
});
gsap.to('.target10', {
x: 400, duration: 2, ease: 'sine.out'
});
gsap.to('.target11', {
x: 400, duration: 2, ease: 'slow(0.7, 0.7, false)'
});
gsap.to('.target12', {
x: 400, duration: 2, ease: 'steps(12)'
});| out | inOut | in |
|---|---|---|
| none | none | none |
| power1.out | power1.inOut | power1.in |
| power2.out | power2.inOut | power2.in |
| power3.out | power3.inOut | power3.in |
| power4.out | power4.inOut | power4.in |
| back.out | back.inOut | back.in |
| elastic.out | elastic.inOut | elastic.in |
| bounce.out | bounce.inOut | bounce.in |
| circ.out | circ.inOut | circ.in |
| expo.out | expo.inOut | expo.in |
| sine.out | sine.inOut | sine.in |
| slow(数値, 数値, boolean) | ||
| steps(数値) | ||
| Custom |
イベント発生時にアニメーションを適用する
それぞれのボタンに「mouseenter」イベントと「click」イベントが発生したときに、指定したアニメーションが適用させるように設定しています。
See the Pen Untitled by gri-t (@gri-t) on CodePen.
const button1 = document.getElementById('button1');
const button2 = document.getElementById('button2');
// button1にカーソルが乗ったらアニメーション開始
button1.addEventListener('mouseenter', () => {
gsap.to('.target1', {
backgroundColor: '#007c08', // 背景色を変更
duration: 2
});
});
// button2をクリックしたらアニメーション開始
button2.addEventListener('click', () => {
gsap.to('.target2', {
x: 400,
rotation: 360,
duration: 2
});
});