A modern animated authentication UI built with HTML, CSS, and JavaScript. Features a smooth sliding transition between Sign In and Sign Up forms with a polished overlay effect and social login placeholders
- HTML5 – semantic structure
- CSS3 – animations, transitions & layout
- JavaScript (Vanilla) – interaction logic
- Font Awesome 7 – brand icons
- Google Fonts (Montserrat) – modern typography
- Dual Authentication Forms – Sign In & Sign Up in a single layout
- Smooth Toggle Animation – Sliding panels with layered transitions
- Overlay Panel Effect – Interactive welcome screens
- Responsive Design – Works across screen sizes
- Reusable Structure – Easy to plug into any frontend project
- Minimal JavaScript – Class-based state handling
- Gradient overlay background
- Animated form switching using CSS transforms
- Built-in social login icon layout
- Rounded modern card layout
- Clean and centered authentication flow
The goal was to build a modern authentication interface without any framework — just clean HTML, CSS, and JavaScript.
The core idea revolves around toggling a single CSS class active on the container.
This class triggers :-
- form translations
- opacity changes
- z-index swaps
- animated overlay movement
CSS handles most of the heavy lifting, while JavaScript simply controls state. This keeps the UI smooth, readable, and easy to maintain.
- Two form containers (sign-in, sign-up)
- One toggle container for overlay transitions
- Controlled animations using transform, opacity, and z-index
- @keyframes for smooth transitions
- Gradient overlay with layered positioning
- Event listeners on Sign In / Sign Up buttons
- Toggles .active class on the main container
- Advanced CSS animations and transitions
- Layered UI effects without libraries
- State-driven UI with minimal JavaScript
- Clean separation of structure, style, and logic