Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Addition of transition animation for Authentication Pages #24

Closed
avirupnandi1 opened this issue Jan 15, 2024 · 1 comment · Fixed by #28
Closed

Addition of transition animation for Authentication Pages #24

avirupnandi1 opened this issue Jan 15, 2024 · 1 comment · Fixed by #28
Assignees
@avirupnandi1
Labels
JWOC medium

Comments

@avirupnandi1
Copy link
Contributor

Description:

Overview

The current authentication process could benefit from the addition of left-to-right transitions, enhancing the visual appeal and user experience. Specifically, incorporating these transitions for the login page, sign-up page, forgot password page, and the transition from the authentication section to the app screen would contribute to a more polished and user-friendly authentication flow.

Details

  1. Login Page:

    • Introduce a smooth left-to-right transition when the user navigates to the login page.
    • Implement subtle animations during the transition between input fields and when submitting credentials.

  2. Sign Up Page:

    • Enhance the user experience by incorporating left-to-right transitions when moving from the login page to the sign-up page.
    • Apply animations to signify the completion of the sign-up process, providing a satisfying visual feedback.

  3. Forgot Password Page:

    • Create a cohesive authentication flow by implementing left-to-right transitions on the forgot password page.
    • Consider adding animations to guide users through the password recovery steps seamlessly.

  4. Authentication to App Screen:

    • Implement a visually appealing left-to-right transition when the user successfully authenticates and transitions from the authentication section to the app screen.
    • Ensure consistency in transition effects across various devices and screen sizes.

Benefits

  • Enhanced User Engagement: Left-to-right transitions contribute to a more engaging and intuitive authentication process.
  • Visual Feedback: Animations provide users with clear visual cues, indicating the progress and completion of authentication steps.
  • Professional Design: Incorporating transitions adds a professional touch to the application, elevating the overall aesthetics.

Additional Information

  • This feature request aligns with contemporary design principles, fostering a positive perception of the application.
  • Maintaining accessibility standards is crucial during the implementation of transitions to ensure an inclusive user experience.

Your consideration of this left-to-right transition feature request is highly appreciated. Please feel free to reach out if further clarification or additional details are needed.
@avirupnandi1
Copy link
Contributor Author

Assign me.. I can work on this issue

@avirupnandi1 avirupnandi1 mentioned this issue Jan 15, 2024
Merged
Abhigyan103 added a commit that referenced this issue Jan 15, 2024
@Abhigyan103
Added animations in authentication page (#28)
eb9f2c4 
**Description:**
Fixes #24 
### Overview
This pull request addresses the feature request outlined in Issue #24,
where left-to-right transitions were proposed to improve the visual
appeal and user experience of the authentication process. The changes
introduced in this pull request enhance the authentication pages with
both left-to-right and right-to-left animations, providing a polished
and engaging user flow.

### Changes Made
1. **Login Page:**
- Implemented a smooth left-to-right transition when navigating to the
login page.
- Added subtle animations during the transition between input fields and
when submitting credentials.

2. **Sign Up Page:**
- Enhanced the user experience by incorporating left-to-right
transitions when moving from the login page to the sign-up page.
- Applied animations to provide satisfying visual feedback upon the
completion of the sign-up process.

3. **Forgot Password Page:**
- Created a cohesive authentication flow by introducing left-to-right
transitions on the forgot password page.
- Added animations to guide users seamlessly through the password
recovery steps.

4. **Authentication to App Screen:**
- Implemented a visually appealing left-to-right transition when users
successfully authenticate, moving from the authentication section to the
app screen.
- Ensured consistency in transition effects across various devices and
screen sizes.

### Testing
- Thoroughly tested the implemented transitions on various browsers and
devices to ensure a consistent and reliable user experience.
- Verified that the animations do not negatively impact accessibility or
overall application performance.

### Screenshots



https://github.com/Abhigyan103/Clickboard/assets/106444983/b4ee53f5-ef36-4e4e-8b2c-4dcd85f341fe



### Additional Notes
- This pull request is in line with modern design principles, enhancing
the overall aesthetics and user engagement in the authentication
process.
- Adhered to accessibility standards to ensure an inclusive user
experience.

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

@avirupnandi1 avirupnandi1

Labels
JWOC medium
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Added animations in authentication page
2 participants
@Abhigyan103 @avirupnandi1