---
title: Animations
framework: swiftui
role: collectionGroup
role_heading: API Collection
path: swiftui/animations
---

# Animations

Create smooth visual updates in response to state changes.

## Overview

Overview You tell SwiftUI how to draw your app’s user interface for different states, and then rely on SwiftUI to make interface updates when the state changes.

To avoid abrupt visual transitions when the state changes, add animation in one of the following ways: Animate all of the visual changes for a state change by changing the state inside a call to the withAnimation(_:_:) global function. Add animation to a particular view when a specific value changes by applying the animation(_:value:) view modifier to the view. Animate changes to a Binding by using the binding’s animation(_:) method. SwiftUI animates the effects that many built-in view modifiers produce, like those that set a scale or opacity value. You can animate other values by making your custom views conform to the Animatable protocol, and telling SwiftUI about the value you want to animate. When an animated state change results in adding or removing a view to or from the view hierarchy, you can tell SwiftUI how to transition the view into or out of place using built-in transitions that AnyTransition defines, like slide or scale. You can also create custom transitions. For design guidance, see Motion in the Human Interface Guidelines.

## Topics

### Adding state-based animation to an action

- [withAnimation(_:_:)](swiftui/withanimation(_:_:).md)
- [withAnimation(_:completionCriteria:_:completion:)](swiftui/withanimation(_:completioncriteria:_:completion:).md)
- [AnimationCompletionCriteria](swiftui/animationcompletioncriteria.md)
- [Animation](swiftui/animation.md)

### Adding state-based animation to a view

- [animation(_:)](swiftui/view/animation(_:).md)
- [animation(_:value:)](swiftui/view/animation(_:value:).md)
- [animation(_:body:)](swiftui/view/animation(_:body:).md)

### Creating phase-based animation

- [Controlling the timing and movements of your animations](swiftui/controlling-the-timing-and-movements-of-your-animations.md)
- [phaseAnimator(_:content:animation:)](swiftui/view/phaseanimator(_:content:animation:).md)
- [phaseAnimator(_:trigger:content:animation:)](swiftui/view/phaseanimator(_:trigger:content:animation:).md)
- [PhaseAnimator](swiftui/phaseanimator.md)

### Creating keyframe-based animation

- [keyframeAnimator(initialValue:repeating:content:keyframes:)](swiftui/view/keyframeanimator(initialvalue:repeating:content:keyframes:).md)
- [keyframeAnimator(initialValue:trigger:content:keyframes:)](swiftui/view/keyframeanimator(initialvalue:trigger:content:keyframes:).md)
- [KeyframeAnimator](swiftui/keyframeanimator.md)
- [Keyframes](swiftui/keyframes.md)
- [KeyframeTimeline](swiftui/keyframetimeline.md)
- [KeyframeTrack](swiftui/keyframetrack.md)
- [KeyframeTrackContentBuilder](swiftui/keyframetrackcontentbuilder.md)
- [KeyframesBuilder](swiftui/keyframesbuilder.md)
- [KeyframeTrackContent](swiftui/keyframetrackcontent.md)
- [CubicKeyframe](swiftui/cubickeyframe.md)
- [LinearKeyframe](swiftui/linearkeyframe.md)
- [MoveKeyframe](swiftui/movekeyframe.md)
- [SpringKeyframe](swiftui/springkeyframe.md)

### Creating custom animations

- [CustomAnimation](swiftui/customanimation.md)
- [AnimationContext](swiftui/animationcontext.md)
- [AnimationState](swiftui/animationstate.md)
- [AnimationStateKey](swiftui/animationstatekey.md)
- [UnitCurve](swiftui/unitcurve.md)
- [Spring](swiftui/spring.md)

### Making data animatable

- [Animatable](swiftui/animatable.md)
- [AnimatableValues](swiftui/animatablevalues.md)
- [AnimatablePair](swiftui/animatablepair.md)
- [VectorArithmetic](swiftui/vectorarithmetic.md)
- [EmptyAnimatableData](swiftui/emptyanimatabledata.md)

### Updating a view on a schedule

- [Updating watchOS apps with timelines](watchos-apps/updating-watchos-apps-with-timelines.md)
- [TimelineView](swiftui/timelineview.md)
- [TimelineSchedule](swiftui/timelineschedule.md)
- [TimelineViewDefaultContext](swiftui/timelineviewdefaultcontext.md)

### Synchronizing geometries

- [matchedGeometryEffect(id:in:properties:anchor:isSource:)](swiftui/view/matchedgeometryeffect(id:in:properties:anchor:issource:).md)
- [MatchedGeometryProperties](swiftui/matchedgeometryproperties.md)
- [GeometryEffect](swiftui/geometryeffect.md)
- [Namespace](swiftui/namespace.md)
- [geometryGroup()](swiftui/view/geometrygroup().md)

### Defining transitions

- [transition(_:)](swiftui/view/transition(_:).md)
- [Transition](swiftui/transition.md)
- [TransitionProperties](swiftui/transitionproperties.md)
- [TransitionPhase](swiftui/transitionphase.md)
- [AsymmetricTransition](swiftui/asymmetrictransition.md)
- [AnyTransition](swiftui/anytransition.md)
- [contentTransition(_:)](swiftui/view/contenttransition(_:).md)
- [contentTransition](swiftui/environmentvalues/contenttransition.md)
- [contentTransitionAddsDrawingGroup](swiftui/environmentvalues/contenttransitionaddsdrawinggroup.md)
- [ContentTransition](swiftui/contenttransition.md)
- [PlaceholderContentView](swiftui/placeholdercontentview.md)

### Defining matched transitions

- [matchedTransitionSource(id:in:)](swiftui/view/matchedtransitionsource(id:in:).md)
- [matchedTransitionSource(id:in:configuration:)](swiftui/view/matchedtransitionsource(id:in:configuration:).md)
- [MatchedTransitionSourceConfiguration](swiftui/matchedtransitionsourceconfiguration.md)
- [EmptyMatchedTransitionSourceConfiguration](swiftui/emptymatchedtransitionsourceconfiguration.md)

### Defining navigation transitions

- [navigationTransition(_:)](swiftui/view/navigationtransition(_:).md)
- [NavigationTransition](swiftui/navigationtransition.md)
- [AnyNavigationTransition](swiftui/anynavigationtransition.md)
- [CrossFadeNavigationTransition](swiftui/crossfadenavigationtransition.md)

### Moving an animation to another view

- [withTransaction(_:_:)](swiftui/withtransaction(_:_:).md)
- [withTransaction(_:_:_:)](swiftui/withtransaction(_:_:_:).md)
- [transaction(_:)](swiftui/view/transaction(_:).md)
- [transaction(value:_:)](swiftui/view/transaction(value:_:).md)
- [transaction(_:body:)](swiftui/view/transaction(_:body:).md)
- [Transaction](swiftui/transaction.md)
- [Entry()](swiftui/entry().md)
- [TransactionKey](swiftui/transactionkey.md)

### Deprecated types

- [AnimatableModifier](swiftui/animatablemodifier.md)

## See Also

### Views

- [View fundamentals](swiftui/view-fundamentals.md)
- [View configuration](swiftui/view-configuration.md)
- [View styles](swiftui/view-styles.md)
- [Text input and output](swiftui/text-input-and-output.md)
- [Images](swiftui/images.md)
- [Controls and indicators](swiftui/controls-and-indicators.md)
- [Menus and commands](swiftui/menus-and-commands.md)
- [Shapes](swiftui/shapes.md)
- [Drawing and graphics](swiftui/drawing-and-graphics.md)