SwiftUI Animations Spring Animations

SwiftUI Animations: Spring Animations

Use .spring() animations to simulate mass-spring-damper motion with configurable stiffness and damping.

Syntax

Spring: withAnimation(.spring(response: 0.4, dampingFraction: 0.6)) { state.toggle() }. response controls speed, dampingFraction controls overshoot/bounce.

Basic Spring Toggle

Tap the button to toggle the circle's size with a spring animation configured by response and dampingFraction.

import SwiftUI

struct SpringDemo: View {
  @State private var on = false
  var body: some View {
    VStack(spacing: 12) {
      Circle()
        .fill(on ? .green : .gray)
        .frame(width: on ? 120 : 60, height: on ? 120 : 60)
      Button("Toggle") {
        withAnimation(.spring(response: 0.4, dampingFraction: 0.6)) { on.toggle() }
      }
    }
    .padding()
  }
}

import SwiftUI

struct ContentView: View {
  var body: some View { SpringDemo() }
}

import SwiftUI

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup { ContentView() }
  }
}

Tuned Spring Parameters

Experiment with a bouncier spring by lowering damping and changing response. Multiple shapes animate with different timing.

import SwiftUI

struct SpringTunedDemo: View {
  @State private var on = false
  var body: some View {
    VStack(spacing: 16) {
      RoundedRectangle(cornerRadius: 12)
        .fill(.blue.opacity(0.2))
        .frame(width: on ? 220 : 140, height: 40)
        .animation(.spring(response: 0.25, dampingFraction: 0.45), value: on)
      Circle()
        .fill(.orange.opacity(0.4))
        .frame(width: on ? 80 : 40, height: on ? 80 : 40)
        .animation(.spring(response: 0.5, dampingFraction: 0.65), value: on)
      Button(on ? "Reset" : "Bounce") { on.toggle() }
    }
    .padding()
  }
}

import SwiftUI

struct ContentView: View {
  var body: some View { SpringTunedDemo() }
}

import SwiftUI

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup { ContentView() }
  }
}