# StudyBuddy Animated Menu System
This document explains how to use the new GSAP-powered animated menu system across StudyBuddy pages.
## Overview
The new menu features:
- **Animated header intro**: Header pill expands on page load with smooth animations
- **Desktop hover effects**: Subtle animated hover states on navigation links
- **Fullscreen overlay menu**: Beautiful fullscreen menu with animated text and background images
- **GSAP + SplitText**: Professional-grade animations using GSAP and SplitText plugins
- **Responsive design**: Works seamlessly on mobile and desktop
- **Theme support**: Automatically adapts to light/dark mode
## Files Created
1. **public/css/animated-menu.css** - All menu styles
2. **public/js/animated-menu.js** - GSAP animations and interactions
3. **public/components/animated-header.html** - Reusable header template
## Pages Already Updated
- ✅ index.html
- ✅ study.html
## How to Update Other Pages
### Step 1: Add CSS Link
In the `` section, after other stylesheets:
```html
` with the animated header markup from `public/components/animated-header.html`, or copy from index.html/study.html.
The basic structure is:
```html
```
### Step 3: Add Required Scripts
Before the closing `` tag, add these scripts (in order):
```html
```
**Important**: These scripts should be added:
- After Bootstrap JS
- Before your auth.js or other custom scripts
### Step 4: Update Theme Toggle Logic
If your page has a theme toggle, update references from `nav.navbar` to `header.animated-header`:
**Before:**
```javascript
const nav = document.querySelector('nav.navbar');
```
**After:**
```javascript
const header = document.querySelector('header.animated-header');
const toggle = document.getElementById('your-theme-toggle');
const toggleGuest = document.getElementById('your-theme-toggle-guest');
```
Also update theme application to handle both toggle buttons (one in overlay for logged-in users, one for guests).
### Step 5: Update Auth.js Integration
The auth.js file has been updated to support the new overlay menu elements:
- `#overlayUserInfo` - Shows when user is logged in
- `#overlayGuestInfo` - Shows when user is guest
- `#overlayUserName` - Displays username
- `#overlaySignoutBtn` - Sign out button in overlay
- `#overlaySigninBtn` - Sign in button in overlay
No additional changes needed if using the updated auth.js.
## Customization
### Menu Links
Edit the overlay menu links in the HTML:
```html
```
The `data-image-index` attribute controls which background image appears on hover.
### Background Images
Update the images in the `.overlay-menu-images` container:
```html
```
### Colors and Branding
The menu adapts StudyBuddy's color scheme automatically. To customize further:
- **Header background**: Edit `.animated-header` gradient in `animated-menu.css`
- **Overlay background**: Edit `.full-width-overlay-menu` gradient
- **Hover colors**: Edit `.overlay-nav-list li a:hover` color
### Desktop Navigation
The desktop navigation (visible on screens > 1100px) is configured in:
```html
```
## Animation Timing
All animations can be adjusted in `animated-menu.js`:
- **Header intro delay**: Default 0.3s (line 24)
- **Header expansion**: Default 1.2s duration (lines 28, 36)
- **Menu slide-in**: Default 0.6s duration (line 159)
- **Text stagger**: Default 0.12s (line 171)
## Browser Support
- Chrome/Edge: Full support
- Firefox: Full support
- Safari: Full support
- Mobile browsers: Full support
Requires:
- jQuery 3.7.1+
- GSAP 3.13.0+
- SplitText plugin
## Troubleshooting
**Menu doesn't animate:**
- Check browser console for GSAP/jQuery errors
- Ensure scripts load in correct order
- Verify IDs match: `#menuToggle`, `#fullWidthMenu`
**Theme toggle doesn't work:**
- Ensure toggle button IDs are correct
- Check that overlay menu buttons reference both `#study-theme-toggle` and `#study-theme-toggle-guest`
**Overlay menu doesn't close:**
- Verify hamburger SVG has correct line elements
- Check that `body.overlay-active` class is being toggled
## Performance
The menu is highly optimized:
- CSS transforms for smooth 60fps animations
- Will-change hints for GPU acceleration
- Debounced resize handlers
- Minimal DOM manipulations
## Future Enhancements
Consider adding:
- Sound effects on menu open/close
- Additional hover effects on menu items
- Animated icons next to menu links
- Page transition animations