SwiftUI Spring Animations Cheat Sheet for Developers

Try the new Spring Animation in SwiftUI: Snippet

Animate chat bubbles an extra bounce spring

Springy Duo: Available soon

Download and try the companion Mac App: MotionScape - Animation Studio

Check the companion open-source project: MotionScape - Animation Studio

Realistic Chain: Swift file

Unlock the secrets of iOS spring animations using SwiftUI. Learn all the SwiftUI spring animation types, understand their parameters, and discover how to create organic and fine-grained spring animations to enhance the user experience of your next iOS app.

Watch the video: (YouTube tutorial)

A Chained Spring: Swift file

A Bouncy Transition: Swift file

Transition a hamburger menu to a back icon Swift file

SwiftUI Spring Animation Types

1 .spring()

A spring with no parameters. It applies gentle and sensible spring-feel to the object you want to animate.

Menu - Close icon transition: Swift file

2 .interactiveSpring()

An interactive spring with no parameters. This creates a spring animation with high stiffness and low response. It makes the animation is less snappy:

Menu - Close icon transition: Swift file

3 .interpolatingSpring(stiffness, damping)

This allows you to create a spring animation that is based on stiffness and damping.

Stiffness: It is defined as the tensile strength of the spring. A higher stiffness will result in snappier animations. This affects the force applied to the object
and changes how quickly the object moves towards its target.
Damping: You can think of damping as the braking of a car or the back-drag frictional force on the surface the object is resting on. Its purpose is to stop the object over time. It also affects the ability to overshoot the object. Hint: Start with a damping of 15 and stiffness of 170. Reducing the
damping for example, to a value of 5 will create a spring animation that has higher bounciness.

Chat message reactions: Swift file

4 .interpolatingSpring(mass, stiffness, damping, initialVelocity)

This allows you to create a spring animation that is based on mass, stiffness, damping, and initial velocity. Default values: .interpolatingSpring (mass: Double = 1.0, stiffness: Double, damping: Double, initialVelocity: Double = 0.0).

Mass: Think of mass as the weight of the object animating. It changes the inertial of the object attached to the spring. That is the willingness of an object to move or stop moving. It is conceptually heavier and can be used to create a spring animation that overshoots. The heavier the mass, the longer it takes to move the object, speed it up, and slow it down.
Initial Velocity: The initial velocity is defined as the speed at which the animation object changes at the beginning of the animation. The default initial velocity is set to zero. It is measured in units per second of the animation.

Chat message reactions (Heart icon): Swift file

5 .spring(response, dampingFraction, blendDuration)

This allows you to create a spring animation that is based on response, damping fraction, and blend duration. Default values: .spring (response: Double = 0.55, dampingFraction: Double = 0.825, blendDuration: Double = 0). A higher response value will slow down the animation. A lower response speeds it up.

Response: It controls how quickly an animating property value will try and get to a target. You can use the response to create an infinitely-stiff spring by setting its value to zero.
Damping Fraction: Damping fraction causes a gradual reduction in the spring's oscillation. Using damping fraction, you can define how rapidly the
oscillations decay from one bounce to the next. Additionally, you can damp the spring in the following ways:
- Over Damping: Set the damping fraction to a value greater than 1. It lets the object you are animating, quickly return to the rest position.
- Critical Damping: Set the damping fraction = 1. It lets the object return to the rest position within the shortest possible time.
- Under Damping: Set the damping fraction to be less than 1. It lets the object overshoot multiple times passing the rest position and gradually reaching the rest position.
- Undamped: Set the damping fraction = 0. This lets the object oscillate forever.
Blend Duration: Blend duration is a frame of time during which a previous animation stops and the next animation starts. Changing the blend duration of any of the examples in this repository, does not produce any visual change. This makes it difficult to see what it actually does.

Chat message reactions (Thumbs up icon): Swift file

6 .interactiveSpring(response, dampingFraction, blendDuration)

This allows you to create a spring animation that is based on response, damping fraction, and blend duration. Default values: interactiveSpring (response: Double = 0.15, dampingFraction: Double = 0.86, blendDuration: Double = 0.25). You can use this spring as an alternative to .spring(response, dampingFraction, blendDuration). Always start with the default values above. To check the default values in XCode, Control-click the spring modifier and select "Show Quick Help". The thumbs down animation below uses this spring. The damping fraction is inversely proportional to the springiness of the animation. Reducing the default damping fraction will make the animation bouncier. As mentioned in step 5 above, blend duration has no visible effect on the spring, at the time of writing this article.

Chat message reactions (Thumbs down icon): Swift file

SwiftUI Spring Animation Properties and Effects

SwiftUI Spring Animation Examples

Proceed with TouchID: Swift file

Text Spring 1: Swift file

Heart Icon Animation: Twitter Like Reaction Clone Swift file (coming soon)

Animated Font Weight:

import SwiftUI

struct AnimateFont: View {
    @State private var isMagicallyMoving = false
    
    var body: some View {
        Text("Animate SwiftUI Text Like Your Boss' Boss!")
            .font(isMagicallyMoving ? .title : .largeTitle)
            //.fontWeight(isMagicallyMoving ? .black : .ultraLight)
            .multilineTextAlignment(.center)
            .foregroundColor(isMagicallyMoving ? .indigo : .cyan)
            .animation(.interpolatingSpring(stiffness: 170, damping: 15).repeatForever(autoreverses: true), value: isMagicallyMoving)
            .onAppear {
                isMagicallyMoving.toggle()
            }
    }
}

Text Spring 2: Swift file

Chat Emojis: Swift file

Draggable Menu ( Inapired by Hackingwithswift): Swift file

Silent Mode: On

Animate a bell to fall and rotate after falling. It is similar to the iOS silent mode (on) animation. Since this animation emulates the presence of sound, it uses a very low damping to create a high bounce. Swift file

Silent Mode: Off

Animate a slashed bell to fall and rotate after falling. It uses a rectangular mask to show and hide the bell icon. Since this animation simulates the absence of sound, it uses moderate damping to prevent the bell from bouncing. Swift file