Apple Books Scroll Animation - Complex UI - SwiftUI - Xcode 16
Added 2025-02-25 19:12:27 +0000 UTCHello Guys ๐๐๐
In this video, Iโll show you how we can re-create the Apple Books App's Scroll Animation Using SwiftUI.
YouTube Video: https://youtu.be/Vcci66yoLfk
Download Code ๐
Comments
Thanks - but it freezes when using lazyhstack... did anybody noticed this?
Marcio
2025-05-14 18:43:51 +0000 UTCThanks for updating the code!
Andre Simon
2025-03-04 19:46:34 +0000 UTCI've been trying to implement this effect for my app...for a while.. thanks a lot for sharing!!!!
Bobby
2025-03-03 02:41:50 +0000 UTCGreat to hear! And just like Mark above, I'm a new subscriber: I joined when I saw your tweet about this video ๐ FWIW, I wanted to see if I could replicate the complete open/dismiss book flow myself, and hereโs what I came up with so far: 1. I started by recording a video of the open/dismiss animation and taking multiple screenshots to analyze it in detail. I put everything in this Imgur album in case it helps: https://imgur.com/a/tF94H8x 2. Out of curiosity, I sent those screenshots/frames to Claude 3.7 via Cursor to see what it would say: https://imgur.com/a/zGaAmt1 3. The implementation via a ZStack with conditional rendering makes the most sense. A standard NavigationLink, sheet or fullScreenCover don't really work for this use case. 4. Opening/closing the detail view with a standard "easeInOut" animation is simple enough to implement. But as you can see in the Imgur albums I shared, there are quite a few moving pieces, making the whole flow a bit more complex. 5. Right now, Iโm struggling to get the detail view to open the book I actually tap in the grid. For some reason, it always opens the first book, ignoring any scrollTo/.id/scrollPosition I add. Some quick online research suggests this might be due to using a standard HStack instead of a Lazy container, but I havenโt tested that yet (plus, I feel like it might break some things). Aside from that, I noticed a couple of differences in your otherwise near-perfect recreation: 1. On iPadOS and macOS, the Apple Books app doesn't have this scroll animation where the width expands as you scroll down. Instead, the view simply has a fixed width (with a maximum width on macOS, where we can freely change the app's window size) 2. A minor detail is missing: when scrolling down, the active book detail view expands *on top of* the books on the left and right. While in the Apple Books app, the active book detail view *pushes* the books on the sides. Comparison: https://imgur.com/a/jgbGZBr
imkh
2025-03-01 13:28:10 +0000 UTCIโll give it a try!
Kavsoft
2025-03-01 06:59:40 +0000 UTCi 2nd this, i'm a new subscriber, but i would love to see the first animation that transitions from the grid to this detailed view. i think it might use the matched geometry effect? very pleasant interaction overall
Mark
2025-02-27 21:02:41 +0000 UTCLooks great, thanks! I haven't played around with the code yet, but how difficult would it be to add the grid of books behind it and the animation when opening the books detail view? Maybe with the new iOS 18 zoom transition? But then again I don't think the opening/dismissing would work with a NavigationLink here... Plus, from what I can see, there are 2 animations: the book cover itself and the card view "expanding" from the book cover while it's moving ๐ตโ๐ซ
imkh
2025-02-26 00:51:34 +0000 UTC
