Screen · Media
Gallery SwiftUI Screen
A trip album that pages with depth, captions on color blocks, and a pinch to peek at the centred photo.
A paged gallery where off-center pages recede in scale, blur and tone with parallax, rubber-banded ends, a continuously tracking scrubbable dot strip and pinch peek-zoom on the centered page.
- SwiftUI
- iOS 17.0+
- depth-gallery
$199 once, every piece included. See how installing works · Sign in
01
What's included
SwiftUI source you own, built on Apple frameworks only.
- Neighbouring pages recede in scale, blur and tone
- Rubber-banded ends and a scrubbable dot strip
- Pinch to peek-zoom the centred photo
- The album screen from the preview, with block captions and a floating action bar
02
Implementation notes
How it behaves, what it handles, and the decisions behind it.
A horizontal, view-aligned pager with generous margins so the neighbours peek in. The centered page sits at full size with a deep shadow; pages either side scale down, blur and darken by how far off-center they are, and shift slightly against the scroll for a parallax feel, all from scrollTransition. The ends rubber-band with scrollBounceBehavior(.always). A dot strip below tracks progress continuously as the scroll moves and can be scrubbed to jump pages. Pinch the centered page to peek-zoom with a soft limit; it springs back on release.
Notes
- Selection is a
scrollPosition(id:)binding, so the centered page is always addressable and the strip can move it programmatically. - The continuous progress for the dot indicator comes from
onScrollGeometryChangeon iOS 18; on iOS 17 the indicator still snaps to the selected page, it just does not track mid-scroll. - The recede is a file-private
VisualEffectfunction called from thescrollTransitionclosure, which keeps the closure nonisolated and cheap. - The strip is an adjustable VoiceOver element (swipe to change page, value "n of m"); the pager is a container labeled "Gallery". Page changes tick with
.selection. - Reduce Motion drops the blur and the parallax shift and uses ease-outs; the scale and tone still change so the centered page remains distinct.
pageWidth(fraction of the gallery width, default 0.78) andspacing(default 16) size the pages; the album uses 0.82 and 14 so the pages fill the screen with the neighbours just peeking.- The album sets captions on solid block tabs inside each page and keeps actions in a floating capsule pinned with
safeAreaInset, so the pager can scroll under it at large text sizes. DepthGalleryExampleat the end ofDepthGallery.swiftis the Gallery screen from the preview; copy it as a starting point.
03
Keep building
Pieces that work well next to this one.