Dennis Snellenberg Animated Portfolio Site

Overview

This site is an industry-leading example of a high-motion, minimalist portfolio that balances aggressive white space with sophisticated animations. It serves as a premier reference for builders looking to implement complex GSAP-based scroll storytelling, magnetic interactions, and seamless page transitions.

Design System

• Color Palette & Visual Hierarchy: The design uses a high-contrast monochromatic scheme, primarily deep blacks (#000) and off-whites. Hierarchy is established through extreme scale—pairing massive, thin-weight headlines with small, utilitarian sans-serif meta-text.
• Typography: The system relies on a clean, modern sans-serif. It utilizes a "fluid" typography approach where large headlines expand to fill the container width, while supporting text is kept highly legible with ample line-height.
• Page Structure: The flow begins with a multi-language preloader (loading-screen), followed by a high-impact intro section, a list-based work grid with hover-triggered overlays, and horizontal scrolling image galleries (horizontal-items).
• Reusable Components:
  • Magnetic Buttons: Elements wrapped in .btn-click.magnetic that track the cursor position with physics-based easing.
  • Interactive Work Items: List elements (.work-items li) that utilize a "mouse-pos" logic to move images or buttons following the user's cursor.
  • Hamburger Navigation: A fixed-position, circular menu button that expands into a full-screen overlay with curved edge transitions (rounded-div).
• Interaction & Motion: The site is built for "feel." Key patterns include staggered text reveals (span-line-inner), parallax scroll speeds via data-scroll-speed, and magnetic attraction on interactive targets.
• Implementation Clues: The HTML reveals the use of GSAP (GreenSock) for layout animations, Barba.js for AJAX page transitions (evident in data-barba="container"), and Locomotive Scroll for smooth, momentum-based scrolling (noted by data-scroll-container).

Use Cases

• Who should clone this: Independent creatives, design agencies, and high-end architects who want to prioritize brand "vibe" and motion over density of information.
• Product Remixes: This pattern works effectively for luxury product landing pages or fashion lookbooks where the visual transition between items is as important as the items themselves.
• Remix Directions:
  • Style Swap: Keep the interaction logic but replace the monochromatic theme with vibrant gradients or a brutalist color palette.
  • IA Adaptation: Use the magnetic list component to display service offerings or team members instead of portfolio projects.
• Clone Scope: For a quick win, clone the .btn-click.magnetic buttons and the .span-lines text reveal animation for an existing landing page. For a comprehensive overhaul, the full Barba.js transition wrapper and Locomotive Scroll setup are the target components.