スクロールアニメーションの実装に消耗していたが、AOSで解決した

はじめに

ランディングページやポートフォリオサイトを作っていると、「スクロールに合わせて要素がふわっとフェードインする」演出を入れたくなる場面が多々あります。しかし、いざ自前で実装しようとすると、Intersection Observerでの監視処理、要素ごとのアニメーション状態管理、CSSのタイミング調整など、見た目以上に手間がかかる作業になりがちです。

そこで役立つのが「AOS（Animate On Scroll）」です。HTMLに属性を1つ書くだけで、スクロール連動アニメーションを実現できるJavaScriptライブラリです。今回はAOSの特徴から、基本的な使い方、実際のプロジェクトでの活用方法まで解説します。

AOSとは

AOSは、スクロールに応じてページ内の要素へCSSアニメーションを適用するための軽量なJavaScriptライブラリです。フェード・スライド・ズーム・フリップといった定番のアニメーションパターンをあらかじめ用意しており、data-aos属性を要素に付けるだけで動作します。jQueryのような外部依存は不要で、Vanilla JSとして単体で動くため、既存のどんなプロジェクトにも組み込みやすいのが魅力です。

主な特徴

属性ベースのシンプルな記法 - data-aos="fade-up"のようにHTML属性を書くだけでアニメーションが有効になり、JavaScript側で個別に処理を書く必要がありません
豊富な組み込みアニメーション - フェード系・スライド系・ズーム系・フリップ系など、用途に応じたアニメーションパターンが最初から揃っています
細かい挙動調整が可能 - durationやdelay、easing、once（1回だけ実行するか）などを属性やグローバル設定で調整できます
依存ライブラリなし - jQueryなどを必要とせず、単体のスクリプトとして読み込むだけで使えます

インストール

npmでインストールする場合は以下のコマンドを実行します。

npm install aos

yarnを使っている場合は以下の通りです。

yarn add aos

CDN経由で手軽に試したい場合は、CSSとJSを読み込むだけで利用できます。

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

なお、次期メジャーバージョンであるv3系はベータ版（aos@next）としてnpmで公開されています。安定運用を優先する場合は、現行の安定版（v2系）であるaosを使うのがおすすめです。

基本的な使い方

まずはCSSを読み込み、対象となるHTML要素にdata-aos属性を付けます。

<link rel="stylesheet" href="node_modules/aos/dist/aos.css" />

<div data-aos="fade-up">
  <h2>スクロールすると表示されます</h2>
</div>

<div data-aos="fade-right" data-aos-delay="200">
  <p>少し遅れてスライドインします</p>
</div>

続いて、JavaScript側でAOSを初期化します。

import AOS from "aos";
import "aos/dist/aos.css";

AOS.init();

AOS.init()を呼び出すだけで、data-aos属性を持つすべての要素が監視対象になり、画面内に入ったタイミングで自動的にアニメーションが再生されます。

初期化時にオプションを渡すことで、サイト全体の挙動をまとめて調整することも可能です。

AOS.init({
  duration: 800, // アニメーションの再生時間(ms)
  easing: "ease-in-out", // イージング関数
  once: true, // 一度再生したら繰り返さない
  offset: 120, // トリガーされるまでのオフセット(px)
});

実践的なユースケース

サービス紹介LPで、複数のカードを少しずつタイミングをずらして表示する例です。data-aos-delayを使うことで、順番に浮かび上がるような演出を簡単に作れます。

<div class="features">
  <div class="card" data-aos="fade-up" data-aos-delay="0">
    <h3>特徴1</h3>
    <p>シンプルな導入で始められます。</p>
  </div>
  <div class="card" data-aos="fade-up" data-aos-delay="150">
    <h3>特徴2</h3>
    <p>細かいアニメーション調整が可能です。</p>
  </div>
  <div class="card" data-aos="fade-up" data-aos-delay="300">
    <h3>特徴3</h3>
    <p>依存ライブラリなしで軽量です。</p>
  </div>
</div>

SPAフレームワークと組み合わせる場合は、ルーティングでDOMが動的に更新されるため、画面遷移後にAOS.refresh()を呼んで監視対象を再計算してあげると、新しく描画された要素にもアニメーションが正しく適用されます。

import AOS from "aos";
import { useEffect } from "react";
import { useLocation } from "react-router-dom";

function App() {
  const location = useLocation();

  useEffect(() => {
    AOS.init({ once: true });
  }, []);

  useEffect(() => {
    AOS.refresh();
  }, [location]);

  // ...
}

まとめ

AOSは、data-aos属性を要素に付けてAOS.init()を呼ぶだけという最小限の手間で、スクロール連動アニメーションを実現できるライブラリです。フェードやスライドといった定番の演出が最初から揃っており、durationやdelay、onceなどのオプションで細かい調整もできるため、LPやポートフォリオサイトの演出づくりに気軽に取り入れられます。自前でIntersection Observerを実装する前に、まずはAOSを試してみる価値があるはずです。