{"id":19384615,"url":"https://github.com/brunos3d/nextjs-with-aos-example","last_synced_at":"2025-10-15T02:28:08.470Z","repository":{"id":101228519,"uuid":"389753526","full_name":"brunos3d/nextjs-with-aos-example","owner":"brunos3d","description":"🔺 NEXT.JS - Example project using Next.js with Animate On Scroll Library.","archived":false,"fork":false,"pushed_at":"2024-01-11T06:58:12.000Z","size":93,"stargazers_count":57,"open_issues_count":1,"forks_count":10,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-10T14:39:17.549Z","etag":null,"topics":["animation","aos","boilerplate","css","data-aos","example","fade","front-end","next","nextjs","react","reveal","scroll","template","transition"],"latest_commit_sha":null,"homepage":"https://nextjs-with-aos-example.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brunos3d.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-26T19:59:32.000Z","updated_at":"2025-01-31T00:48:44.000Z","dependencies_parsed_at":"2024-11-10T09:31:57.788Z","dependency_job_id":"a736f0b4-ec57-4875-8d0e-2f9a18f03895","html_url":"https://github.com/brunos3d/nextjs-with-aos-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":"jpedroschmitz/typescript-nextjs-starter","purl":"pkg:github/brunos3d/nextjs-with-aos-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunos3d%2Fnextjs-with-aos-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunos3d%2Fnextjs-with-aos-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunos3d%2Fnextjs-with-aos-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunos3d%2Fnextjs-with-aos-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brunos3d","download_url":"https://codeload.github.com/brunos3d/nextjs-with-aos-example/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunos3d%2Fnextjs-with-aos-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279035462,"owners_count":26089689,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-15T02:00:07.814Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","aos","boilerplate","css","data-aos","example","fade","front-end","next","nextjs","react","reveal","scroll","template","transition"],"created_at":"2024-11-10T09:31:42.309Z","updated_at":"2025-10-15T02:28:08.427Z","avatar_url":"https://github.com/brunos3d.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# nextjs-with-aos-example\n\n🔺 NEXT.JS - Example project using Next.js with [Animate On Scroll Library](https://www.npmjs.com/package/aos).\n\n### 🚀 [Demo](https://nextjs-with-aos-example.vercel.app/)\n\n## 💬 Explanations\n\nThis project was created from the need to implement `reveal scroll animations` in projects using [Next.js](https://nextjs.org/).\nAs 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.\nOne solution is to externalize this responsibility using [AOS](https://www.npmjs.com/package/aos).\nHowever this has some points of attention such as for example:\n- [Initialize AOS](https://github.com/BrunoS3D/nextjs-with-aos-example/blob/461faf6325f8599ee09f226d15774c8905e2fdab/src/pages/_app.tsx#L10) with your page\n- [Infer styles](https://github.com/BrunoS3D/nextjs-with-aos-example/blob/461faf6325f8599ee09f226d15774c8905e2fdab/src/pages/_document.tsx#L18) for AOS to work on browsers whose javascript has been disabled\n\nWith 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](https://github.com/jpedroschmitz).\n\n## 🚀 Getting started\n\nThe best way to start with this template is using `create-next-app`.\n\n```\nnpx create-next-app ts-next -e https://github.com/brunos3d/nextjs-with-aos-example\n```\n\nIf you prefer you can clone this repository and run the following commands inside the project folder:\n\n1. `npm install` or `yarn`;\n2. `yarn dev`;\n\nTo view the project open `http://localhost:3000`.\n\n**After your pull request is merged**, you can safely delete your branch.\n\n## 📝 License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for more information.\n\n---\n\nTemplate made by [João Pedro Schmitz](https://github.com/jpedroschmitz)\n\nAOS Implementations made with 💜 by [Bruno Silva](https://github.com/brunos3d)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrunos3d%2Fnextjs-with-aos-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrunos3d%2Fnextjs-with-aos-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrunos3d%2Fnextjs-with-aos-example/lists"}