BATTLEFIELD 6 GSAP
A Battlefield 6–themed landing page featuring an animated navigation menu and cinematic transitions using GSAP and TypeScript. The project prioritizes clean code, modular architecture, accessibility, semantic HTML, and loading performance with a modern preloader.
/// Research and testing guide whether an overlay menu is appropriate, its open/close choreography, background zoom intensity, and per‑character text readability. Evidence validates a hero with an animated title, clear CTA prominence, and background video controls users actually use. Insights shape the preloader—progress pacing, phase messaging, and microinteractions—to reduce perceived wait. Findings also inform color, type scale, and contrast for accessibility, and a modular class design (SOLID, Clean Code) for consistent behavior
/// Usability and Accessibility: Built with GSAP 3 timeline-based animations (to, fromTo, timeline), TypeScript 5.9 in strict mode for reliable UI controllers and preloader contracts, and Vite 7 for fast development and optimized builds. Semantic HTML5 with ARIA (roles, aria-label, aria-controls), accessible headings, proper alt text, and a responsive CSS layout (reset + custom styles with Google Fonts) ensure intuitive navigation, clear hierarchy, and logically organized content.
/// On dynamic pages, selectors can return zero elements, breaking animations and causing runtime errors.
play() may reject its Promise in browsers that restrict autoplay, leading to unhandled errors and broken video UX.
/// Informing decision-making: Add explicit validation in NavigationMenuApp.validateElements(), emit clear logs, and early-return when required nodes are missing. This hardens the UI, prevents cascading failures, and improves user experience and reliability.
Mark the video as muted and playsinline, and wrap play/pause calls in try/catch with state and ARIA updates in VideoController. This makes playback predictable across devices, enhances accessibility, and delivers a smoother experience that reduces bounce.
