Warehouse District: scrolling both ways without breaking IE11
Dual-axis scroll, section-aware nav color, SVG map tooltips, and IE11 — how Warehouse District stayed interactive without breaking the brief.
Warehouse District needed a site that scrolled both ways — trackpad up/down and left/right — without feeling like a gimmick. Design also called for a nav that flipped light/dark as it crossed section backgrounds, scroll-triggered line animation, SVG map tooltips that open an accordion and jump the user to the matching block, and IE11 support.
What I built
Custom vanilla JS owns the horizontal scroll transitions. jQuery OOP handles logo color based on the active section so the swap stays in sync with scroll position. On smaller viewports the layout drops back to a normal vertical page instead of forcing the dual-axis pattern. Map hotspots use a custom SVG tooltip; clicking a region opens the accordion and scrolls to that section.
Constraint that mattered
IE11 forced careful DOM/CSS choices over flashier scroll libraries. The “wow” had to survive the browser matrix Kinectiv still had to support — not just Chrome on a MacBook.
Stack: WordPress, PHP, ACF, Gravity Forms, custom JS. Live: warehousedistrict.com