Finalized calculation for opacity.

Author: Trent Guillory

.swiftpm/xcode/xcshareddata/xcschemes/ScrollViewReactiveHeader.xcscheme

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Scheme
+   LastUpgradeVersion = "1300"
+   version = "1.3">
+   <BuildAction
+      parallelizeBuildables = "YES"
+      buildImplicitDependencies = "YES">
+      <BuildActionEntries>
+         <BuildActionEntry
+            buildForTesting = "YES"
+            buildForRunning = "YES"
+            buildForProfiling = "YES"
+            buildForArchiving = "YES"
+            buildForAnalyzing = "YES">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "ScrollViewReactiveHeader"
+               BuildableName = "ScrollViewReactiveHeader"
+               BlueprintName = "ScrollViewReactiveHeader"
+               ReferencedContainer = "container:">
+            </BuildableReference>
+         </BuildActionEntry>
+      </BuildActionEntries>
+   </BuildAction>
+   <TestAction
+      buildConfiguration = "Debug"
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      shouldUseLaunchSchemeArgsEnv = "YES">
+      <Testables>
+      </Testables>
+   </TestAction>
+   <LaunchAction
+      buildConfiguration = "Debug"
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      launchStyle = "0"
+      useCustomWorkingDirectory = "NO"
+      ignoresPersistentStateOnLaunch = "NO"
+      debugDocumentVersioning = "YES"
+      debugServiceExtension = "internal"
+      allowLocationSimulation = "YES">
+   </LaunchAction>
+   <ProfileAction
+      buildConfiguration = "Release"
+      shouldUseLaunchSchemeArgsEnv = "YES"
+      savedToolIdentifier = ""
+      useCustomWorkingDirectory = "NO"
+      debugDocumentVersioning = "YES">
+      <MacroExpansion>
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "ScrollViewReactiveHeader"
+            BuildableName = "ScrollViewReactiveHeader"
+            BlueprintName = "ScrollViewReactiveHeader"
+            ReferencedContainer = "container:">
+         </BuildableReference>
+      </MacroExpansion>
+   </ProfileAction>
+   <AnalyzeAction
+      buildConfiguration = "Debug">
+   </AnalyzeAction>
+   <ArchiveAction
+      buildConfiguration = "Release"
+      revealArchiveInOrganizer = "YES">
+   </ArchiveAction>
+</Scheme>

Package.swift

