Creating a Fluid Scroll Experience on iOS
Article Summary
ClassPass engineers faced a deceptively simple challenge: build an Apple Maps-style draggable list. The first attempt looked perfect—until users tried the continuous scroll.
Ray Kim from ClassPass Engineering shares the technical journey of redesigning their iOS search experience. The goal was to help users browse studios more intuitively with a fluid map-to-list interaction.
Key Takeaways
- First implementation using UIScrollView failed on continuous scroll gestures
- Apple's pan gesture handling blocks parent-to-child scroll transitions mid-swipe
- Solution: vanilla UIView container with custom UIPanGestureRecognizer targets
- Capturing internal scroll offset enables seamless container-to-list transitions
Achieving Apple Maps-quality scroll interactions required abandoning UIScrollView entirely for a custom gesture-based approach that manually coordinates container and list movements.
About This Article
ClassPass's list UI wasn't showing enough studios to new users. Most people only saw a few classes before scrolling, and they missed the map view button entirely because they didn't know it was there.
Ray Kim built a custom UIView container using vanilla code and UIPanGestureRecognizer. It tracks five gesture states (.began, .changed, .failed, .ended, .cancelled) and manually adjusts contentOffset.y values to let users drag the container and scroll internal views without interruption.
The redesign shipped with smooth interactions that felt like Apple Maps. Users could now browse studios without that awkward stop-and-restart feeling from the first UIScrollView version, making it easier to find and book classes.