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

はじめに

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

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

とはいえ、説明を読むより先に触ってみた方が早いと思います。data-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を使うのがおすすめです。

AOSのサンプルを動かす

下のサンプルは、AOSを実際にブラウザ上で動かせるプレイグラウンドです。上部の<select>でアニメーションの種類（fade-up・fade-down・fade-left・fade-right・zoom-in・flip-left）を切り替えたうえで下にスクロールすると、data-aos属性の値に応じてボックスの登場アニメーションが変わる様子を確認できます。すでにボックスが画面内にある状態で種類を変えても、その場で再生されるようにしています。

まずは要点だけを抜き出すと、AOSの基本コードはこれだけです。data-aos属性の値を書き換えてAOS.refreshHard()を呼ぶと、表示中の要素にも新しいアニメーションを適用し直せます。

<div id="demo-box" data-aos="fade-up" data-aos-duration="700"></div>

<script type="module">
  import AOS from "aos";

  AOS.init({ once: false, mirror: true });

  // data-aos属性を書き換えてrefreshHard()を呼ぶと
  // 表示中の要素にも新しいアニメーションを適用できる
  select.addEventListener("change", (e) => {
    demoBox.setAttribute("data-aos", e.target.value);
    AOS.refreshHard();
  });
</script>

実際に動かせるサンプルが以下です。セレクトでアニメーションを選んでからスクロールしてみてください。

once: falseとmirror: trueを渡しているため、ボックスを画面外にスクロールしてから戻すと同じアニメーションを何度でも再生できます。セレクトをzoom-inに変えると縮小状態からの拡大、flip-leftに変えるとY軸回転でのフリップに切り替わるはずです。実際のプロジェクトで使う際は、このdata-aos属性の値をHTML側で固定し、data-aos-durationやdata-aos-delayを要素ごとに個別指定する形になります。

基本的な使い方

まずは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>

このAOSのdata-aos-delayによるカード段階表示を、実際にブラウザで再生できるようにしたサンプルが以下です。「▶ 再生する」ボタンを押すと、data-aos-delayが0・150・300と設定された3枚のカードが、その値の差だけタイミングをずらして順番に浮かび上がります。下にスクロールしても同じ動きが確認できます。

data-aos-delayの数値を大きくするほど、そのカードの再生開始が遅れます。値をすべて同じにすると3枚が同時に浮かび上がる演出になり、逆に間隔を広げるとよりゆったりした段階表示になります。

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を試してみる価値があるはずです。