<!--
{
  "availability" : [
    "iOS: 13.0.0 -",
    "iPadOS: 13.0.0 -",
    "macCatalyst: 13.0.0 -",
    "macOS: 10.15.0 -",
    "tvOS: 13.0.0 -",
    "visionOS: 1.0.0 -",
    "watchOS: 6.0.0 -"
  ],
  "documentType" : "symbol",
  "framework" : "SwiftUI",
  "identifier" : "/documentation/SwiftUI/Animation",
  "metadataVersion" : "0.1.0",
  "role" : "Structure",
  "symbol" : {
    "kind" : "Structure",
    "modules" : [
      "SwiftUI"
    ],
    "preciseIdentifier" : "s:7SwiftUI9AnimationV"
  },
  "title" : "Animation"
}
-->

# Animation

The way a view changes over time to create a smooth visual transition from
one state to another.

```
@frozen struct Animation
```

## Overview

An `Animation` provides a visual transition of a view when a state value
changes from one value to another. The characteristics of this transition
vary according to the animation type. For instance, a [`linear`](/documentation/SwiftUI/Animation/linear) animation
provides a mechanical feel to the animation because its speed is consistent
from start to finish. In contrast, an animation that uses easing, like
[`easeOut`](/documentation/SwiftUI/Animation/easeOut), offers a more natural feel by varying the acceleration
of the animation.

To apply an animation to a view, add the [`animation(_:value:)`](/documentation/SwiftUI/View/animation(_:value:))
modifier, and specify both an animation type and the value to animate. For
instance, the [`Circle`](/documentation/SwiftUI/Circle) view in the following code performs an
[`easeIn`](/documentation/SwiftUI/Animation/easeIn) animation each time the state variable `scale` changes:

```
struct ContentView: View {
    @State private var scale = 0.5

    var body: some View {
        VStack {
            Circle()
                .scaleEffect(scale)
                .animation(.easeIn, value: scale)
            HStack {
                Button("+") { scale += 0.1 }
                Button("-") { scale -= 0.1 }
            }
        }
        .padding()
    }
```

![A video that shows a circle enlarging then shrinking to its original size using an ease-in animation.](videos/com.apple.SwiftUI/animation-01-overview-easein.mp4)

When the value of `scale` changes, the modifier
[`scaleEffect(_:anchor:)`](/documentation/SwiftUI/View/scaleEffect(_:anchor:)) resizes [`Circle`](/documentation/SwiftUI/Circle) according to the
new value. SwiftUI can animate the transition between sizes because
[`Circle`](/documentation/SwiftUI/Circle) conforms to the [`Shape`](/documentation/SwiftUI/Shape) protocol. Shapes in SwiftUI conform to
the [`Animatable`](/documentation/SwiftUI/Animatable) protocol, which describes how to animate a property of a
view.

In addition to adding an animation to a view, you can also configure the
animation by applying animation modifiers to the animation type. For
example, you can:

- Delay the start of the animation by using the [`delay(_:)`](/documentation/SwiftUI/Animation/delay(_:)) modifier.
- Repeat the animation by using the [`repeatCount(_:autoreverses:)`](/documentation/SwiftUI/Animation/repeatCount(_:autoreverses:)) or
  [`repeatForever(autoreverses:)`](/documentation/SwiftUI/Animation/repeatForever(autoreverses:)) modifiers.
- Change the speed of the animation by using the [`speed(_:)`](/documentation/SwiftUI/Animation/speed(_:)) modifier.

For example, the [`Circle`](/documentation/SwiftUI/Circle) view in the following code repeats
the [`easeIn`](/documentation/SwiftUI/Animation/easeIn) animation three times by using the
[`repeatCount(_:autoreverses:)`](/documentation/SwiftUI/Animation/repeatCount(_:autoreverses:)) modifier:

```
struct ContentView: View {
    @State private var scale = 0.5

    var body: some View {
        VStack {
            Circle()
                .scaleEffect(scale)
                .animation(.easeIn.repeatCount(3), value: scale)
            HStack {
                Button("+") { scale += 0.1 }
                Button("-") { scale -= 0.1 }
            }
        }
        .padding()
    }
}
```

