○
category icon
2022-05-17
JavaScript

JavaScript(TypeScript) で GSAP を使ったアニメーション処理

gsap
3.10.4
profile
hikaru
Software Developer / DIY'er

この記事では、GSAP を利用して、簡単にアニメーションを実装するサンプルを記載します。

Demo

実際に動作するデモです。run ボタンでアニメーションを開始、reset ボタンで元に戻ります。

プロジェクトを作成

Vite を使ったプロジェクトの作成方法です。
(なお、GSAP を使うにあたって Vite である必要はありません)

shell
# TypeScript を指定してプロジェクトを作成
$ npm create vite gsap-example -- --template vanilla-ts

# カレントディレクトリの移動
$ cd gsap-example

gsap パッケージを追加

shell
$ npm i gsap@3.10.4

※ ここでは記事の再現性を高めるために、現在の最新バージョンである 3.10.4 を指定しています。

コード解説

index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="favicon.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite App</title>

  <style>
    #app {
      padding: 2rem;
      background: #fafafa;
      width: 200px;
    }
  </style>
</head>

<body>
  <section id="section1">
    <div id="app">
      <h1>0123</h1>
      <p>aaa</p>
      <p>bbb</p>
      <p>ccc</p>

      <!-- ① アニメーション開始ボタン -->
      <button id="button1">run</button>
    </div>
  </section>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>
src/main.ts
import gsap from "gsap";

// ボタンクリックイベントの登録
document.querySelector<HTMLDivElement>(`#button1`)!.addEventListener(`click`, onClick);

// ② ボタンクリック時の動作 (GSAPを使ったアニメーションを実行)
async function onClick() {
  // gsap: アニメーション実行
  await gsap.to(`#app > h1,p`, {
    duration: 0.3, // アニメーション時間 (単位:秒)
    opacity: 0.0,  // 透明度 (0.0 ～ 1.0)
    x: -50,        // X位置 (単位: px)
    stagger: 0.05, // 複数の対象要素の場合にタイミングをずらす時間 (単位: 秒)
  });

  // gsap: アニメーション実行
  await gsap.to(`#app`, {
    duration: 0.3, // アニメーション時間 (単位:秒)
    opacity: 0.0,  // 透明度 (0.0 ～ 1.0)
    x: -50,        // X位置 (単位: px)
  });
}

① アニメーション開始ボタン

このボタンをクリックすることでアニメーションを開始します。

② ボタンクリック時の動作

GSAPを使ったアニメーションを実行します。

参考

関連記事 ( JavaScript )