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

Yuya, Next.jsanimationtailwindhtml
Back

こんにちは。@yuyaaaarです。

ちょっとしたアニメーション入れたいけど、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"],
},
},
...
}
© Yuya Oiwa