The Best SwiftUI Animation Libraries for 2026

struct SpringDemo: View {
    @State private var expanded = false

    var body: some View {
        VStack {
            RoundedRectangle(cornerRadius: expanded ? 40 : 12)
                .fill(Color.accentColor)
                .frame(width: expanded ? 160 : 80, height: 80)

            Button("Toggle") { expanded.toggle() }
        }
        // iOS 17: duration + bounce is far easier to reason about than
        // response/dampingFraction. bounce 0 = smooth, 0.5 = very springy.
        .animation(.spring(duration: 0.45, bounce: 0.35), value: expanded)
    }
}

struct HeroTransition: View {
    @Namespace private var ns
    @State private var isOpen = false

    var body: some View {
        ZStack {
            if isOpen {
                RoundedRectangle(cornerRadius: 24)
                    .fill(Color.accentColor)
                    .matchedGeometryEffect(id: "card", in: ns)
                    .frame(width: 240, height: 200)
                    .onTapGesture { isOpen = false }
            } else {
                RoundedRectangle(cornerRadius: 12)
                    .fill(Color.accentColor)
                    .matchedGeometryEffect(id: "card", in: ns)
                    .frame(width: 80, height: 80)
                    .onTapGesture { isOpen = true }
            }
        }
        // The id must be identical on both branches, and only ONE may be in
        // the hierarchy at a time — otherwise SwiftUI cannot pair them.
        .animation(.spring(duration: 0.45, bounce: 0.2), value: isOpen)
    }
}

struct PulsingBadge: View {
    var body: some View {
        Image(systemName: "bell.fill")
            .font(.largeTitle)
            .foregroundStyle(Color.accentColor)
            // Each phase is applied in turn, then it loops.
            .phaseAnimator([1.0, 1.25, 1.0]) { view, scale in
                view.scaleEffect(scale)
            } animation: { _ in
                .spring(duration: 0.4, bounce: 0.5)
            }
    }
}

struct BounceValues {
    var scale = 1.0
    var yOffset = 0.0
}

struct KeyframeDemo: View {
    @State private var trigger = 0

    var body: some View {
        Image(systemName: "heart.fill")
            .font(.system(size: 44))
            .foregroundStyle(.red)
            .keyframeAnimator(initialValue: BounceValues(), trigger: trigger) { view, value in
                view.scaleEffect(value.scale).offset(y: value.yOffset)
            } keyframes: { _ in
                KeyframeTrack(\.scale) {
                    SpringKeyframe(1.3, duration: 0.18)
                    SpringKeyframe(1.0, duration: 0.32, spring: .bouncy)
                }
                KeyframeTrack(\.yOffset) {
                    CubicKeyframe(-22, duration: 0.22)
                    CubicKeyframe(0, duration: 0.28)
                }
            }
            .onTapGesture { trigger += 1 }
    }
}

struct TransitionDemo: View {
    @State private var show = false

    var body: some View {
        VStack {
            if show {
                Text("Now you see me")
                    .padding()
                    .background(Color.accentColor, in: .rect(cornerRadius: 12))
                    .transition(
                        .asymmetric(
                            insertion: .move(edge: .bottom).combined(with: .opacity),
                            removal: .scale(scale: 0.85).combined(with: .opacity)
                        )
                    )
            }
            Button("Toggle") { show.toggle() }
        }
        .animation(.spring(duration: 0.35, bounce: 0.25), value: show)
    }
}

struct SymbolEffects: View {
    @State private var isFavourite = false
    @State private var count = 0

    var body: some View {
        HStack(spacing: 28) {
            // .replace cross-fades between two symbols
            Image(systemName: isFavourite ? "star.fill" : "star")
                .contentTransition(.symbolEffect(.replace))
                .onTapGesture { isFavourite.toggle() }

            // .bounce fires each time the trigger value changes
            Image(systemName: "bell.fill")
                .symbolEffect(.bounce, value: count)
                .onTapGesture { count += 1 }

            // .variableColor animates the fill level continuously
            Image(systemName: "wifi")
                .symbolEffect(.variableColor.iterative.reversing)
        }
        .font(.largeTitle)
        .foregroundStyle(Color.accentColor)
    }
}