インテグレーション

data-animはHTML属性を使い独自のCSSを注入するため、あらゆるHTMLベースのプロジェクトで動作します。フレームワーク固有の設定は不要。

Static HTML

最もシンプルな統合方法。scriptタグを追加して属性を使い始めるだけ。

index.html

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/data-anim@latest/dist/data-anim.js"></script>
</head>
<body>
  <h1 data-anim="fadeInUp">Hello World</h1>
  <p data-anim="fadeInUp" data-anim-delay="200ms">
    Welcome to my site.
  </p>
</body>
</html>

React (Vite)

npmでインストール：

npm install data-anim

エントリーファイルの先頭で一度インポート。data-animは自動初期化され、MutationObserverでマウントされるコンポーネントを検知します。

src/main.jsx

// src/main.jsx
import 'data-anim';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')).render(<App />);

任意のコンポーネントでdata-anim属性を使用：

src/Features.jsx

function Features() {
  return (
    <section data-anim-stagger="100">
      <h2 data-anim="fadeInUp">Features</h2>
      <div data-anim="fadeInUp">Fast</div>
      <div data-anim="fadeInUp">Lightweight</div>
      <div data-anim="fadeInUp">Zero config</div>
    </section>
  );
}

useEffectも、refも、ラッパーコンポーネントも不要。

Vue (Vite)

npmでインストール：

npm install data-anim

エントリーファイルの先頭で一度インポート。data-animは自動初期化され、MutationObserverでマウントされるコンポーネントを検知します。

src/main.js

// src/main.js
import 'data-anim';
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

任意のコンポーネントでdata-anim属性を使用：

src/components/Features.vue

<template>
  <section data-anim-stagger="100">
    <h2 data-anim="fadeInUp">Features</h2>
    <div data-anim="fadeInUp">Fast</div>
    <div data-anim="fadeInUp">Lightweight</div>
    <div data-anim="fadeInUp">Zero config</div>
  </section>
</template>

onMountedも、refも、ディレクティブも不要。

Next.js

npmでインストール：

npm install data-anim

ルートレイアウトでインポート。Anti-FOUC保護のためにnext/scriptでstrategy="beforeInteractive"を使用するか、クライアントコンポーネントでnpmインポート方式を使用：

app/layout.tsx

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <Script
          src="https://unpkg.com/data-anim@latest/dist/data-anim.js"
          strategy="beforeInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

または、クライアントコンポーネント経由でnpmパッケージをインポート。注意：data-animはモジュールレベルでdocumentにアクセスするため、SSRエラーを避けるためにuseEffect内でダイナミックインポートを使用：

app/DataAnim.tsx

// app/DataAnim.tsx
'use client';
import { useEffect } from 'react';

export default function DataAnim() {
  useEffect(() => {
    import('data-anim');
  }, []);
  return null;
}

app/layout.tsx

// app/layout.tsx
import DataAnim from './DataAnim';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <DataAnim />
        {children}
      </body>
    </html>
  );
}

サーバーコンポーネントでもクライアントコンポーネントでも属性を使用可能：

app/page.tsx

// app/page.tsx
export default function Home() {
  return (
    <main>
      <h1 data-anim="fadeInUp">Welcome</h1>
      <p data-anim="fadeInUp" data-anim-delay="200">
        Built with Next.js + data-anim
      </p>
    </main>
  );
}

Nuxt

ルートコンポーネントでuseHeadを使い、CDN経由でdata-animを読み込みます。SSR出力にスクリプトが含まれるため、Anti-FOUC保護が有効になります：

app/app.vue

<!-- app/app.vue -->
<script setup>
useHead({
  script: [
    {
      src: 'https://unpkg.com/data-anim@latest/dist/data-anim.js',
      tagPosition: 'head',
    },
  ],
});
</script>

<template>
  <div>
    <h1 data-anim="fadeInUp">Welcome</h1>
    <p data-anim="fadeInUp" data-anim-delay="200">
      Built with Nuxt + data-anim
    </p>
  </div>
</template>

プラグインやnuxt.config.tsの追加設定は不要です。

Astro

ベースレイアウトに追加：

src/layouts/Layout.astro

---
// src/layouts/Layout.astro
---
<html>
  <head>
    <script src="https://unpkg.com/data-anim@latest/dist/data-anim.js"></script>
  </head>
  <body>
    <slot />
  </body>
</html>

任意の.astroまたは.mdxページで使用：

<section data-anim-stagger="100ms">
  <h1 data-anim="fadeInUp">Welcome</h1>
  <p data-anim="fadeInUp">Built with Astro + data-anim</p>
</section>

Hugo

ベーステンプレートの<head>にスクリプトを追加：

layouts/_default/baseof.html

<!-- layouts/_default/baseof.html -->
<!DOCTYPE html>
<html>
<head>
  {{ partial "head.html" . }}
  <script src="https://unpkg.com/data-anim@latest/dist/data-anim.js"></script>
</head>
<body>
  {{ block "main" . }}{{ end }}
</body>
</html>

Markdown内で生のHTMLを使用：

<!-- content/posts/my-post.md -->
<div data-anim="fadeInUp">

## My Animated Section

This content will fade in when scrolled into view.

</div>

WordPress

テーマのheader.phpにスクリプトを追加するか、プラグインを使用して<head>に注入：

functions.php

// functions.php
function enqueue_data_anim() {
  wp_enqueue_script(
    'data-anim',
    'https://unpkg.com/data-anim@latest/dist/data-anim.js',
    array(),
    null,
    false // Load in <head>, not footer
  );
}
add_action('wp_enqueue_scripts', 'enqueue_data_anim');

テンプレートまたはブロックエディター（カスタムHTMLブロック）で属性を使用：

<div data-anim="fadeInUp" class="wp-block-group">
  <h2>Section Title</h2>
  <p>Section content goes here.</p>
</div>

HTMX

data-animはHTMXの動的コンテンツスワップとシームレスに連携します。HTMXがコンテンツをスワップした後、data-animのMutationObserverが新しい[data-anim]要素を自動的に検知します。

<div hx-get="/api/content" hx-trigger="click" hx-swap="innerHTML">
  <button>Load More</button>
</div>

<!-- Server returns: -->
<div data-anim="fadeInUp">
  New content animates automatically!
</div>

追加設定不要。data-animはDOMの変更を監視します。

Turbo (Hotwire)

HTMXと同様に、Turboはページコンテンツを動的に置換します。data-animはturbo:loadで自動的に再初期化されます。

<!-- Just include data-anim in your layout head -->
<head>
  <script src="https://unpkg.com/data-anim@latest/dist/data-anim.js"></script>
</head>

<!-- Use normally in any Turbo-driven page -->
<div data-anim="fadeInUp">
  This works across Turbo page transitions
</div>

基本原則

data-animは設計上フレームワーク非依存です。HTML属性を書ける場所ならどこでも動作します。唯一の要件は、Anti-FOUC保護のためにスクリプトを<head>内に（同期的に）読み込むこと。

インテグレーション

目次

Static HTML

React (Vite)

Vue (Vite)

Next.js

Nuxt

Astro

Hugo

WordPress

HTMX

Turbo (Hotwire)

基本原則