![A video that shows a circle that repeats the ease-in animation three times: enlarging, then shrinking, then enlarging again. The animation reverses causing the circle to shrink, then enlarge, then shrink to its original size.](videos/com.apple.SwiftUI/animation-02-overview-easein-repeat.mp4)

A view can also perform an animation when a binding value changes. To
specify the animation type on a binding, call its [`animation(_:)`](/documentation/SwiftUI/Binding/animation(_:))
method. For example, the view in the following code performs a
[`linear`](/documentation/SwiftUI/Animation/linear) animation, moving the box truck between the leading and trailing
edges of the view. The truck moves each time a person clicks the [`Toggle`](/documentation/SwiftUI/Toggle)
control, which changes the value of the `$isTrailing` binding.

```
struct ContentView: View {
    @State private var isTrailing = false

    var body: some View {
       VStack(alignment: isTrailing ? .trailing : .leading) {
            Image(systemName: "box.truck")
                .font(.system(size: 64))

            Toggle("Move to trailing edge",
                   isOn: $isTrailing.animation(.linear))
        }
    }
}
```

![A video that shows a box truck that moves from the leading edge of a view to the trailing edge. The box truck then returns to the view's leading edge.](videos/com.apple.SwiftUI/animation-03-overview-binding.mp4)

## Topics

### Getting the default animation

[`default`](/documentation/SwiftUI/Animation/default)

A default animation instance.

### Getting linear animations

[`linear`](/documentation/SwiftUI/Animation/linear)

An animation that moves at a constant speed.

[`linear(duration:)`](/documentation/SwiftUI/Animation/linear(duration:))

An animation that moves at a constant speed during a specified
duration.

### Getting eased animations

[`easeIn`](/documentation/SwiftUI/Animation/easeIn)

An animation that starts slowly and then increases speed towards the
end of the movement.

[`easeIn(duration:)`](/documentation/SwiftUI/Animation/easeIn(duration:))

An animation with a specified duration that starts slowly and then
increases speed towards the end of the movement.

[`easeOut`](/documentation/SwiftUI/Animation/easeOut)

An animation that starts quickly and then slows towards the end of the
movement.

[`easeOut(duration:)`](/documentation/SwiftUI/Animation/easeOut(duration:))

An animation with a specified duration that starts quickly and then
slows towards the end of the movement.

[`easeInOut`](/documentation/SwiftUI/Animation/easeInOut)

An animation that combines the behaviors of in and out easing
animations.

[`easeInOut(duration:)`](/documentation/SwiftUI/Animation/easeInOut(duration:))

An animation with a specified duration that combines the behaviors of
in and out easing animations.

### Getting built-in spring animations

[`bouncy`](/documentation/SwiftUI/Animation/bouncy)

A spring animation with a predefined duration and higher amount of
bounce.

[`bouncy(duration:extraBounce:)`](/documentation/SwiftUI/Animation/bouncy(duration:extraBounce:))

A spring animation with a predefined duration and higher amount of
bounce that can be tuned.

[`smooth`](/documentation/SwiftUI/Animation/smooth)

A smooth spring animation with a predefined duration and no bounce.

[`smooth(duration:extraBounce:)`](/documentation/SwiftUI/Animation/smooth(duration:extraBounce:))

A smooth spring animation with a predefined duration and no bounce
that can be tuned.

[`snappy`](/documentation/SwiftUI/Animation/snappy)

A spring animation with a predefined duration and small amount of
bounce that feels more snappy.

[`snappy(duration:extraBounce:)`](/documentation/SwiftUI/Animation/snappy(duration:extraBounce:))

A spring animation with a predefined duration and small amount of
bounce that feels more snappy and can be tuned.

### Customizing spring animations

[`spring`](/documentation/SwiftUI/Animation/spring)

A persistent spring animation. When mixed with other `spring()`
or `interactiveSpring()` animations on the same property, each
animation will be replaced by their successor, preserving
velocity from one animation to the next. Optionally blends the
response values between springs over a time period.

[`spring(_:blendDuration:)`](/documentation/SwiftUI/Animation/spring(_:blendDuration:))

A persistent spring animation.

[`spring(duration:bounce:blendDuration:)`](/documentation/SwiftUI/Animation/spring(duration:bounce:blendDuration:))

A persistent spring animation. When mixed with other `spring()`
or `interactiveSpring()` animations on the same property, each
animation will be replaced by their successor, preserving
velocity from one animation to the next. Optionally blends the
duration values between springs over a time period.

[`spring(response:dampingFraction:blendDuration:)`](/documentation/SwiftUI/Animation/spring(response:dampingFraction:blendDuration:))

A persistent spring animation. When mixed with other `spring()`
or `interactiveSpring()` animations on the same property, each
animation will be replaced by their successor, preserving
velocity from one animation to the next. Optionally blends the
response values between springs over a time period.

[`interactiveSpring`](/documentation/SwiftUI/Animation/interactiveSpring)

A convenience for a `spring` animation with a lower
`duration` value, intended for driving interactive animations.

[`interactiveSpring(response:dampingFraction:blendDuration:)`](/documentation/SwiftUI/Animation/interactiveSpring(response:dampingFraction:blendDuration:))

A convenience for a `spring` animation with a lower
`response` value, intended for driving interactive animations.

[`interpolatingSpring`](/documentation/SwiftUI/Animation/interpolatingSpring)

An interpolating spring animation that uses a damped spring
model to produce values in the range [0, 1] that are then used
to interpolate within the [from, to] range of the animated
property. Preserves velocity across overlapping animations by
adding the effects of each animation.

[`interpolatingSpring(_:initialVelocity:)`](/documentation/SwiftUI/Animation/interpolatingSpring(_:initialVelocity:))

An interpolating spring animation that uses a damped spring
model to produce values in the range of one to zero.

[`interpolatingSpring(duration:bounce:initialVelocity:)`](/documentation/SwiftUI/Animation/interpolatingSpring(duration:bounce:initialVelocity:))

An interpolating spring animation that uses a damped spring
model to produce values in the range [0, 1] that are then used
to interpolate within the [from, to] range of the animated
property. Preserves velocity across overlapping animations by
adding the effects of each animation.

[`interpolatingSpring(mass:stiffness:damping:initialVelocity:)`](/documentation/SwiftUI/Animation/interpolatingSpring(mass:stiffness:damping:initialVelocity:))

An interpolating spring animation that uses a damped spring
model to produce values in the range [0, 1] that are then used
to interpolate within the [from, to] range of the animated
property. Preserves velocity across overlapping animations by
adding the effects of each animation.

### Creating custom animations

[`init(_:)`](/documentation/SwiftUI/Animation/init(_:))

Create an `Animation` that contains the specified custom animation.

[`timingCurve(_:duration:)`](/documentation/SwiftUI/Animation/timingCurve(_:duration:))

Creates a new animation with speed controlled by the given curve.

[`timingCurve(_:_:_:_:duration:)`](/documentation/SwiftUI/Animation/timingCurve(_:_:_:_:duration:))

An animation created from a cubic Bézier timing curve.

### Configuring an animation

[`delay(_:)`](/documentation/SwiftUI/Animation/delay(_:))

Delays the start of the animation by the specified number of seconds.

[`repeatCount(_:autoreverses:)`](/documentation/SwiftUI/Animation/repeatCount(_:autoreverses:))

Repeats the animation for a specific number of times.

[`repeatForever(autoreverses:)`](/documentation/SwiftUI/Animation/repeatForever(autoreverses:))

Repeats the animation for the lifespan of the view containing the
animation.

[`speed(_:)`](/documentation/SwiftUI/Animation/speed(_:))

Changes the duration of an animation by adjusting its speed.


---

Copyright &copy; 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)