startups and code
startupsandcode
ResumePodcastBlog

Animate on Scroll

Back to home
PreviousNext

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.

PreviousNext