Add AOS scroll animations to enhance user experience#1044
Conversation
- Integrated AOS (Animate On Scroll) library via CDN - Added fade-up animations to hero section with staggered delays - Applied scroll animations to all feature cards with sequential timing - Animated section titles and feedback form for smooth transitions - Configured AOS with 800ms duration and ease-in-out easing - Set animations to trigger once for better performance This makes the landing page feel more modern and engaging while maintaining smooth performance across devices.
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Thanks for submitting your first pull request to the Open Source Society project — we really appreciate your contribution! Our maintainers will review your PR soon. In the meantime, make sure you've followed the contribution checklist and linked any relevant issues. Welcome aboard, and keep contributing! 💚
There was a problem hiding this comment.
Pull request overview
This PR integrates the AOS (Animate On Scroll) library to add smooth scroll animations throughout the landing page, enhancing the visual experience with fade-up effects and staggered timing.
- Added AOS library v2.3.1 via CDN with optimized configuration (800ms duration, ease-in-out easing, once: true for performance)
- Applied fade-up animations to hero section elements (hero-content and search-card) with 200ms delay between them
- Added sequential scroll animations to all 7 feature cards and section titles with varying delays
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| duration: 800, | ||
| easing: 'ease-in-out', | ||
| once: true, | ||
| offset: 100 |
There was a problem hiding this comment.
Missing accessibility consideration: The AOS animations don't respect users' prefers-reduced-motion preference. Consider adding disable: 'mobile' or disable: window.matchMedia('(prefers-reduced-motion: reduce)') to the AOS.init() configuration to ensure the animations are disabled for users who have requested reduced motion for accessibility reasons.
| offset: 100 | |
| offset: 100, | |
| disable: function() { | |
| return window.matchMedia('(prefers-reduced-motion: reduce)').matches; | |
| } |
| @@ -136,7 +139,7 @@ <h3>Collaborative Discussions</h3> | |||
| </div> | |||
|
|
|||
| <!-- Feature 6 --> | |||
There was a problem hiding this comment.
Incorrect comment: This is labeled as "Feature 6" but it's actually the 7th feature card. This should be "Feature 7" to maintain accurate numbering.
| <!-- Feature 6 --> | |
| <!-- Feature 7 --> |
Description
This PR implements smooth scroll animations using the AOS (Animate On Scroll) library to make the website more modern and visually appealing.
Changes Made
Why AOS?
Testing
Tested on:
Screenshots/Demo
The animations provide a modern, professional feel to the landing page while maintaining excellent performance.
Closes #1041