Scroll-driven motion that turned a static listing into an interactive house tour
Harland is a luxury condominium property in West Hollywood. The client asked for a site that told a story, and I turned that into a house tour: visitors move through the site the way they’d tour the residences, room by room, with the motion setting the pace. Every motion decision below came from that idea.
Wicked+ designed the visuals, and as with my other Wicked+ projects, I owned the build, from field architecture through content entry. On Harland, I also designed the motion with GSAP, and it was my first project using Copilot.
SCROLL REVEAL
Revealing each room on arrival
Tall images unveil upward as each section scrolls into view, riding Lenis’s smoothed scroll. I wanted it to feel like walking into a room instead of waiting for content to load. The copy darkens word by word as you scroll, so reading pace stays tied to scroll pace.
The triggers are set on each component, not on the page, so editors can rearrange sections in the CMS without breaking the animation.
SCROLLYTELLING
Pinning copy beside each room
Copy pins on the left while its images scroll past on the right. When the last image passes, the next block of copy slides up and the next set of images begins. This section is the closest to the house tour idea, since the copy holds still while each space moves past.
BRAND MARK
Turning the keyhole into a motion system
Harland’s brand mark is a keyhole, and I used it across the site with a different behavior for each context.
Inside media
The keyhole grows slightly as each image reveals, layering one image over the next.
Pinned sections
The keyhole grows with the scroll while copy fades in over it.
Signature pin
The keyhole pins with copy centered inside it while lifestyle images fly upward, 2 on each side, and releases after the last image passes. I designed this as the high point of the tour, where you stand in the middle of the building while its daily life moves around you.
NEIGHBORHOOD MAP
Ending the tour in the neighborhood
The tour ends outside the building, with a Google Map styled to match the brand. A sidebar lists LA spots by category, and clicking one pans the map to it.
MOBILE
Reducing motion for mobile
Shrinking the desktop animations onto a phone would have buried the copy under images moving in every direction. So on mobile, I removed motion instead of scaling it down.
REFLECTION
Harland is still the site I show when someone asks what I can do with motion.
Wicked+ loved the animations, and they fit the brand, but not every component needed them. Smooth scroll slows down visitors who came for specific information, and motion that’s fun on a first visit can get in the way by the third.
On my next Wicked+ build, Ascaya, I kept motion to hover states, a hero entrance, and slide-out filters, and left everything else still.
