GSAPアニメーション

GSAP (GreenSock Animation Platform) は、高性能で柔軟なJavaScriptアニメーションライブラリです。以下に、GSAPを用いた様々なアニメーションの例を示します。

ただし、全て下記のHTMLをベースに確認してください。

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GSAP Animation Example</title>
  <style>
    /* ここに各cssを置く */
  </style>
</head>
<body>
  <!-- ここに各HTMLを置く -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
  <script>
   // ここに各JSを置く
  </script>
</body>
</html>

1. 基本的なフェードインアニメーション

html
<div id="fade-in-element">フェードイン</div>
css
#fade-in-element {
  opacity: 0;
}
javascript
gsap.to("#fade-in-element", { duration: 2, opacity: 1 });

2. スライドアニメーション

html
<div id="slide-element">スライド</div>
css
#slide-element {
  transform: translateX(-100px);
}
javascript
gsap.to("#slide-element", { duration: 2, x: 100 });

3. 回転アニメーション

html
<div id="rotate-element">回転</div>
css
#rotate-element {
  width: 100px;
  height: 100px;
  background-color: red;
}
javascript
gsap.to("#rotate-element", { duration: 2, rotation: 360 });

4. スケールアニメーション

html
<div id="scale-element">スケール</div>
css
#scale-element {
  width: 100px;
  height: 100px;
  background-color: blue;
}
javascript
gsap.to("#scale-element", { duration: 2, scale: 2 });

5. 色の変更アニメーション

html
<div id="color-change-element">色の変更</div>
css
#color-change-element {
  width: 100px;
  height: 100px;
  background-color: green;
}
javascript
gsap.to("#color-change-element", { duration: 2, backgroundColor: "yellow" });

練習問題

目標を読んで、下の回答を見ずに自力で実装してみてください。

練習問題 1: フェードイン・フェードアウトの繰り返しアニメーション

目標

要素がフェードインし、その後フェードアウトするアニメーションを繰り返し実行します。

html
<div id="fade-element">フェードイン・フェードアウト</div>
javascript
gsap.to("#fade-element", {
  duration: 2,
  opacity: 0,
  repeat: -1,
  yoyo: true
});

練習問題 2: 複数要素の連続アニメーション

目標

複数の要素に対して順番にアニメーションを適用し、各要素が次々とアニメーションするようにします。

html
<div class="sequential-elements">
  <div class="element">要素 1</div>
  <div class="element">要素 2</div>
  <div class="element">要素 3</div>
</div>
javascript
gsap.to(".element", {
  duration: 1,
  x: 100,
  stagger: 0.2
});

練習問題 3: ループする回転アニメーション

目標

要素が無限にループする回転アニメーションを実行します。

html
<div id="rotate-element">無限回転</div>
javascript
gsap.to("#rotate-element", {
  duration: 2,
  rotation: 360,
  repeat: -1
});