feat(phase3): implement scroll animations with Intersection Observer
SUMMARY:
Implemented Phase 3 Task 3.1: Scroll Animations system using Intersection
Observer API for smooth, performant scroll-triggered animations on homepage.
CHANGES:
1. Created scroll-animations.js (new):
- Intersection Observer-based animation system
- Supports 7 animation types (fade-in, slide-up/down/left/right, scale-in, rotate-in)
- Staggered delays via data-stagger attribute
- Respects prefers-reduced-motion
- Auto-initializes, can be disabled globally
- Custom 'scroll-animated' event for other components
2. Enhanced tractatus-theme.css:
- Added 100+ lines of scroll animation CSS
- Smooth transitions using CSS transforms (GPU-accelerated)
- Data-attribute based animation selection
- Default animation (slide-up) if none specified
- Accessibility: respects prefers-reduced-motion
3. Updated index.html (homepage):
- Added scroll-animations.js script
- Value proposition: slide-up animation
- Three audience cards: scale-in with 100/200/300ms stagger
- Capabilities heading: fade-in
- Six capability cards: slide-up with 100-600ms stagger
- All animations trigger on scroll (not page load)
ANIMATION TYPES:
- fade-in: Opacity 0 → 1
- slide-up: Translates from bottom (+2rem) → 0
- slide-down: Translates from top (-2rem) → 0
- slide-left: Translates from right (+2rem) → 0
- slide-right: Translates from left (-2rem) → 0
- scale-in: Scales from 0.95 → 1 with opacity
- rotate-in: Rotates from 12deg → 0 with scale
USAGE EXAMPLE:
<div class="animate-on-scroll" data-animation="slide-up" data-stagger="200">
Content here
</div>
ACCESSIBILITY:
✓ Respects prefers-reduced-motion (disables all animations)
✓ GPU-accelerated transforms (60fps on modern devices)
✓ Progressive enhancement (graceful degradation)
✓ Zero CSP violations maintained
PERFORMANCE:
- Intersection Observer (better than scroll listeners)
- Unobserves elements after animation (memory efficient)
- Supports data-animate-repeat for repeatable animations
- CSS transitions (GPU-accelerated)
UI_TRANSFORMATION_PROJECT_PLAN.md:
✓ Phase 3 Task 3.1.1: Implemented Intersection Observer
✓ Phase 3 Task 3.1.2: Added scroll animations to homepage
NEXT STEPS:
- Phase 3 Task 3.1.3: Apply to all pages site-wide
- Phase 3 Task 3.2: Interactive architecture diagram
🤖 Generated with Claude Code (https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
fa01644c17