Back to Library
Card Feed with Zoom Transition

Hover to play

Card Feed with Zoom Transition

by Luiz Mello

@luizmellodev
animationnavigationcardszoom-transitionskeleton

Description

A scrollable feed of skeleton-style cards with a smooth zoom navigation transition to a detail view. Uses matchedTransitionSource and NavigationTransition for a native iOS 18+ feel.

SwiftUI Code

4 files • Scroll to see all →
struct DemoCardFeedView: View {
    @Namespace private var zoomNamespace: Namespace.ID
    @State private var selectedCard: String?
    @Environment(\.dismiss) private var dismiss

    private let cardIds = (1...8).map { "demo-\($0)" }

    var body: some View {
        NavigationStack {
            ScrollView(.vertical) {
                LazyVStack(spacing: 16) {
                    ForEach(cardIds, id: \.self) { id in
                        DemoCardContent {
                            selectedCard = id
                        }
                        .matchedTransitionSource(id: id, in: zoomNamespace)
                    }
                }
                .padding(.horizontal)
                .padding(.vertical)

// ... (click "Show full code" to see more)
Viewing: FeedView.swift•1 of 4