Skip to content

feat: Implement AOS for on-scroll animations#67

Open
RAGHU1242 wants to merge 1 commit intomr-rishikesh:mainfrom
RAGHU1242:feat/implement-aos-animations
Open

feat: Implement AOS for on-scroll animations#67
RAGHU1242 wants to merge 1 commit intomr-rishikesh:mainfrom
RAGHU1242:feat/implement-aos-animations

Conversation

@RAGHU1242
Copy link
Contributor

Closes: #66

Description

This pull request integrates the AOS (Animate On Scroll) library to introduce subtle, performant on-scroll animations across the application.

By adding AOS, the UI transitions from being static to dynamic and engaging. Elements now fade, slide, and zoom into view as the user scrolls, improving perceived quality and professionalism.


Changes Made

  • Installed Dependencies: Added aos to the project's dependencies.
  • Initialization: Initialized the AOS library in client/src/App.jsx to make it globally available.
    • Configured animations to run once with a duration of 1000ms.
  • Animation Implementation: Applied data-aos attributes to components and pages with effects like fade-up, fade-in, zoom-in, etc.

Files Changed

Animations were applied to the following files:

  • client/src/App.jsx
  • client/src/HomeLanding.jsx
  • client/src/ProfilePage.jsx
  • client/src/ProfileCard.jsx
  • client/src/MessageSidebar.jsx
  • client/src/components/layout/Footer.jsx
  • client/src/components/layout/Navbar.jsx
  • client/src/pages/About.jsx
  • client/src/pages/CreatePostPage.jsx
  • client/src/pages/Explore.jsx
  • client/src/pages/MessagePage.jsx
  • client/src/pages/HomePage/Home.jsx
  • client/src/pages/Auth/ChangePassword.jsx
  • client/src/pages/Profile.jsx
  • client/src/pages/Auth/SignIn.jsx
  • client/src/pages/Auth/SignUp.jsx

How to Test

  1. Pull the branch locally.
  2. Navigate to the client directory and run:
    npm install
    npm run dev

@vercel
Copy link

vercel bot commented Oct 4, 2025

@RAGHU1242 is attempting to deploy a commit to the mr-rishikesh's projects Team on Vercel.

A member of the Team first needs to authorize it.

@RAGHU1242
Copy link
Contributor Author

Untitled.video.-.Made.with.Clipchamp.mp4

@mr-rishikesh ,
This took significant effort and time, Can you assign**** Level 3.*** Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Implement AOS for on-scroll animations

1 participant