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>

Anime.jsのサンプルを動かす

Anime.jsの核となるのはanimate()関数です。第一引数にセレクタ、第二引数に変化させたいプロパティ（x、rotate、scaleなど）とduration・easingを渡すだけで、対象要素がなめらかにアニメーションします。以下は「再生」ボタンを押すとボックスが移動・回転・拡大する最小構成です。

import { animate } from 'animejs';

animate('#box', {
  x: 250,
  rotate: 360,
  scale: 1.2,
  duration: 1000,
  easing: 'easeOutExpo'
});

下のサンプルは実際に編集・実行できます。「アニメーション再生」でボックスが動き、「リセット」で元の位置に戻ります。

コード中のeasing: 'easeOutExpo'を'easeOutBounce'に変えると弾むような動きになりますし、durationの値を小さくするほどアニメーションが素早くなります。xやrotateの数値を書き換えて、animate()が受け取れるプロパティの幅広さも確認してみてください。

基本的な使い方

要素を移動させる

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

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('アニメーション完了')
});

実践的なユースケース

Anime.jsのstagger()で作るページロード時のフェードイン

ページ読み込み時に要素を順番にフェードインさせる演出は定番です。Anime.jsのstagger()関数をdelayに渡すことで、複数要素へ自動的に時間差をつけられます。

import { animate, stagger } from 'animejs';

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

実際のページではDOMContentLoadedで自動実行しますが、サンプルでは挙動を何度も確認できるよう「フェードイン実行」ボタンからanimate()を呼び出しています。

stagger(80)の数値をstagger(300)のように大きくすると、要素ごとの時間差がはっきり分かるようになります。逆にstagger(80, { from: 'last' })とすると、最後の要素から順にフェードインする向きに変えられます。

Anime.jsのタイムラインで作る複数要素の連続アニメーション

animate()単体では1つのアニメーションしか扱えませんが、createTimeline()を使うと複数のアニメーションを順番に、あるいは時間をずらして重ねながら連結できます。モーダルやカードが「見出し→本文→フッター」の順に出現するような演出はこの書き方が定番です。

import { createTimeline } from 'animejs';

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

tl.add('.card-title', { y: [-20, 0], opacity: [0, 1] })
  .add('.card-body', { y: [20, 0], opacity: [0, 1] }, '-=150')
  .add('.card-footer', { y: [20, 0], opacity: [0, 1] }, '-=150');

下のサンプルでは「タイムライン再生」ボタンを押すと、カードのタイトル・本文・フッターがcreateTimeline()のチェーンに沿って順番に浮かび上がります。

'-=150'の数値を大きくするほどオーバーラップが強くなり、各要素の出現がほぼ同時に近づきます。逆に'+=200'のようにプラス指定へ変えると、前のアニメーション終了後に間を空けてから次が始まるようになります。

Anime.jsのイージングを比較する

同じ移動量でもeasingの種類によって体感速度や「らしさ」が大きく変わります。Anime.jsにはeaseOutExpoのような減速系から、easeOutBounceやeaseOutElasticのような跳ねる系まで多数のイージング関数が用意されています。

import { animate } from 'animejs';

animate('.ball', {
  x: 240,
  duration: 900,
  easing: 'easeOutElastic'
});

下のサンプルではボタンごとに異なるeasingを指定してボールを動かします。同じx: 240・duration: 900でもイージングだけでこれだけ印象が変わることを確認できます。

easeOutBounceはゴール手前で弾むような揺り戻しが入り、easeOutElasticはさらに大きくバネのように振動します。UIのアクセントとして使うなら、控えめなeaseOutCubicやeaseOutQuadから試すのがおすすめです。

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

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