Sticky Title Bar Simplification

Problem

The featured title bar system was over-engineered with:

  • Complex GSAP ScrollTrigger animations
  • Multiple cleanup/reinit cycles causing conflicts
  • ~644 lines of JavaScript
  • Race conditions between Swup transitions and ScrollTrigger
  • Orphaned ScrollTrigger instances
  • Complex padding animations
  • Nav margin-top animations
  • Lots of edge cases and timing issues

Solution

Simplified everything down to basics:

Before: 644 lines of complex logic After: 111 lines of simple code

Removed:

  • All ScrollTrigger code
  • Complex cleanup logic
  • Padding animation timelines
  • Nav synchronization
  • Image loading watchers
  • Multiple initialization states
  • Orphan detection
  • Fallback scroll handlers

Kept:

  • Simple view control switching (carousel/grid)
  • LocalStorage preference saving
  • Basic Lucide icon initialization

Replaced ScrollTrigger pinning with:

position: sticky;
top: 0;

That's it! The browser handles all the sticky behavior natively.

Benefits

  1. No More Breaking - CSS sticky is rock solid
  2. No JavaScript Overhead - Browser handles positioning
  3. No ScrollTrigger Conflicts - No ScrollTrigger instances to manage
  4. No Cleanup Needed - CSS just works
  5. Better Performance - Native CSS is faster than JS animations
  6. Swup Compatible - No state to corrupt during page transitions
  7. 80% Less Code - From 644 to 111 lines

What Still Works

  • ✅ Title bar sticks to top when scrolling
  • ✅ View switching (carousel ↔ grid)
  • ✅ LocalStorage preferences
  • ✅ Lucide icons
  • ✅ Dark mode
  • ✅ Mobile responsive
  • ✅ Swup page transitions

What Changed

  • ❌ No animated padding expansion (was causing issues anyway)
  • ❌ No nav margin-top animation (unnecessary)
  • ❌ No GSAP dependencies for sticky behavior

Result

A reliable, simple sticky title bar that just works™ and won't break during Swup transitions or cause ScrollTrigger conflicts.