@@ -5,7 +5,7 @@ import PackageDescription
 
 let package = Package(
     name: "ScrollViewReactiveHeader",
-    platforms: [.macOS(.v11), .iOS(.v14),],
+    platforms: [.macOS(.v11), .iOS(.v13),],
     products: [
         // Products define the executables and libraries a package produces, and make them visible to other packages.
         .library(

ScrollViewReactiveHeaderDemoApp/Sources/ContentView.swift

@@ -4,19 +4,41 @@ import SwiftUI
 // MARK: - ContentView
 
 struct ContentView: View {
-    
+
     var body: some View {
 
-        ScrollViewReactiveHeader(header: {
-            
-            HeaderView()
-        }, headerOverlay: {
-            
-            HeaderOverlay()
-        }, body: {
-            
-            ScrollViewContent()
-        })
+        ZStack(alignment: .topLeading) {
+
+            ScrollViewReactiveHeader(header: {
+
+                HeaderView()
+            }, headerOverlay: {
+
+                HeaderOverlay()
+            }, body: {
+
+                ScrollViewContent()
+            })
+
+            HStack {
+
+                Spacer()
+
+                Image(systemName: "magnifyingglass")
+                    .imageScale(.medium)
+
+                Text("Where are you going?")
+                    .font(.callout)
+                    .fontWeight(.medium)
+
+                Spacer()
+            }
+            .opacity(0.8)
+            .padding(6)
+            .background(Color.white)
+            .cornerRadius(20)
+            .padding()
+        }
     }
 }
 
@@ -29,7 +51,7 @@ struct HeaderView: View {
         Image("night-sky")
             .resizable()
             .aspectRatio(contentMode: .fill)
-            .frame(height: 350)
+            .frame(height: 450)
     }
 }
 
@@ -39,8 +61,23 @@ struct HeaderOverlay: View {
 
     var body: some View {
 
-        Text("Not sure where to go? \n Perfect.")
-            .foregroundColor(.white)
+        VStack {
+
+            Spacer()
+
+            Text("Not sure where to go?")
+                .font(.title)
+                .frame(maxWidth: .infinity, alignment: .center)
+                .foregroundColor(.white)
+
+            Text("Perfect")
+                .font(.title)
+                .frame(maxWidth: .infinity, alignment: .center)
+                .foregroundColor(.white)
+
+            Spacer()
+        }
+        .frame(height: 450)
     }
 }
 
@@ -61,7 +98,7 @@ struct ScrollViewContent: View {
 
             Text("content")
                 .frame(maxWidth: .infinity, alignment: .leading)
-            
+
             Spacer()
         }
         .frame(height: 600)

Sources/Views/GeometryReaderOverlay.swift Sources/GeometryReaderOverlay.swiftSources/Views/GeometryReaderOverlay.swift renamed to Sources/GeometryReaderOverlay.swift

@@ -1,13 +1,19 @@
 import Foundation
 import SwiftUI
 
-public struct GeometryReaderOverlay: View {
+struct ContentPreferenceData: Equatable {
+
+    let rect: CGRect
+}
+
+struct GeometryReaderOverlay<Key: PreferenceKey>: View where Key.Value == ContentPreferenceData {
 
     // MARK: Lifecycle
 
-    public init(coordinateSpace: String = "ReactiveHeader") {
+    public init(key: Key.Type, coordinateSpace: String = "ReactiveHeader") {
 
         self.coordinateSpace = coordinateSpace
+        self.preferenceKey = key.self
     }
 
     // MARK: Public
@@ -18,7 +24,7 @@ public struct GeometryReaderOverlay: View {
 
             Rectangle().fill(Color.clear)
                 .preference(
-                    key: ScrollViewHeaderKey.self,
+                    key: preferenceKey.self,
                     value: ContentPreferenceData(
                         rect: geometry.frame(in: .named(coordinateSpace))))
         }
@@ -27,4 +33,5 @@ public struct GeometryReaderOverlay: View {
     // MARK: Internal
 
     let coordinateSpace: String
+    let preferenceKey: Key.Type
 }

Sources/Model/HeaderPreferenceKey.swift …HeaderGeometry/HeaderPreferenceKey.swiftSources/Model/HeaderPreferenceKey.swift renamed to Sources/HeaderGeometry/HeaderPreferenceKey.swift Sources/Model/HeaderPreferenceKey.swift renamed to Sources/HeaderGeometry/HeaderPreferenceKey.swift

@@ -1,13 +1,6 @@
 import Foundation
 import SwiftUI
 
-// MARK: - ContentPreferenceData
-
-struct ContentPreferenceData: Equatable {
-
-    let rect: CGRect
-}
-
 // MARK: - ScrollViewHeaderKey
 
 struct ScrollViewHeaderKey: PreferenceKey {

Sources/ScrollViewGeometry/ScrollViewPreferenceKey.swift

@@ -0,0 +1,20 @@
+import Foundation
+import SwiftUI
+
+// MARK: - ScrollViewHeaderKey
+
+struct ScrollViewBodyKey: PreferenceKey {
+
+    typealias Value = ContentPreferenceData
+
+    // MARK: Internal
+
+    static var defaultValue: ContentPreferenceData = .init(rect: .zero)
+
+    static func reduce(
+        value: inout Value,
+        nextValue: () -> Value) {
+
+        value = nextValue()
+    }
+}

Sources/ScrollViewReactiveHeader.swift

@@ -24,46 +24,70 @@ public struct ScrollViewReactiveHeader<A, B, C>: View where A: View, B: View, C:
             GeometryReader { geometry in
 
                 VStack(content: header)
-                    .overlay(GeometryReaderOverlay())
+                    .overlay(GeometryReaderOverlay(key: ScrollViewHeaderKey.self))
+                    .offset(x: .zero, y: headerOffset)
+                    .scaleEffect(headerScale)
+                    .opacity(headerOpacity)
 
                 VStack(content: headerOverlay)
 
-                ScrollViewReader { proxy in
+                ScrollView {
 
-                    ScrollView {
-                        
-                        VStack {}
-                            .frame(height: headerHeight)
+                    VStack {}
+                        .frame(height: headerHeight)
+                        .overlay(GeometryReaderOverlay(key: ScrollViewBodyKey.self))
 
-                        VStack(content: bodyContent)
-                            .background(backgroundColor)
-                    }
+                    VStack(content: bodyContent)
+                        .background(backgroundColor)
                 }
             }
             .onPreferenceChange(ScrollViewHeaderKey.self, perform: { preference in
-                
+
                 guard preference.rect != .zero,
                       headerHeight == .none else { return }
-                
+
                 headerHeight = preference.rect.height
             })
         }
-    }
-    
-    var backgroundColor: Color {
+        .background(backgroundColor)
+        .coordinateSpace(name: "ReactiveHeader")
+        .onPreferenceChange(ScrollViewBodyKey.self, perform: { preference in
 
-        colorScheme == .dark ? .black : .white
+            headerOffset = min(0, preference.rect.minY / 10)
+
+            headerScale = max(1, 1 + preference.rect.minY / 500)
+
+            guard let headerHeight = headerHeight else { return }
+
+            let startingY = headerHeight / 2
+
+            if abs(preference.rect.minY) > startingY {
+
+                headerOpacity = (1 - (abs(preference.rect.minY) - startingY) / startingY)
+            } else {
+
+                headerOpacity = 1
+            }
+        })
     }
 
     // MARK: Internal
 
     @Environment(\.colorScheme) var colorScheme
 
+    var backgroundColor: Color {
+
+        colorScheme == .dark ? .black : .white
+    }
+
     // MARK: Private
 
     private var header: () -> A
     private var headerOverlay: () -> B
     private var bodyContent: () -> C
 
     @State private var headerHeight: CGFloat?
+    @State private var headerOffset: CGFloat = .zero
+    @State private var headerScale: CGFloat = 1
+    @State private var headerOpacity: CGFloat = 1
 }