💓

aos で躍動感あるランディングページを作ろう

2021/01/12に公開

HTML

こんにちは。

ちょっとしたアニメーション入れたいけど、CSSとかでやるのもめんどくさいしな〜〜って思ったことありませんか？

そこで、今回は animate on scroll ライブラリの aos の紹介です。

パッケージマネージャーまたは script タグで導入して、AOS.init()して、あとは data-aos-* attribute をタグに入れるだけ。

例：

<div data-aos="fade-up">上からアニメート</div>

これだけで、スクロールして viewport に入ったら指定したアニメーションが動き出します。

こんな感じ

Next.js での使い方

AOS.init()する場合、SSR関連の理由で _app.js の useEffect にラップする必要があります。

function MyApp({ Component, pageProps }) {
  React.useEffect(() => {
    AOS.init({
      once: true,
      easing: "ease-out-sine",
      duration: 600,
    });
  }, []);
  
  return ...
}

Tailwind CSS と併用する場合

なぜかアニメーションが dev 環境では動いたのに、prod になるとアニメーションが動かなくなるということが起こって、ちょっと詰まりました。

後にわかったのが、大概の場合 tailwind.config.js で使われていないスタイルをプロダクションでは消してくれる purge オプションを使っていると思うのですが、そいつがアニメーションスタイルも消しちゃってしまう、ということでした。

purge の whitelistPatterns にアニメーション css のパスを入れたら解決しました。

// tailwind.config.js
module.exports = {
  purge: {
    content: ["./src/**/*.tsx"],
    options: {
      whitelistPatterns: ["./node_modules/aos/dist/aos.css"],
    },
  },
  ...
}

Next.js での使い方

Tailwind CSS と併用する場合

Discussion