JavaScriptで動きを加える：アニメーションライブラリ10選と導入方法

Anime.js：汎用性の高いモダンなライブラリ

Anime.jsは、シンプルな構文で多彩なアニメーションを実現できるライブラリです。数値、CSS、SVG、DOM属性などをアニメーション化できます。

導入方法：

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

使用例：

anime({
  targets: '.box',
  translateX: 250,
  rotate: '1turn',
  duration: 800,
  easing: 'easeInOutSine'
});

---

GSAP：プロ向けの高性能ライブラリ

GSAP (GreenSock Animation Platform) は業界標準ともいえる高機能アニメーションライブラリです。タイムライン制御やスクロール連動などにも対応。

導入方法：

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

使用例：

gsap.to(".box", { x: 300, duration: 1, rotation: 360 });

---

ScrollReveal：スクロール連動アニメーションに特化

ScrollRevealは、スクロールに応じて要素を表示するアニメーションを簡単に追加できるライブラリです。

導入方法：

<script src="https://unpkg.com/scrollreveal"></script>

使用例：

ScrollReveal().reveal('.reveal', { distance: '50px', origin: 'bottom', duration: 1000 });

---

AOS（Animate On Scroll）：HTML属性で制御できる簡単実装

AOSは、スクロール連動のアニメーションをHTML属性で制御できるシンプルなライブラリです。

導入方法：

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

使用例：

<div data-aos="fade-up">アニメーション対象</div>
<script>AOS.init();</script>

---

Lottie：After EffectsのアニメーションをWebに

Lottieは、After Effectsで作成したアニメーションをJSON形式でWebに表示できるライブラリです。

導入方法：

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.0/lottie.min.js"></script>

使用例：

lottie.loadAnimation({
  container: document.getElementById('animation'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'animation.json'
});

---

Mo.js：物理的な動きを演出できるライブラリ

Mo.jsは、動きに物理演算的な美しさを加えられるライブラリで、バーストアニメーションやモーダル演出などに向いています。

導入方法：

<script src="https://cdn.jsdelivr.net/npm/@mojs/core"></script>

使用例：

const burst = new mojs.Burst({
  radius:   { 0: 100 },
  count:    10,
  children: { shape: 'circle', fill: 'cyan' }
});
burst.play();

---

Three.js：3Dアニメーションを扱える強力なライブラリ

Three.jsは、WebGLベースの3D表現が可能なライブラリで、リアルなアニメーションやゲームUIに適しています。

導入方法：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/three.min.js"></script>

使用例：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

---

Vivus.js：SVGアニメーションに特化

Vivus.jsは、SVGを手書き風にアニメーションするためのライブラリです。

導入方法：

<script src="https://cdn.jsdelivr.net/npm/vivus"></script>

使用例：

new Vivus('my-svg', { type: 'delayed', duration: 200 });

---

RoughNotation：手書き風マーカーアニメーション

RoughNotationは、テキストや要素を手書き風に強調表示するアニメーションを加えられます。

導入方法：

<script src="https://unpkg.com/rough-notation/lib/rough-notation.iife.js"></script>

使用例：

const annotation = RoughNotation.annotate(document.querySelector('h1'), { type: 'underline', color: 'red' });
annotation.show();

---

Lenis：滑らかなスクロールを演出

Lenisは、スムーズなスクロールを簡単に実装できる軽量ライブラリです。

導入方法：

<script src="https://cdn.jsdelivr.net/npm/@studio-freight/lenis"></script>

使用例：

const lenis = new Lenis();
function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);

---

まとめ：どのライブラリを選ぶべきか？

アニメーションの目的や難易度に応じて、選ぶべきライブラリは異なります。シンプルに始めたいならAOSやScrollReveal、複雑な制御をしたいならGSAPやAnime.js、3Dや高度な表現を目指すならThree.jsが有力です。プロジェクトの要件に応じて、最適なライブラリを選定してみてください。