BensamStores

The challenge

The client wanted the homepage to feel more like a fashion campaign than a conventional fabric catalogue. The visual reference used full-screen scroll sections, where each scene holds the viewport before transitioning into the next. The challenge was to translate that direction into an experience with controlled pacing, natural scroll behaviour, and seamless handoffs between panels.

The approach

I built the desktop sequence with GSAP and ScrollTrigger, pinning each full-screen panel and using layered transitions to introduce the next section. On smaller screens, I removed the pinned-scroll interaction entirely and returned to standard document flow. This preserved the content and visual hierarchy without forcing a desktop interaction pattern onto touch devices.

Implementation challenge

The main implementation issue was interaction handling across layered pinned panels. A panel could be visually covered while remaining present in the DOM, causing it to intercept clicks intended for the section above it. I resolved this by disabling pointer events once a panel was fully covered. I also needed to crop a video with black pillarbox bars baked into the source file, which required frame-by-frame adjustments in FFmpeg rather than a CSS-only fix.

What I’d improve

I would build and test the mobile fallback alongside the desktop scroll sequence rather than treating it as a later adaptation. Establishing the non-pinned mobile experience early would make the responsive behaviour part of the design system from the beginning.

Built with

• Vite
• Tailwind CSS v4
• GSAP
• ScrollTrigger
• FFmpeg