brunos3d/nextjs-with-aos-example

🔺 NEXT.JS - Example project using Next.js with Animate On Scroll Library.

nextjs-with-aos-example

🔺 NEXT.JS - Example project using Next.js with Animate On Scroll Library.

🚀 Demo

💬 Explanations

This project was created from the need to implement reveal scroll animations in projects using Next.js. As simple as it sounds, most of the time it becomes a headache when you start running into performance issues from multiple additions of event listeners to your site's DOM. One solution is to externalize this responsibility using AOS. However this has some points of attention such as for example:

• Initialize AOS with your page
• Infer styles for AOS to work on browsers whose javascript has been disabled

With this I decided to create a template that helps me in creating projects with next using everything that is best created by my friend João Pedro Schmitz.

🚀 Getting started

The best way to start with this template is using create-next-app.

npx create-next-app ts-next -e https://github.com/brunos3d/nextjs-with-aos-example

If you prefer you can clone this repository and run the following commands inside the project folder:

1. npm install or yarn;
2. yarn dev;

To view the project open http://localhost:3000.

After your pull request is merged, you can safely delete your branch.

📝 License

This project is licensed under the MIT License - see the LICENSE.md file for more information.

---

Template made by João Pedro Schmitz

AOS Implementations made with 💜 by Bruno Silva

nextjs-with-aos-example's Issues

Page starting scrolled

Self-explanatory