Rigips Saint Gobain – Interaktive B2B Landing Page
Interactive B2B landing page with 2D globe animations for a recyclable building board product.
The Challenge
Rigips Saint Gobain needed an impressive landing page to promote their recyclable building boards. The requirements were technically demanding:
Multi-Language Support – 3 languages required (DE, FR, IT)
Separate Mobile Experience – Desktop format not transferable, requiring 6 total page versions
2D Globe Animation – Interactive rotating earth as the central visual element using GSAP
Scroll-Synchronized Content – Content must appear at precise moments during globe rotation
Cross-Browser Compatibility – Consistent experience across all browsers and screen sizes
The Solution
Hero Section with Rotating Globe
Created an eye-catching header experience:
Auto-Rotating Earth – Smooth, continuous globe rotation
Counter-Rotating Clouds – Cloud layer spinning in opposite direction
Symmetrical Alignment – Precise visual balance between elements
Scroll-Driven Globe Animation
The centerpiece: a second globe anchored to the bottom of the viewport:
Partial Visibility – Only 20-30% of globe visible, showing just the surface
Scroll-Synchronized Rotation – Globe rotates as user scrolls through content
Content Timing – Text and sections appear at exact moments matching globe position
Contextual Visuals – When a house appears on the globe, related content fades in simultaneously
Dynamic Responsive System
The biggest technical challenge – making it work everywhere:
Dynamic Viewport Detection – Globe queries screen dimensions in real-time
Adaptive Scaling – Size and position adjust based on browser and resolution
Cross-Browser Testing – Extensive testing across Chrome, Firefox, Safari, Edge
Appearance Triggers – Globe appears, rotates, and disappears at precise scroll positions
Dedicated Mobile Version
Desktop experience couldn't translate to mobile, so I built a separate solution:
Reimagined Layout – Content restructured for vertical scrolling
Optimized Performance – Lighter animations for mobile devices
Touch-Friendly – Smooth interaction on all touch devices
Key Features
🌍 Animated Globe Header
The hero section features a beautifully illustrated 2D earth graphic with a separate cloud layer, both animated using GSAP. The earth rotates continuously while the clouds spin in the opposite direction, creating a mesmerizing parallax effect. This layered animation approach required careful timing and easing curves to achieve a natural, organic movement that draws visitors in without being distracting. The symmetrical alignment between earth and clouds was crucial – every rotation had to feel balanced and harmonious to convey the sustainability message effectively.
🔄 Scroll-Synchronized Animation
As users scroll through the page, a second globe appears anchored to the bottom of the viewport, showing only 20-30% of its surface. Using GSAP's ScrollTrigger plugin, I synchronized the globe's rotation with the user's scroll position, creating an interactive storytelling experience. The technical challenge was ensuring buttery-smooth 60fps performance while calculating rotation angles based on scroll percentage. Every scroll pixel had to translate into precise rotation degrees, and the animation needed to work backwards when users scrolled up – maintaining perfect synchronization in both directions.
📱 6 Page Versions
The project required 3 language versions (German, French, Italian) each with completely dedicated desktop and mobile layouts – totaling 6 unique pages. The complex scroll-driven globe animation simply couldn't be adapted responsively; the viewport calculations and timing would break on smaller screens. Instead, I architected a separate mobile experience from scratch, reimagining how the content and visual storytelling would work in a vertical, touch-first environment. This doubled the development effort but ensured every user received an optimized experience regardless of their device.
⏱️ Timed Content Reveals
Content sections fade in at exact moments matching the globe's rotation using carefully orchestrated GSAP timelines. When a house icon rotates into view on the globe surface, the corresponding text about building materials and sustainability appears simultaneously through a coordinated fade-and-slide animation. Getting this timing right required extensive testing and fine-tuning – the content had to feel like it was naturally connected to the visual without any perceptible delay or jumpiness. I built a custom timing system that calculated trigger points based on rotation angles rather than scroll positions, ensuring consistency across different scroll speeds.
📐 Dynamic Viewport Scaling
The globe dynamically queries screen dimensions in real-time and adjusts its size, position, and animation parameters accordingly. This was the most technically challenging aspect of the project – every browser handles viewport calculations slightly differently, and screen resolutions vary wildly from 1366px laptops to 4K monitors. I built a responsive calculation system that determines the optimal globe size based on viewport height and width, then adjusts the scroll-trigger points and rotation speeds to match. The globe also needed to appear at the right moment, animate through its sequence, and disappear cleanly – all while maintaining synchronization with the content reveals regardless of screen size.
♻️ Product-Focused Storytelling
The entire visual concept centers around promoting Rigips' recyclable building boards, with the globe serving as a powerful metaphor for environmental responsibility. Rather than simply listing product features, the scroll-driven animation takes users on a journey – starting with the global perspective and gradually revealing specific benefits as the earth rotates. Each section builds on the previous one, creating a narrative arc that culminates in a clear call-to-action. The animation isn't just decorative; it reinforces the core message that these building materials contribute to a healthier planet.
Technical Highlights
GSAP Animation Library – Leveraged GreenSock's powerful animation platform for smooth, performant 2D animations with precise timeline control
ScrollTrigger Integration – Used GSAP's ScrollTrigger plugin to synchronize globe rotation and content reveals with scroll position
Scroll Event Optimization – Implemented requestAnimationFrame and throttling techniques to maintain smooth 60fps animation during scroll
Viewport Calculations – Built custom JavaScript functions that query screen dimensions in real-time and recalculate animation parameters on resize
CSS Transform Precision – Used hardware-accelerated transforms (translate, rotate, scale) for pixel-perfect positioning across all browsers
Timeline Orchestration – Created complex GSAP timelines that coordinate multiple animations with precise timing and easing curves
Performance Optimization – Optimized image assets, implemented lazy loading, and minimized DOM manipulation for fast loading and smooth interaction
Multi-Language Architecture – Structured codebase with clean separation of content and functionality, allowing easy localization without duplicating animation logic
Cross-Browser Testing – Extensive testing and debugging across Chrome, Firefox, Safari, and Edge to ensure consistent behavior
The Impact
Delivered a premium B2B experience that:
Captures attention with unique scroll-driven visual storytelling
Communicates sustainability through globe-centric design
Works flawlessly across all devices, browsers, and screen sizes
Supports 3 markets with localized content
Differentiates the brand from standard corporate landing pages