SwiftUI Animated Sticky Header | Resizable Header | Scroll Velocity | Xcode 14 | SwiftUI Tutorials

Hello Guys 🖐🖐🖐
In this Video I'm going to teach how to create Stylish Animated Sticky Resizable Header With Scroll Velocity Using SwiftUI | SwiftUI Sticky Header | SwiftUI Resizable Header | SwiftUI Scroll Velocity | SwiftUI ScrollView Offset | SwiftUI Complex Animations | SwiftUI Complex UI | SwiftUI Geometry Reader | SwiftUI Advanced Animations | Swift | SwiftUI Xcode 14 | SwiftUI for iOS 15 & iOS 16 | Xcode 14 SwiftUI.
#apple #swiftui #ios #xcode #animation #ui #ux #design

► Support Us

► My MacBook Specs
M1 MacBook Pro(16GB)
Xcode Version: 14.3
macOS Version: 13.3.1 Ventura

► Social Platforms

► Timestamps
0:00 Intro
0:38 Project SetUp
1:10 Building Header View
6:30 Adding Sticky Animation

Thanks for watching
Make sure to like and Subscribe For More Content !!!

[Kavsoft]

fileprivate extension View {
func moveText(_ progress: CGFloat, _ headerHeight: CGFloat, _ minimumHeaderHeight: CGFloat) -> some View {
self
.hidden()
.overlay {
GeometryReader { proxy in
let rect = proxy.frame(in: .global)
let midY = rect.midY
/// Half Scaled Text Height (Since Text Scaling will be 0.85 (1 - 0.15))
let halfScaledTextHeight = (rect.height * 0.85) / 2
/// Profile Image
let profileImageHeight = (headerHeight * 0.5)
/// Since Image Scaling will be 0.3 (1 - 0.7)
let scaledImageHeight = profileImageHeight * 0.3
let halfScaledImageHeight = scaledImageHeight / 2
/// Applied VStack Spacing is 15
/// 15 / 0.3 = 4.5 (0.3 -> Image Scaling)
let vStackSpacing: CGFloat = 4.5
let resizedOffsetY = (midY - (minimumHeaderHeight - halfScaledTextHeight - vStackSpacing - halfScaledImageHeight))

self
.scaleEffect(1 - (progress * 0.15))
.offset(y: -resizedOffsetY * progress)
}
}
}
}

[TheCstriker]

3:43 maybe add recursive mechanism to go up the chain of superviews until you find the scrollview instead of manually accessing it 3 times, this way if you add a modifier nothing will break

[dongka]

The animate Profile View algorithm makes me quite confused. Are there any specific sources that talk about how to do so?

[matva]

This works great however, a concern arises when there are too few cells to permit the header to shrink to its intended size. In such cases, the image also fails to reach the desired position and ends up only moving partially. Do you have any ideas on how to address this issue?

[pbking]

Hello, if you have used macOS in the system.. does your letest Xcode in PC open the correct simulator or not(macos ventura, xcode 14.2)

[Patresko-SVK]

How do you achieve scaleEffect not to side, but only to top like in native contact app?

[preetibasil]

Instead of a list, I am using text in the body. It is a long text. My header is not sticking to the minimum length and scrolling of text is happening on the whole page. Kindly guide

[vittyfiorentini]

Hi, updating xcode to 14.3 i receive the log "[PipelineLibrary] Mapping the pipeline data cache failed, errno22" when adding the MapView in the viewcontroller. I Receive this error only when i test on a real device not in the simulator. Can i fix it ? Is a common problem? Thanks for the time I appreciate so much.

[DurgaViswanadhNemala]

How can i get this same effect in swift?

[AkimboFennec]

One very annoying thing is that you still use UIKit for this. Why is it imposible to extract the scroll offset using pure SwiftUI?

[kavinda_dilshan_paramsoodi]

This is too easy, create a scroll view like on the Twitter Profile view where it has vertical(parent), (horizontal+vertical)(child) scroll views.

[Harsh-uqjs]

Converted it to pure SwiftUI using

`struct StickyScrollTargetBehavior: ScrollTargetBehavior {
var onDraggingEnd: (CGFloat, CGFloat) -> ()

func updateTarget(_ target: inout ScrollTarget, context: TargetContext) {
let offset = target.rect.origin.y
let velocity = context.velocity.dy

onDraggingEnd(offset, velocity)
}
}`