OPEN FOR NEW OPPORTUNITIESAVAILABLE FOR FREELANCEFRONTEND DEVELOPERREACT & NEXT.JS SPECIALISTOPEN FOR NEW OPPORTUNITIESAVAILABLE FOR FREELANCEFRONTEND DEVELOPERREACT & NEXT.JS SPECIALIST• 
OPEN FOR NEW OPPORTUNITIESAVAILABLE FOR FREELANCEFRONTEND DEVELOPERREACT & NEXT.JS SPECIALISTOPEN FOR NEW OPPORTUNITIESAVAILABLE FOR FREELANCEFRONTEND DEVELOPERREACT & NEXT.JS SPECIALIST• 
Case Study • 04 / EXOUZIA INTERNSHIP - ASSET HOMES
Back to All Work

Asset Homes Property Management

A luxury real estate and property management web platform developed for Asset Homes LLC in Abu Dhabi & Al Ain — featuring GSAP scroll-triggered clip-path animations, Lenis inertia scrolling, interactive asset showcases, and responsive hero carousels.

Next.jsReactTypeScriptTailwind CSSGSAPLenisFramer Motion
Key Metric Achieved
15+ Years

Of real estate management legacy digitized with GSAP scroll triggers & inertia scroll engine.

RoleFrontend Developer Intern @ Exouzia
Timeline2024
Client / CompanyAsset Homes LLC, Abu Dhabi
DeliverablesWeb Application, Interactive Asset Showcase, Operational Roadmap
Asset Homes Property Management
01 • The Challenge

Digitizing a premier real estate legacy with luxury aesthetics & zero scroll-jank.

Developing a mobile-first digital platform for Asset Homes Property Management LLC required presenting 15+ years of property management experience in Abu Dhabi and Al Ain. The main challenge was synchronizing smooth inertia scroll physics with high-performance GSAP ScrollTrigger animations without layout shifts or frame stuttering on low-power devices.

02 • The Solution

Next.js 16 App Router, React 19, GSAP ScrollTrigger & Lenis Inertia Engine.

Architected a Next.js web application utilizing React 19 client components, binding Lenis smooth scroll updates directly into GSAP's Ticker RAF loop to eliminate scroll desync. Built custom clip-path image reveal transitions, interactive property showcase cards, and a 3-second progress timer hero carousel using Framer Motion.

03 • Implementation & Architecture

Interactive Implementation

LenisProvider.tsx
useEffect(() => {
  gsap.registerPlugin(ScrollTrigger);

  // Sync Lenis scroll updates with GSAP Ticker to prevent desync & frame jitter
  function update(time: number) {
    lenisRef.current?.lenis?.raf(time * 1000);
  }

  gsap.ticker.add(update);
  gsap.ticker.lagSmoothing(0);
  ScrollTrigger.refresh();

  return () => {
    gsap.ticker.remove(update);
  };
}, []);
04 • Key Features

Core Highlights

Sync-Driven Hero Carousel

Auto-advancing 3-second progress bar slider with Framer Motion crossfade transitions and pause-on-hover capability.

GSAP & Lenis Scroll Sync

Inertia-based smooth scrolling integrated with GSAP Ticker for scroll-triggered clip-path reveals and parallax scaling.

Interactive Asset Showcase

Filterable property matrix showcasing luxury residential, commercial, and infrastructure management projects.

Operational Workflow Roadmap

Step-by-step interactive methodology detailing property onboarding, tenant services, and maintenance operations.