今回はアニメーションの実装に役に立つGSAPというライブラリを紹介します！
基本的な機能を実装しながら、紹介していきます。
また、React.jsとの組み合わせて使用していますので、React.jsでGSAPを使う時の参考にもなれたらと思います。
React.jsを使わない場合でも、GSAP自体の機能を紹介しますので、ある程度参考にはなると思います。
動作を確認した時のGSAP とReat.jsは以下のバージョンなります。
冒頭でも紹介した通りアニメーションの実装に役に立つライブラリです。
高機能で使いやすく人気があります。実際初めて使ってみても、わかりやすく様々なアニメーションの実装ができます。
今回は、React.js上で使用する関係でnpmを通してインストールしますが、CDNでも呼び込みも可能となっています。
では、ここから実際にGSAP のメソッドを試していきましょう。
まずは、一番簡単なtoを試してみましょう。
これは、ゴールに向かって指定した状態に持っていくイメージですね。
サンプルとして、以下のように書いてみました。
import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
const Home = () => {
const animeBox = useRef<HTMLDivElement>(null);
useEffect(() => {
gsap.to(animeBox.current, {
backgroundColor: 'red',
duration: 2,
});
}, []);
return (
<div>
<div ref={animeBox} style={{ width: '100px', height: '100px' }}></div>
</div>
);
};
export default Home;ちなみに、toの第二引数の中には、cssであれば大体ものは入るそうです。ただし、キャメルケースにするのをお忘れなく。
実際の画面上では以下のようになります。
次に、timelineメソッドを試してみましょう。
これは、連続的なアニメーションを管理するもので、あるアニメーションが終わってから、次のアニメーションへ行くといった同期的な動きができます。
サンプルとして、以下のように書いてみました。
import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
const Home = () => {
const animeBox = useRef<HTMLDivElement>(null);
const timeLine = gsap.timeline();
useEffect(() => {
timeLine
.to(animeBox.current, {
backgroundColor: 'red',
duration: 2,
})
.to(animeBox.current, {
opacity: 0,
duration: 2,
});
}, []);
return (
<div>
<div ref={animeBox} style={{ width: '100px', height: '100px' }}></div>
</div>
);
};
export default Home;
最後に、scrollTriggerオプションを試してみましょう。
これは、メソッドの発火タイミングを制御できるオプションで、特定の要素が表示された時に発火させることができます。
サンプルとして、以下のように書いてみました。
import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
const Home = () => {
const animeBox = useRef<HTMLDivElement>(null);
useEffect(() => {
// ScrollTriggerのプラグイン読み込み
gsap.registerPlugin(ScrollTrigger);
gsap.to(animeBox.current, {
backgroundColor: 'red',
scrollTrigger: {
trigger: animeBox.current,
start: 'top center',
// マーカー
markers: true
}
});
}, []);
return (
<div style={{ width: '120px', border: '1px solid black' }}>
<div style={{ width: '100px', height: '700px' }}>長いdiv</div>
<div
ref={animeBox}
style={{ width: '100px', height: '100px', border: '1px solid black' }}
>
対象
</div>
<div style={{ width: '100px', height: '700px' }}>長いdiv</div>
</div>
);
};
export default Home;この例では、指定したdivの上端が画面上の半分の位置に接した時に、2秒間かけて背景色が赤に変化します。
ポイントとしては、2点ですね。
● ScrollTriggerをインポートすること！！
僕はこれに気づかず何時間かはまっていた覚えがあります。。。
toメソッドの第二引数がオブジェクトになっていて、その中でscrollTriggerを使いますが、これがオブジェクトの要素として入れるだけなので、インポートし忘れていてもコード上で警告されることがないので、忘れがちになるのかと！
● scrollTriggerのstartについて
scrollTriggerのstartがわかりづらいと思いますが、これは二つの値がセットなっていて、両方とも取りうる値はtop,bottom,centerもしくは○%です。
一つ目の値がトリガーとした要素の位置指定、二つ目の値が画面上の位置指定です。
正直これだけ言われても、難しいと思うので、開発中ぜひscrollTriggerの中に
markers: trueを入れて、画面上で確認した方がいいかもしれません。そうすることで、マーカーが画面上に出てきて、ものすごくわかりやすくなります。
React.jsでGSAPを使ったアニメーションの実装方法を紹介しました。
今回は簡単なアニメーションとなりましたが、使いこなせていくとすごいアニメーションが作れそうですね！作っていきたいですね！笑
ともに考え、寄り添う。プロのデザインチームが即参戦。
販促ツールや一貫したデザインによるブランド構築などビジネスの成長をデザインの力で促進します。
NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。
企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。
お得な情報がLINEに届く！！
LINE公式アカウントはこちらから。
NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。
企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。
平日10:00〜19:00
© NEXTGATE LiSMOtech All rights reserved
