Moments - Animated website

Overview

Moments was a fast-growing social network focused on sharing memories with family and friends. It was my first professional role, and I joined as the only frontend developer. Despite being new to the industry, I was trusted to build a high-impact, scroll-animated marketing website. As the product gained traction, it eventually became the most downloaded app in Spain for several days and attracted hundreds of thousands of users. The website needed to evolve alongside that momentum, delivering a smooth, emotionally resonant experience that matched the quality of the app.

The Problem

Before I joined, the company had hired a Toptal engineer to build the site, but the result fell short—animations were laggy, inconsistent across devices, and the code was difficult to work with. The issue wasn't just performance—it was the complete lack of structure for handling scroll-based interactions.

What I Built

I decided to rebuild everything from scratch, using GSAP as the animation engine due to its performance and flexibility. But I didn't just plug in animations where needed—I created a full abstraction layer on top of GSAP to organize animations in a clean and reusable way.

The core of my approach was to break down the scroll journey into distinct phases, each representing a specific section of the site. For each phase, I could define exactly which components should animate in, how they should behave, and when they should exit. Rather than triggering animations with hardcoded scroll positions, I built a system that mapped scroll progress to phases and handled transitions automatically. Internally, components would register themselves to specific phases and define entry/exit animations declaratively.

This system turned the animation logic into a predictable, centralized layer—no scattered scroll handlers, no magic numbers, no duplication. If I wanted to change the timing or effect of an animation, I only needed to update a single definition. The result was not only easier to maintain, but also allowed me to rapidly prototype and iterate on animations without breaking anything else.

Results

The final website delivered smooth, scroll-driven animations across all devices, completely resolving the performance issues of the previous version. The custom abstraction layer made the codebase significantly easier to maintain, allowing new animations to be added or modified with minimal effort. As the product grew rapidly, the site scaled with it—helping reinforce the brand's visual identity and leaving a strong impression on users.

Takeaway

This project taught me that building great user experiences requires more than just visual polish—it demands thoughtful architecture. By creating a structured system for scroll-based animations, I was able to turn a messy, unscalable codebase into something maintainable, efficient, and easy to build on. It showed me the value of solving problems at the system level, even in areas often seen as purely visual, and shaped how I approach frontend development to this day.