History
Loading...
Learn a little bit every day
Learn a little bit every day
Loading...
September 6, 2025
asymmetric(insertion:removal:) to create different animations for views appearing vs disappearing. Perfect for onboarding flows where you want content to slide in from the right but fade out when dismissed: .transition(.asymmetric(insertion: .move(edge: .trailing), removal: .opacity))Creating semantic custom transitions through extensions provides reusable, named animations that can be easily applied across your app. This approach combines multiple basic transitions and custom view modifiers to create rich, purposeful motion.
extension AnyTransition {
static var slideAndScale: AnyTransition {
AnyTransition.asymmetric(
insertion: .scale.combined(with: .move(edge: .bottom)),
removal: .scale.combined(with: .opacity)
)
}
static var cardFlip: AnyTransition {
AnyTransition.modifier(
active: CardFlipModifier(angle: 90),
identity: CardFlipModifier(angle: 0)
)
}
}
struct CardFlipModifier: ViewModifier {
let angle: Double
func body(content: Content) -> some View {
content
.rotation3DEffect(
.degrees(angle),
axis: (x: 0, y: 1, z: 0)
)
.opacity(angle == 90 ? 0 : 1)
}
}Named transitions improve code readability and maintainability while ensuring consistent animation behavior throughout your app. By encapsulating complex transition logic in extensions, you create a design system of motions that can be easily modified centrally and reused across different views.