Skip to content

Through the Frames case study

Photography portfolio with orchestrated GSAP animations, an infinite draggable slider, dynamic database-driven gallery layouts, and Cloudflare Images edge delivery.

Full stack developer — Personal. Stack: Next.js, React, TypeScript, GSAP, Tailwind CSS, Cloudflare Images, Neon Postgres, Drizzle ORM. Tasks: Design, Branding, Backend development, Frontend development. ## Overview A personal photography website built to display my collections with rich, orchestrated animations. The goal was to create something visually complex where every transition, scroll interaction, and hover state feels intentional and coordinated. I chose a stack that could keep up with what I had in mind. ## Stack Next.js 15 (App Router) with React 19 and TypeScript. Tailwind CSS v4 for styling. GSAP 3 with the `SplitText` plugin drives nearly every animation on the site. Neon serverless PostgreSQL with Drizzle ORM manages collections and images. All photos are served through Cloudflare Images with three delivery variants (`ttfcover`, `ttfgallery`, `fullres`), serving the right resolution per context while keeping bandwidth low. ## Loading Sequence The entry experience is a fully orchestrated GSAP timeline: a photograph slides up from below while progressively sharpening (animating `filter: blur` from 10px to 0), a progress counter counts to 100%, and an SVG border traces itself around the image via `strokeDashoffset` math on the rectangle's perimeter. Everything runs as a single `gsap.timeline()` with precise overlap offsets (`"-=0.3"`, `"<"`) so nothing feels disconnected. ## Infinite Slider The main page is a full-height, horizontally draggable slider showing all collections. The collection array is duplicated five times and starts in the middle copy. A `requestAnimationFrame` loop applies linear interpolation (`diff * 0.1`) between the current position and the target, producing natural ease-out on every input without fixed animation durations. Boundary crossings trigger a silent teleport back one section width for seamless infinite wrapping. Drag, trackpad, and touch input are handled separately. A `dragDistanceRef` tracks pointer movement, and any click is suppressed if total distance exceeded 5px, preventing phantom clicks after drags. Hovering a slide dims all others via GSAP opacity transitions using a shared `CollectionHoverContext` so hover state is accessible across the slider and overview panel simultaneously. ## Gallery System Each collection renders photos across up to seven distinct section layouts: single hero, two-image split, five-image composition, and more. A `sections` JSON array stored per collection in the database (e.g. `[1, 3, 2, 5]`) controls layout order. Images distribute sequentially across sections with entrance animations staggered by a global 100ms delay per image. The collection overview panel animates from 0 height to fill remaining viewport space, calculated dynamically via `ResizeObserver`. Scrolling down progressively shrinks the header to reclaim space. Scrolling back up respects a 60px deadzone from the last downward scroll peak before restoring it, preventing flicker on slow scrolls. ## Key Decisions - **GSAP over CSS transitions.** Frame-perfect animations that operate outside React's render cycle, with careful cleanup (`tl.kill()`, `cancelAnimationFrame`) to prevent memory leaks. - **Cloudflare Images variants.** Resolution-appropriate images served without maintaining multiple files. Format negotiation (WebP/AVIF) and edge caching handled automatically with a one-year `minimumCacheTTL`. - **Layered context providers.** `CollectionsContext` and `CollectionHoverContext` keep the slider, overview panel, and collection pages in sync without prop-drilling. - **Session storage and custom events.** `ttf:navigate-home` browser events and session flags skip entrance animations on back-navigation to avoid replaying effects the user already saw.
Works

Works

Explore selected projects with timelines, stack choices, and delivery outcomes. This view includes company and freelance examples in a horizontal timeline display.

Project List

Timeline (From 2024)

Projects
202420252026

  1. Triqai

    Today

  2. Rediant

  3. Through the Frames

  4. Hytura

  5. Knitted

  6. Bysidde

Loading workspace

Taxi the dog desktop wallpaper icon