The project for Horeca Social, a specialized social media agency, represents a significant case study in the evolution of modern web development, specifically within the "no-code" and "low-code" ecosystems. What began as a conceptual landing page designed to showcase the agency’s "Let’s Go Viral" ethos eventually transformed into a complex, high-performance digital experience. The development of the site pushed the boundaries of Webflow, a popular web design tool, by integrating approximately 2,000 lines of custom JavaScript and the GreenSock Animation Platform (GSAP). This technical synthesis was required to achieve a level of motion design typically reserved for bespoke, hand-coded frameworks, all while maintaining the editing flexibility required for a fast-paced social media agency.
The Architectural Foundation: From Concept to Complexity
Horeca Social’s digital presence was built on a requirement for high-fidelity motion. The design specifications included text that scales to fill the entire viewport while remaining pivoted on a single character, accordion headers that stack at the bottom of the screen rather than the top, and a three-dimensional feed where content cards emerge from deep z-depth toward the user. In the early stages of development, it became clear that standard Webflow interactions—while powerful for basic transitions—would be insufficient for the mathematical precision required for these specific effects.
To manage this complexity, the development team utilized a sophisticated tech stack. Webflow served as the Content Management System (CMS) and visual builder. To ensure responsiveness across varying screen sizes, the team implemented the Lumos class system, which utilizes fluid units to maintain design integrity. However, the core of the experience relied on GSAP for timeline-based animations and Lenis for smooth scrolling. This combination allowed for granular control over every frame of the user experience, but it also introduced significant performance hurdles that required unconventional solutions.
The Chronology of Development and Performance Optimization
The development timeline of Horeca was marked by a series of technical "breaking points." The initial build prioritized visual fidelity, which led to a "code-heavy" environment that initially struggled on mobile devices and within specific browser environments. The project moved through three distinct phases: the design-led implementation, the performance crisis, and the optimization phase.
During the design-led implementation, the team focused on creating the "Stack of Cards" and "Scaling Text" sections. These features utilized GSAP’s ScrollTrigger to link animation progress directly to the user’s scroll position. While visually impressive on high-end desktop machines, the initial implementation caused significant layout reflows. The scaling of massive text elements, for instance, threatened to distort the document height, leading to "jittery" scrolling and desynchronization of animation triggers.
The performance crisis emerged during mobile testing. Two primary issues were identified: the inconsistent behavior of smooth scrolling libraries on mobile operating systems and the "viewport resizing" issue on iOS. On Apple devices, the expansion and contraction of the browser’s address bar during scrolling causes the viewport height (vh) to change constantly. This forced ScrollTrigger to recalculate all animation start and end points multiple times per second, resulting in a broken user experience.
Technical Solutions: Stabilizing the Mobile Experience
To resolve the mobile performance issues, the development team adopted a "native-first" approach for handheld devices. The first major decision was to disable the Lenis smooth scrolling library on mobile entirely. While smooth scrolling enhances the desktop experience, mobile browsers have native momentum scrolling that is highly optimized by the hardware. By using a standard user-agent detection script, the team ensured that mobile users bypassed the overhead of the custom scroll library, immediately stabilizing the interface.
To combat the iOS address bar jitter, the team implemented a "custom scroller" architecture. Instead of allowing the browser’s body to handle the scroll, they fixed the body’s height to 100% and applied overflow: hidden. A dedicated div, titled .page_wrap, was then designated as the primary scroll container. By isolating the scroll region from the main viewport, the team effectively "tricked" the browser into maintaining a stable viewport height, preventing the address bar from triggering constant layout recalculations. This ensured that carefully timed GSAP timelines remained frame-accurate on iPhones and iPads.
Mathematical Precision in Motion: Scaling and Stacking
One of the most technically demanding features of the Horeca site is the scaling text section. The design required a specific word to expand until it dominated the screen, with the expansion centered on a specific character (the pivot). A naive approach using standard CSS scaling would cause the entire page to reflow, killing performance.
The solution involved a combination of CSS sticky positioning and precise JavaScript math. The team pre-measured the offset of the pivot character relative to the center of the viewport. Using GSAP, they applied a transform that not only scaled the text but simultaneously translated it along the X and Y axes to keep the pivot point perfectly centered. By using transform rather than changing font sizes or widths, the browser’s GPU handled the workload, avoiding the "stratospheric" document height issues that would occur if the element were allowed to affect the surrounding layout.
Similarly, the "Stack of Cards" section was optimized by moving away from GSAP-driven pinning. Early iterations used GSAP to "pin" cards at the top of the screen as the user scrolled. However, every pin in GSAP creates a "pin-spacer" element in the DOM, which can complicate layout math. The team replaced this with CSS position: sticky. This shift allowed the browser’s native layout engine to handle the positioning, while GSAP was reserved strictly for the aesthetic transforms—rotation, scaling, and fading. This "CSS-first" approach resulted in a dramatic increase in frame rates, particularly on mid-range devices.
The Bottom-Sticky Accordion: A Logic Reversal
A unique UI element in the Horeca project is the bottom-stacking accordion. Unlike standard accordions where headers stick to the top of the viewport, Horeca’s headers snap to the bottom, stacking upward as the user scrolls down. Since CSS position: sticky; bottom: 0 does not naturally support stacking multiple items from the bottom up within a scrolling parent, a custom logic layer was required.
The developers used JavaScript to write four specific CSS variables to the root of the document: the total number of items, the section height, the individual header height, and the item’s position index. Once these variables were injected, the actual layout was handled by CSS calculations (calc). On desktop, the headers were switched to position: absolute after the initial render, allowing the CSS variables to dictate their layered positions. This minimized the JavaScript execution time to a single "class toggle" when the section entered the viewport, embodying the philosophy that the best JavaScript is the code that allows CSS to do the heavy lifting.
Navigating "In-App Browser Hell"
A critical but often overlooked aspect of modern web development is the "in-app browser" environment. When users access a site via links on platforms like Instagram, LinkedIn, or Facebook, they are not using a full-featured browser like Safari or Chrome. Instead, they are using a "WebView" that often lacks support for the latest CSS specifications.
The Horeca project encountered significant issues with properties such as aspect-ratio, clip-path, and backdrop-filter failing in these environments. The team had to implement a comprehensive fallback layer, using feature detection to provide simplified styles for these limited browsers. The lesson learned was that for high-traffic social media agencies, the "in-app" experience is often the primary point of entry, and building fallback architectures should be a day-one priority rather than a post-launch fix.
Broader Implications for the Webflow Ecosystem
The Horeca Social case study highlights a shift in the professional use of Webflow. While the platform is marketed as a visual tool, the Horeca project demonstrates that for high-end agency work, Webflow acts more as a sophisticated hosting and CMS foundation for "pro-code" development.
Since the completion of this project, Webflow has introduced visual GSAP timelines, which would now allow for approximately 75% of Horeca’s animations to be built without custom code. However, the most complex elements—the pivot-locked scaling and the 3D depth feed—still require the precision of manual JavaScript. This points to a future where "hybrid" development is the standard: using visual tools for the majority of the build and layering custom, high-performance code only where the visual tools reach their limit.
The ultimate takeaway from the Horeca build is that performance in the age of heavy motion design is not about adding more optimization scripts, but about "doing less." By replacing JavaScript-heavy pinning with CSS sticky, caching DOM references to avoid repeated queries, and knowing when to disable features on mobile, the developers achieved a site that feels "viral" and cutting-edge without sacrificing the accessibility and speed that users expect from a modern web experience.
