SwiftUI: Create a Stretchable Header with Parallax Scrolling

Learn how to build a parallax-ed stretchable header in SwiftUI using GeometryReader, ObservableObject, and PreferenceKey.

In this tutorial, we are going to create a stretchy header that, when scrolled, will create a parallax effect that blurs as the user scrolls further. We will be using GeometryReader to get the current position of certain Views, as well as a few other SwiftUI features to make this nice looking Medium-esque style screen.

This is what we are going to accomplish in this tutorial:

Getting Started

To get started, open up Xcode. I’m running Xcode 11.3 on an iMac using Swift 5. But, any computer running Xcode 11 on macOS Catalina will work.

Create a new project, selecting Single View Application and call it Sticky Header (or really anything, it’s up to you).

Make sure you have User Interface set to SwiftUI.

Want to skip ahead and avoid the layout phase?