Introduction
TreeRing needed a modern, marketing-friendly website that could keep pace with their brand evolution, without the technical barriers of their legacy Gatsby platform.
I partnered with The Working Assembly, a branding and design agency, to bring their refreshed vision to life. While The Working Assembly handled the branding and design, I led the entire development effort, building a custom Webflow site from the ground up.
The project involved migrating from a custom-coded Gatsby site to Webflow, ensuring the marketing team could easily update content without developer intervention. To achieve this, I maximized CMS usage throughout the site, creating reusable templates and components that empower non-technical team members.
What sets this project apart is the extensive custom development required. The design featured sophisticated scroll-driven animations, complex responsive behaviors, and dynamic content interactions that pushed Webflow's native capabilities. I built custom solutions using GSAP and Swiper.js to achieve animations like synchronized text fades with image transitions, dynamic navbar color changes based on section backgrounds, and responsive carousels that adapt to viewport size.
One of the most technically challenging aspects was the custom form integrations. I built multiple lead generation forms that communicate directly with TreeRing's API to push data into Salesforce, complete with UTM parameter tracking throughout the site for marketing attribution. Additional custom features include a Yearbook Theme Browser that fetches themes from TreeRing's API with filtering and modal preview functionality.
The desktop-to-mobile transition posed unique challenges, many sections required completely rebuilt components for mobile viewports, while maintaining a single CMS entry point for content updates.
Project Goals & Challenges
Goal
Create a modern, CMS-driven platform that empowers TreeRing's marketing team to easily update content through Webflow.
Challenges
The design pushed Webflow's native capabilities to the limits, requiring extensive custom code for scroll-driven animations, dynamic navbar behaviors, and complex responsive layouts. Custom API integrations for forms and the yearbook theme browser added technical complexity, while significant desktop-to-mobile design differences required rebuilding components to work across all breakpoints.
Key Deliverables & Results
The project faithfully brought The Working Assembly's design vision to life.
The project faithfully brought The Working Assembly's design vision to life while solving TreeRing's core challenge: giving their marketing team full control over website content.
To accomplish that vision, I built numerous custom-coded features using GSAP, Swiper.js, and vanilla JavaScript—from scroll-triggered content reveals to API-powered interactive elements.
Results
- Gatsby to Webflow migration for improved marketing team autonomy
- CMS-driven sections throughout for easy content updates
- Custom form integrations pushing to Salesforce via TreeRing's API
- UTM parameter tracking preserved across all redirects and forms
- Scroll-driven animations including synchronized text/image transitions
- Dynamic navbar that changes color based on underlying section content
- Yearbook Theme Browser with API integration, filtering, and modal previews
- Responsive design with rebuilt components for mobile breakpoints
- 301 redirects with wildcard patterns preserving query parameters
Like What You See?
Book your free no obligation website consultation to get started.
