Getting Started

Scale effect allows you to scale a SwiftUI view.

Note: The view may become pixelated if scaled up.

Using Scale Effect

A scale of less than 1.0 will scale the view down, while a scale greater than 1.0 will scale the view up. The scaleEffect modifier can be attached to any SwiftUI view.

In the following example, a value of 0.5 is supplied as the scale.

struct ContentView: View {
    var body: some View {
        Text("Small.")
            .scaleEffect(0.5)
    }
}

Likewise, when the scale is above 1.0, the view scales up.

struct ContentView: View {
    var body: some View {
        Text("Big.")
            .scaleEffect(2)
    }
}

Scaling by Axis

There are 2 approaches to scaling by axis. You can use CGSize or directly supply the X and Y values.

The two examples below produce the same results.

struct ContentView: View {
    var body: some View {
        Text("long.")
            .scaleEffect(CGSize(width: 2, height: 1))
    }
}

struct ContentView: View {
    var body: some View {
        Text("long.")
            .scaleEffect(x: 2, y: 1)
    }
}

This works the same in the Y axis / height.

struct ContentView: View {
    var body: some View {
        Text("tall.")
            .scaleEffect(CGSize(width: 1, height: 2))
    }
}

struct ContentView: View {
    var body: some View {
        Text("tall.")
            .scaleEffect(x: 1, y: 2)
    }
}

When using the .scaleEffect(x: …, y: …) implementation, the x and y values can be omitted if the intended scale is 1.

struct ContentView: View {
    var body: some View {
        Text("tall.")
            .scaleEffect(y: 2)
    }
}

Scaling and Layout

Important Note: The View's frame does not change when it is scaled.

Notice how, in the following example, the red border is around the "original frame" of the View. This may cause unexpected behaviour when laying out views, especially when embedding inside a HStack and VStack. If a View is scaled up, the scaled View may overlap onto other surrounding views.

struct ContentView: View {
    var body: some View {
        Text("big.")
            .scaleEffect(2)
            .border(.red)
    }
}

Going Further

Scaling with Anchors

Anchors allow you to control how a given View scales. You can set the anchor to any direction. By default, the anchor is center.

In the following example, when supplied with a .bottomTrailing anchor, the Text scales down, while anchored to the bottom trailing edge.

There are nine different alignment options

• topLeading: The top left edge for left-to-right languages like English, top right edge for right-to-left languages like Arabic

• top: The top center edge

• topTrailing: The top right edge for left-to-right languages like English, top left edge for right-to-left languages like Arabic

• leading: The center left edge for left-to-right languages like English, center right edge for right-to-left languages like Arabic

• center: The center

• trailing: The center right edge for left-to-right languages like English, center left edge for right-to-left languages like Arabic

• bottomLeading: The bottom left edge for left-to-right languages like English, bottom right edge for right-to-left languages like Arabic

• bottom: The bottom center edge

• bottomTrailing: The bottom right edge for left-to-right languages like English, bottom left edge for right-to-left languages like Arabic

struct ContentView: View {
    var body: some View {
        Text("small.")
            .scaleEffect(0.5, anchor: .bottomTrailing)
            .border(.red)
    }
}

Custom Anchors

You can define a custom anchor if none of the pre-defined alignment-based anchors work for your needs. For example, if you want a view to be anchored 40% on the x axis, and 10% on the y axis.

Do note that the axis starts from the top, 0, 0 is the top leading corner.

struct ContentView: View {
    var body: some View {
        Text("small.")
            .scaleEffect(0.5, anchor: UnitPoint(x: 0.4, y: 0.1))
            .border(.red)
    }
}

Scaling with Animation

You can control the scale with a State variable.

In the following example, when the Button is tapped, the Text's scale will double.

struct ContentView: View {
    
    @State private var scale = 1.0
    
    var body: some View {
        Text("scalable text.")
            .scaleEffect(scale)
        
        Button("Scale") {
            scale = 2
        }
    }
}

To animate the transition, you can wrap the State change in a withAnimation block.

To find out more about the various options to customize the animation speed, curve, and more, check out the withAnimation article.

struct ContentView: View {
    
    @State private var scale = 1.0
    
    var body: some View {
        Text("scalable text.")
            .scaleEffect(scale)
        
        Button("Scale") {
            withAnimation {
                scale = 2
            }
        }
    }
}