Anime.js - 軽量で高機能なJavaScriptアニメーションライブラリ

はじめに

Webサイトにちょっとした動きを加えたいとき、CSSアニメーションだけだと限界を感じることってありませんか。かといってGSAPのような重量級ライブラリを入れるほどでもない、という場面は意外と多いと思います。

Anime.jsは、そんなときにちょうどいいJavaScriptアニメーションライブラリです。GitHubスター65,000以上、月間140万ダウンロードという実績が示すとおり、フロントエンド開発者から広く支持されています。

個人的には「軽量なのに機能は十分」というバランスの良さが気に入っています。

特徴・メリット

軽量設計

Anime.js v4の総容量は約24.5KB。必要なモジュールだけをインポートすれば、さらに軽くなります。これ、意外と重要なポイントなんですよね。アニメーションライブラリのためにバンドルサイズが膨れ上がるのは避けたいところです。

幅広いアニメーション対象

CSS、SVG、DOM属性、JavaScriptオブジェクトと、ほぼすべてのプロパティをアニメーション対象にできます。単なるCSSアニメーションの代替ではなく、より柔軟な表現が可能です。

直感的なAPI

シンプルなAPIで、学習コストが低いのも魅力です。基本的にはanimate()関数にセレクタとプロパティを渡すだけ。それでいて、タイムライン制御やスタガー（連続遅延）といった高度な機能もサポートしています。

主な特徴まとめ

• 軽量（24.5KB）
• ES Modules対応
• CSS/SVG/DOM/JSオブジェクトのアニメーション
• タイムラインAPI
• スタガー効果
• スクロール連動アニメーション
• ドラッグ可能API
• MITライセンス

インストール方法

npmでインストールするのが一般的です。

npm install animejs

ES Modulesでインポートします。

import { animate, stagger } from 'animejs';

CDNから読み込む場合は以下のように。

<script src="https://cdn.jsdelivr.net/npm/animejs@4/lib/anime.min.js"></script>

基本的な使い方

要素を移動させる

まずは基本中の基本、要素を移動させるアニメーションです。

import { animate } from 'animejs';

animate('.box', {
  x: 250,
  duration: 1000,
  easing: 'easeOutExpo'
});

これだけで.boxクラスの要素が右に250px移動します。easingでアニメーションの緩急をつけられるのがポイントです。

複数プロパティを同時にアニメーション

複数のプロパティを同時に変化させることもできます。

import { animate } from 'animejs';

animate('.card', {
  x: 200,
  rotate: 360,
  scale: 1.2,
  opacity: 0.8,
  duration: 1500,
  easing: 'easeInOutQuad'
});

移動、回転、拡大、透明度の変化を一度に指定できます。

スタガー効果

複数要素に連続してアニメーションを適用するスタガー効果は、Anime.jsの得意技です。

import { animate, stagger } from 'animejs';

animate('.item', {
  y: [50, 0],
  opacity: [0, 1],
  duration: 800,
  delay: stagger(100),
  easing: 'easeOutCubic'
});

stagger(100)で各要素に100msずつ遅延をつけています。リスト表示のフェードインなどで効果的です。

タイムラインで順次実行

複数のアニメーションを順番に実行したい場合は、タイムラインAPIを使います。

import { createTimeline } from 'animejs';

const tl = createTimeline({
  defaults: { duration: 500, easing: 'easeOutQuad' }
});

tl.add('.header', { y: [-50, 0], opacity: [0, 1] })
  .add('.main', { y: [30, 0], opacity: [0, 1] }, '-=200')
  .add('.footer', { y: [30, 0], opacity: [0, 1] }, '-=200');

'-=200'で前のアニメーション終了200ms前に次を開始するオーバーラップも簡単に実現できます。

コールバックの活用

アニメーションの開始時、更新時、完了時にコールバックを設定できます。

import { animate } from 'animejs';

animate('.element', {
  x: 300,
  duration: 1000,
  begin: () => console.log('アニメーション開始'),
  update: (anim) => console.log(`進捗: ${Math.round(anim.progress)}%`),
  complete: () => console.log('アニメーション完了')
});

実践的なユースケース

ページロード時のフェードイン

ページ読み込み時に要素を順番にフェードインさせる演出は定番です。

import { animate, stagger } from 'animejs';

document.addEventListener('DOMContentLoaded', () => {
  animate('.fade-in', {
    opacity: [0, 1],
    y: [20, 0],
    duration: 600,
    delay: stagger(80),
    easing: 'easeOutCubic'
  });
});

ボタンのホバーエフェクト

CSSだけでは表現しにくい、ちょっと凝ったホバーエフェクトも実装できます。

import { animate } from 'animejs';

const buttons = document.querySelectorAll('.btn');

buttons.forEach(btn => {
  btn.addEventListener('mouseenter', () => {
    animate(btn, {
      scale: 1.05,
      duration: 200,
      easing: 'easeOutCubic'
    });
  });

  btn.addEventListener('mouseleave', () => {
    animate(btn, {
      scale: 1,
      duration: 200,
      easing: 'easeOutCubic'
    });
  });
});

SVGのパスアニメーション

SVGの線を描画するアニメーションも可能です。ロゴのお披露目演出などに使えます。

import { animate } from 'animejs';

animate('svg path', {
  strokeDashoffset: [anime.setDashoffset, 0],
  duration: 2000,
  easing: 'easeInOutSine'
});

スクロール連動アニメーション

v4ではスクロール連動機能も標準で搭載されています。

import { animate } from 'animejs';

animate('.parallax', {
  y: [-100, 100],
  scrollSync: {
    container: document,
    trigger: '.parallax',
    start: 'top bottom',
    end: 'bottom top'
  }
});

スクロール位置に応じて要素が動くパララックス効果を簡単に実装できます。

パフォーマンスのTips

transformプロパティを優先

leftやtopではなく、xやy（translateに変換される）を使いましょう。GPU accelerationが効いてパフォーマンスが向上します。

// 良い例
animate('.box', { x: 100, y: 50 });

// 避けたい例
animate('.box', { left: '100px', top: '50px' });

不要なアニメーションは停止

画面外の要素や非表示の要素のアニメーションは停止するのがベターです。

const anim = animate('.element', { x: 100, duration: 1000 });

// 停止
anim.pause();

// 再開
anim.play();

まとめ

Anime.jsは、Webアニメーションの「ちょうどいい」を実現してくれるライブラリです。

• 軽量（24.5KB）でバンドルサイズへの影響が小さい
• 直感的なAPIで学習コストが低い
• CSS/SVG/DOM/JSオブジェクトと幅広い対象に対応
• タイムライン、スタガー、スクロール連動など高度な機能も完備
• 10年以上の歴史とアクティブなメンテナンス

30代になって思うのは、「やりすぎないアニメーション」の大切さなんですよね。派手な動きを入れれば良いってものではなく、UIの使いやすさを補助する控えめなアニメーションこそが重要。Anime.jsはそういう繊細な表現もしやすいライブラリだと感じています。

CSSアニメーションだけでは物足りないけど、重いライブラリは入れたくない。そんな方は、まずAnime.jsを試してみることをおすすめします。

参考リンク

• Anime.js公式サイト
• GitHub リポジトリ
• 公式ドキュメント
• Best of JS - Anime.js