Animate on Scroll

Thinking of different libraries and how to use them, and my current favorite is Animate On Scroll. It is simple, easy-to-use, and has pretty cool effects!

So, as you know this site was built on Next.js and I was playing on adding some animation to this to give it a little more polished look.

Here is how you do it:

• Install it using yarn

yarn add aos@next

• Add it to your _app.js in your root

import '../styles/global.scss'
import { useEffect } from "react";
import AOS from 'aos';
import 'aos/dist/aos.css'; // You can also use <link> for styles

export default function App({ Component, pageProps }) {
    useEffect(() => {
        AOS.init();
    }, []);
    return <Component {...pageProps} />
}

• use it where you want to like this:

<div data-aos-duration="1000" data-aos="fade-up">

That's it! So now when you scroll on main page, you will see the additional posts fade up as you scroll.

How easy is that?

Want to see a demo of a bunch of them, the author Michał Sajnóg made a great sample on his codepen here.