Text Size Animation in SwiftUI

DevTechie Inc

Jun 24, 2022

Change in Text view’s font size is animatable property, but the experience can be a bit choppy.

Let’s first see what I am talking about, then we will explore one of the potential solutions.

struct TextSizeAnimation: View {
    @State private var animate = false
    var body: some View {
        Text("DevTechie")
        .font(.system(size: animate ? 70 : 12))
        .animation(.spring(), value: animate)
        .onTapGesture {
            animate.toggle()
        }
    }
}

Notice the animation:

We can provide a smooth animation experience by applying ScaleEffect on the font. For scale animation, we can start with a large size font, apply a small scale effect, and increase scale with animation toggle as shown below:

struct TextSizeAnimation: View {
    @State private var animate = false
    var body: some View {
        Text("DevTechie")
            .font(.system(size: 70))
            .scaleEffect(animate ? 1 : 0.1)
            .animation(.spring(), value: animate)
            .onTapGesture {
                animate.toggle()
            }
    }
}

With that we have reached the end of this article. Thank you once again for reading. Subscribe to our weekly newsletter at https://www.devtechie.com