The challenge
Evolo NEX, pioneering condominium development, had a compelling vision for luxury and sustainable living, backed by a meticulously crafted design from their own team. However, translating this high-end design into a fully functional website presented its own set of challenges, especially considering the varying capabilities of different devices. Our primary task at Timis Digital was to convert this top-notch design into a dynamic, user-friendly website that would be accessible and fully functional across a range of devices.
An additional layer of complexity was introduced by a specific design feature: an interactive apartment selector. This tool needed to allow potential residents to filter and search for apartments based on various criteria, all without requiring a page refresh. Moreover, the design included subtle scroll animations, such as fade-ins and growing lines, that had to be implemented without compromising the website’s performance or user experience.
The challenge was not just to implement the client-provided design, but to do so in a way that made the apartment selector both interactive and fast, and to integrate the scroll animations seamlessly. All of this had to be done while faithfully representing Evolo NEX’s unique blend of urban and natural elements.
The solution
To address the multifaceted challenge of bringing Evolo NEX’s vision to life, we at Timis Digital employed a holistic approach that combined cutting-edge technologies with innovative web development strategies.
WordPress and Custom Gutenberg Blocks
Our foundational choice was to build the website on WordPress, a robust and flexible platform that could meet the diverse needs of the project. We utilized custom Gutenberg blocks, a modern feature of WordPress, to enable effortless content management. These custom blocks were tailored to accommodate every unique aspect of the site, from the presentation of amenities to the showcase of sustainability features. This approach not only made the website easily maintainable but also ensured that it could be updated dynamically to reflect Evolo NEX’s evolving offerings.
Interactive Apartment Selector
For the apartment selector, a key feature of the website, we leveraged the power of WordPress’s backend capabilities. On the frontend, we utilized Alpine.js to create a seamless, interactive experience. This allowed users to filter and search for apartments based on various criteria without requiring a page refresh, making the process both intuitive and efficient..
Scroll Animations with GSAP
To capture the subtle nuances of the original design, we implemented scroll animations using the GreenSock Animation Platform (GSAP). Custom logic was developed to trigger these animations upon scrolling, adding a layer of interactivity and visual appeal without compromising performance. This use of GSAP allowed us to faithfully reproduce the fade-ins and growing lines that were integral to the client’s design vision, enhancing the user experience and engagement.
By integrating these advanced technologies—WordPress with custom Gutenberg blocks, GSAP for scroll animations, and Alpine.js for frontend interactivity—we were able to create a visually stunning, user-friendly, and SEO-optimized website. This comprehensive solution effectively showcases Evolo NEX’s unique blend of luxury, functionality, and sustainability, setting a new benchmark in the real estate development sector.