How it works
ScrollTransitionConfiguration controls how SwiftUI animates a view in and out as it moves through a scroll container's visible region. Rather than describing the transition's appearance itself, it describes the *timing model* — whether the effect is interpolated smoothly with an animation, driven directly by scroll position, or disabled entirely. You pass it as the first argument to the scrollTransition(_:transition:) modifier to choose how a view reacts to scrolling, then supply a closure that defines the visual change to apply at each phase. Reach for it when you want list rows, cards, or media to fade, scale, or shift as they enter and leave the screen.
Pick a configuration for scrollTransition(_:_:)
The configuration is the first parameter of the transition modifier — it selects the model used to apply your effect. The example passes the .animated value, which interpolates the transition with an animation as the view crosses the container's edges, giving a smooth fade-and-scale instead of an abrupt jump tied directly to finger movement.
Choose among the built-in configurations
ScrollTransitionConfiguration provides ready-made values: .animated drives the effect with a default animation, .interactive ties it directly to scroll offset so it tracks the gesture, and .identity disables the transition. The example uses .animated; swapping in .interactive would make the same .opacity and .scaleEffect changes follow the scroll position frame-by-frame.
Customize the animation with animation(_:)
Beyond the shorthand values, ScrollTransitionConfiguration exposes an animation(_:) method that returns a configuration using a transition you specify. Starting from .animated, you can attach a custom curve — for instance to make the fade in the example spring or ease more slowly — without changing the closure that produces the visual effect.
Define the effect against the transition phase
The configuration only decides *how* the transition is applied; the trailing closure of scrollTransition decides *what* it looks like. The closure receives content and a phase, and the example reads phase.isIdentity to switch between full visibility (opacity 1, scaleEffect 1) when the view is centered and a dimmed, shrunken state (opacity 0.2, scaleEffect 0.8) as it nears the edges.
Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct ScrollTransitionConfigurationDemo: View {
var body: some View {
ScrollView {
VStack(spacing: 16) {
ForEach(1..<10) { i in
Text("Row \(i)")
.font(.headline)
.frame(maxWidth: .infinity)
.frame(height: 60)
.background(.blue.opacity(0.2))
.clipShape(RoundedRectangle(cornerRadius: 12))
.scrollTransition(.animated) { content, phase in
content
.opacity(phase.isIdentity ? 1 : 0.2)
.scaleEffect(phase.isIdentity ? 1 : 0.8)
}
}
}
.padding()
}
}
}