Ever tried to add a simple expand/collapse animation to a SwiftUI List and watched in horror as your beautiful animation turned into a janky mess? You’re not alone. I faced this issue a couple of months ago and thanks to Donny Wals, I decided to publish my findings.

Let me walk you through the journey of solving this problem, complete with all the failed attempts and eventual success.

The Goal

We want a simple expandable view: a tappable title that reveals additional content when clicked. For our example, let’s use these simple components:

struct TitleView: View {
    var body: some View {
        Text("Tap to expand/collapse")
            .font(.headline)
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding()
            .contentShape(Rectangle())
    }
}

struct DetailView: View {
    var body: some View {
        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")
            .font(.body)
            .fixedSize(horizontal: false, vertical: true)
            .padding()
    }
}

Now let’s build a typical expandable view:

struct TypicalExpandableView: View {
    @State private var isExpanded = false

    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            TitleView()
                .onTapGesture {
                    isExpanded.toggle()
                }

            if isExpanded {
                Divider()
                DetailView()
                    .transition(.opacity)
            }
        }
        .background(AppColor.backgroundSecondary)
        .cornerRadius(8)
        .animation(.default, value: isExpanded)
    }
}

Simple, right? And it works beautifully in a regular VStack or LazyVStack. The content smoothly animates in and out, everything looks great.

Let’s put our TypicalExpandableView into a List and see what happens.

Oof. That’s… not great. The content just jumps into existence. The List cell snaps to its new height without any smooth transition. It works perfectly in a VStack or LazyVStack, but in a List? Not so much.

Second Attempt: Tweaking the Animation

Maybe we just need to be more explicit with our animations? Let’s try wrapping the toggle in withAnimation and adding an .id() to help SwiftUI track the view:

struct TweakedExpandableView: View {
    @State private var isExpanded = false

    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            TitleView()
                .onTapGesture {
                    withAnimation {
                        isExpanded.toggle()
                    }
                }

            if isExpanded {
                Divider()
                DetailView()
                    .transition(.opacity)
            }
        }
        .background(AppColor.backgroundSecondary)
        .cornerRadius(8)
        .id("static")
    }
}

Better! But still not smooth. The animation is less jarring, but we’re still getting that awkward jump. List cells just don’t like conditional content appearing and disappearing.

Third Attempt: The Built-In Solution

“Wait,” you might think, “doesn’t SwiftUI have a built-in component for this?”

Yes! Meet DisclosureGroup:

struct DisclosureExpandableView: View {
    @State private var isExpanded = false

    var body: some View {
        DisclosureGroup(
            isExpanded: $isExpanded,
            content: {
                DetailView()
            },
            label: {
                TitleView()
            }
        )
        .background(AppColor.backgroundSecondary)
        .cornerRadius(8)
    }
}

Finally, a smooth animation! DisclosureGroup works perfectly in Lists. So… problem solved?

Not quite. DisclosureGroup comes with some limitations, mainly the lack of customization options. If you’re OK with the default disclosure indicator animation and animation timing, like on your rarely visited settings screen, you’re fine. But for a custom-designed UI, we need more control.

Fourth Attempt: Animating cell height

After some experimentation, I found that using an Animatable view that can animate its height works nicely even in a List. Here is the proof-of-concept implementation:

struct AnimatableRedBox: View, Animatable {
    var animatableData: CGFloat

    var body: some View {
        Color.red
            .frame(height: animatableData)
    }
}

struct AnimatableExpandableView: View {
    @State private var isExpanded = false

    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            TitleView()
                .onTapGesture {
                    withAnimation {
                        isExpanded.toggle()
                    }
                }

            AnimatableRedBox(animatableData: isExpanded ? 100 : 0)
        }
        .background(AppColor.backgroundSecondary)
        .cornerRadius(8)
        .id("static")
    }
}

Aha! The red box animates smoothly in the List. By implementing Animatable and animating a single CGFloat value, SwiftUI smoothly interpolates between states. The List knows exactly what height the cell should be at every frame of the animation.

The Final Solution

Now we just need to generalize this approach to work with any content - not just a fixed-height red box, but dynamic text and self-sizing views. Here is my implementation of a simple expandable component I’m using in my codebase. Having the detail view in an overlay ensures that the detail text doesn’t change during expansion/collapsing. It allows you to tweak the detail animation even more with offsets/scales/distortions or more ;)

struct ExpandableBaseView<Header: View, Content: View>: View, Animatable {
    var animatableData: CGFloat

    let header: Header
    let content: Content

    @State var baseFrame: CGRect = .zero
    @State var expansionFrame: CGRect = .zero

    init(animatableData: CGFloat,
         @ViewBuilder header: () -> Header,
         @ViewBuilder content: () -> Content) {
        self.animatableData = animatableData
        self.header = header()
        self.content = content()
    }

    var expandedContent: some View {
        content
            .opacity(animatableData)
            .getFrame($expansionFrame, space: .local)
            .offset(y: baseFrame.height)
    }

    var body: some View {
        ZStack(alignment: .bottom) {
            header
                .frame(maxWidth: .infinity)
                .getFrame($baseFrame, space: .local)
                .overlay(expandedContent, alignment: .top)
        }
        .frame(height: baseFrame.height + expansionFrame.height * animatableData,
               alignment: .top)
    }
}

struct WorkingExpandableView: View {
    @State private var isExpanded = false

    var body: some View {
        ExpandableBaseView(
            animatableData: isExpanded ? 1 : 0,
            header: {
                TitleView()
                    .onTapGesture {
                        withAnimation() {
                            isExpanded.toggle()
                        }
                    }
            },
            content: {
                DetailView()
            }
        )
        .background(AppColor.backgroundSecondary)
        .cornerRadius(8)
    }
}

Perfect! Smooth animation, works in Lists, and supports any content you throw at it.

How It Works

The magic happens by:

1. Implementing Animatable - Animates a single value from 0 to 1 when toggling isExpanded flag
2. Measuring content sizes - Uses SwiftUI’s GeometryReader to measure both header and expanded content
3. Calculating exact heights - Sets frame height to headerHeight + contentHeight * progress
4. Positioning content - Uses overlays and offsets to position expanded content below the header

The content exists during the entire animation - it’s just scaled from 0 to full height smoothly.

The Frame Measurement Helper

The getFrame() helper is a custom view modifier that uses GeometryReader and preference keys to measure view dimensions without affecting layout. Here’s how it works:

struct FrameMeasurePreferenceKey: PreferenceKey {
    typealias Value = [String: CGRect]

    static var defaultValue: Value = [:]

    static func reduce(value: inout Value, nextValue: () -> Value) {
        value.merge(nextValue()) { $1 }
    }
}

struct MeasureFrameViewModifier: ViewModifier {
    @Binding var frame: CGRect
    let space: CoordinateSpace
    @State private var frameId = UUID()

    func body(content: Content) -> some View {
        content
            .background(
                GeometryReader { geometry in
                    Color.clear
                        .preference(
                            key: FrameMeasurePreferenceKey.self,
                            value: ["frame_\(frameId)": geometry.frame(in: space)]
                        )
                }
            )
            .onPreferenceChange(FrameMeasurePreferenceKey.self) { preferences in
                if let frame = preferences["frame_\(frameId)"] {
                    self.frame = frame
                }
            }
    }
}

extension View {
    func getFrame(_ frame: Binding<CGRect>, space: CoordinateSpace) -> some View {
        modifier(MeasureFrameViewModifier(frame: frame, space: space))
    }
}

This utility:

• Uses a hidden GeometryReader in the background to measure view size
• Reports the measurement through SwiftUI’s preference system
• Doesn’t interfere with the view’s layout or appearance
• Updates automatically when the view’s size changes

With this helper, ExpandableBaseView can dynamically measure both the header and content sizes, then calculate the exact height needed at each point in the animation.

Wrapping Up

I hope you find this useful! Let me know if you run into any troubles, or even a happy smiley face in DMs is rewarding. Get in touch on Twitter!

Aaand Happy animating! 🎨

In this post, I will introduce you to an alternate and better approach - rendering the particles with the Canvas view. So let’s get into it 💪.

Setup

We will start with the following view outline:

struct ParticleCanvasView: View {
    
    var body: some View {
        TimelineView(.animation) { context in
            Canvas { context, size in
	       let particleSymbol = context.resolveSymbol(id: 0)!
                let position = CGPoint(x: size.width/2, y: size.height/2)                    
                context.draw(particleSymbol, at: position, anchor: .center)
            } symbols: {
                SingleParticleView()
                    .tag(0)
            }
        }
    }
}

This view features an outer TimelineView that ensures its content (inner view) is regularly re-drawn. (note the .animation parameter allowing the system to decide the optimal refresh rate) The content here is a Canvas view. Those of you who come from good old UIKit days might be already familiar with the concept of the drawing context. In simple words, we get a canvas area with the view dimensions and we can draw/rasterize various entities on it - like shapes and images.

In our case, we will draw a single particle represented with a SingleParticleView. Please note, how the SingleParticleView is being used as a drawing element. It is added to a symbols parameter allowing SwiftUI to pre-render it and thus be very performant later in the drawing calls - thus an ideal candidate for the many particles in the place ;)

At this moment, let’s just set the SingleParticleView as an orange dot, but we will tune it soon

struct SingleParticleView: View {
    var body: some View {
        Circle().fill(Color.orange)
            .frame(width:35, height:35)
    }
}

So far, we have managed to draw a small orange dot, but it is about to change soon ;)

I like to move it

Now, let’s move that particle.

I will build here a fire-ish effect blending multiple upwards moving particles - so as a good start let’s periodically move the single particle up from the canvas bottom:

struct ParticleCanvasView: View {
    let movementDuration = 2.0
    
    var body: some View {
        TimelineView(.animation) { context in
            let timeInterval = context.date.timeIntervalSinceReferenceDate;
            
            let time = timeInterval.truncatingRemainder(dividingBy: movementDuration)/movementDuration
            
            Canvas { context, size in
                let particleSymbol = context.resolveSymbol(id: 0)!
                let position = CGPoint(x: size.width/2, y: (1-time)*size.height)
                    
                context.draw(particleSymbol, at: position, anchor: .center)
            } symbols: {
                SingleParticleView()
                    .tag(0)
            }
        }
    }
}

You can see, that I am controlling the upwards movement with the time variable. What exactly is it in this context? Well, the timeline view already gives us access to the time property, but for our use, I want to have something normalized that can be easily bound with the particle movement. I want the particle movement to take exactly 2 seconds (see movementDuration) so the code computes time as a truncating remainder, making sure it will periodically grow from 0 to 1 forever. As you can see in the following video:

Remember goniometry?

As a next step, we will upgrade the movement from the simple linear to something more firey :). My perception of fire movement is that it is waving, so let me change the code to move the particle along a cosinus wave whose amplitude is smaller the higher the particle is:

struct ParticleCanvasView: View {
    let movementDuration = 2.0
    
    func particlePosition(timeInterval: Double, canvasSize: CGSize) -> CGPoint {
        let time = timeInterval.truncatingRemainder(dividingBy: movementDuration)/movementDuration
        let rotations:CGFloat = 3
        let amplitude: CGFloat = 0.1+0.8*(1-time)
        let x = canvasSize.width/2 + cos(rotations*time*CGFloat.pi*2)*canvasSize.width/2*amplitude
        
        return CGPoint(x: x, y: (1-time)*canvasSize.height)
    }
    
    var body: some View {
        TimelineView(.animation) { context in
            let timeInterval = context.date.timeIntervalSinceReferenceDate;
            
            Canvas { context, size in
                let particleSymbol = context.resolveSymbol(id: 0)!
                let position = particlePosition(timeInterval: timeInterval, canvasSize: size)
                
                context.draw(particleSymbol, at: position, anchor: .center)
            } symbols: {
                SingleParticleView()
                    .tag(0)
            }
        }
    }
}

please note the position computation was moved to a separate function so the Canvas content remains clean.

Make it many

At this point, I am quite happy with the movement. I am sure we will fine-tune the constants here and there, but that can come later. Now, we want to draw more particles so let’s wrap the drawing into the for-cycle like this:

let particleCount = 100
// …
for i in 0..<particleCount {
    let position = particlePosition(timeInterval: timeInterval+(Double(i)/Double(particleCount)), canvasSize: size)
    context.draw(particleSymbol, at: position, anchor: .center)
}

Randomize

We can finally see more particles, but they all share the same path, so let me initiate each particle with random starting wave rotation and starting time offset:

struct ParticleCanvasView: View {
    let movementDuration: Double
    let particleCount: Int
    let startingParticleOffsets: [CGFloat]
    let startingParticleAlphas: [CGFloat]
    
    init(particleCount: Int = 200, movementDuration: Double = 3.0) {
        self.particleCount = particleCount
        self.movementDuration = movementDuration
        self.startingParticleOffsets = Array(0..<particleCount).map {_ in CGFloat.random(in: 0...1)}
        self.startingParticleAlphas = Array(0..<particleCount).map {_ in CGFloat.random(in: 0...CGFloat.pi*2)}
    }
    
    func particlePosition(index: Int, timeInterval: Double, canvasSize: CGSize) -> CGPoint {
        let startingRotation: CGFloat =  startingParticleAlphas[index]//CGFloat(index)/CGFloat(particleCount)*CGFloat.pi
        let startingTimeOffset = startingParticleOffsets[index]*movementDuration
        
        let time = (timeInterval+startingTimeOffset).truncatingRemainder(dividingBy: movementDuration)/movementDuration
        let rotations:CGFloat = 3
        let amplitude: CGFloat = 0.1+0.8*(1-time)
        
        let x = canvasSize.width/2 + cos(rotations*time*CGFloat.pi*2+startingRotation)*canvasSize.width/2*amplitude
        
        return CGPoint(x: x, y: (1-time)*canvasSize.height)
    }

Improving the effect appearance

In terms of particle motion, I consider this done, but we still need to fine-tune this effect’s appearance to get some juiciness.

The first improvement is changing the particle opacity during the opacity movement - this is quite simple by changing the context opacity before a draw call:

context.opacity = positionAndAlpha.1

Next, let’s utilize the blending capabilities of SwiftUI and set the particle appearance like this:

struct SingleParticleView: View {
    var body: some View {
        Circle().fill(Color.orange.opacity(0.4))
            .frame(width:35, height:35)
            .blendMode(.plusLighter)
            .blur(radius: 10)
    }
}

We make particles here as a nice big blurry spots, that blends together to form a fire volume. The blendMode(.plusLighter) combines overlapping orange dots, effectively brightening the result where the patrticles intersect.

At this point, I am still not very happy with the result and will need to introduce more tweaks. This is very typical in such a creative process that your initial idea is not exactly aligned with the implementation and you are required to iterate on it.

The thing that bothers me is that the particles are more dense at the top of the view, while I would prefer otherwise. To fix that, let me get rid of the even y-axis distribution and adjust the y-coordinate like this:

let y = (1-time*time)*canvasSize.height

Also, I would like to boost the particle vanishing effect so let me decrease the particle opacity with time.

The final effect I am happy with is:

struct ParticleCanvasView: View {
    let movementDuration: Double
    let particleCount: Int
    let startingParticleOffsets: [CGFloat]
    let startingParticleAlphas: [CGFloat]
    
    init(particleCount: Int = 200, movementDuration: Double = 3.0) {
        self.particleCount = particleCount
        self.movementDuration = movementDuration
        self.startingParticleOffsets = Array(0..<particleCount).map {_ in CGFloat.random(in: 0...1)}
        self.startingParticleAlphas = Array(0..<particleCount).map {_ in CGFloat.random(in: 0...CGFloat.pi*2)}
    }
    
    func particlePositionAndAlpha(index: Int, timeInterval: Double, canvasSize: CGSize) -> (CGPoint, CGFloat) {
        let startingRotation: CGFloat = startingParticleAlphas[index]
        let startingTimeOffset = startingParticleOffsets[index]*movementDuration
        
        let time = (timeInterval+startingTimeOffset).truncatingRemainder(dividingBy: movementDuration)/movementDuration
        let rotations:CGFloat = 1.5
        let amplitude: CGFloat = 0.1+0.8*(1-time)
        
        let x = canvasSize.width/2 + cos(rotations*time*CGFloat.pi*2 + startingRotation)*canvasSize.width/2*amplitude*0.8
        let y = (1-time*time)*canvasSize.height
        
        return (CGPoint(x: x, y: y), 1-time)
    }
    
    var body: some View {
        TimelineView(.animation) { context in
            let timeInterval = context.date.timeIntervalSinceReferenceDate;
            
            Canvas { context, size in
                let particleSymbol = context.resolveSymbol(id: 0)!
                
                for i in 0..<particleCount {
                    let positionAndAlpha = particlePositionAndAlpha(index: i, timeInterval: timeInterval, canvasSize: size)
                    context.opacity = positionAndAlpha.1
                    context.draw(particleSymbol, at: positionAndAlpha.0, anchor: .center)
                }
            } symbols: {
                SingleParticleView()
                    .tag(0)
            }
        }
    }
}

Your turn!

Now it is your time to get creative!

Things to try

• change particle appearance
• change particle movement paths
• combine multiple particle types
• react to user inputs
• 💫 …

Here is a result of more experiments and adjustments:

Enjoy! And let me know, if you find this article helpful, and send me your animations on Twitter.

In this post, we will play with the .distortionEffect and learn, how to utilize it for creating custom transitions, like this:

Kickstart

Let’s start with the simple Hello world view and set a basic .distortion effect for the view:

struct DemoView: View {
    
    var shader: Shader {
        let shaderLibrary = ShaderLibrary.default
        return Shader(function: ShaderFunction(library: shaderLibrary, name: "demoShader"), arguments: [])
    }
    
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
            Text("Hello, distortionEffect!")
        }
        .padding()
        .background(Color.blue.opacity(0.1))
        .distortionEffect(self.shader, maxSampleOffset: CGSize(width: 500, height: 500))
        .overlay(Rectangle().stroke(Color.blue)) // adding stroke so we see bounds of our view
    }
}

We need to add a new Metal file to our Xcode project and define the shader function there. As the documentation says: For a shader function to act as a distortion effect it must have a function signature matching:

[[ stitchable ]] float2 name(float2 position, args...)

which tells us, that the function can “alter” the position of every pixel of our View. So in the minimum variation, the Shader can look like this

#include <metal_stdlib>
using namespace metal;

[[ stitchable ]] float2 demoShader(float2 position) {
    return position;
}

This is a fully working shader, but you cannot see any effect on the view as it is basically an identity function that just returns the input positions.

But with just a few simple alterations to the return value, you start seeing how the view image changes. For example, you can switch the x and y axis and get transposed view.

[[ stitchable ]] float2 demoShader(float2 position) {
    return float2(position.y, position.x);
}

Notice, that the shader cannot extend our view dimensions, so if we are transposing the rectangular view, the result will be cropped. But we learned an important lesson here: if we are returning an invalid position from the shader, it just leaves the pixel transparent. And this fact we are gonna utilize for the transitions later.

But before we move to that, let’s see, how to extend the shader with more parameters. From the initial function signature we see, that the shader is not aware of the view frame, so naturally, we want to provide at least that parameter. Adding a new param is simple as that, just extend the function with more parameters and provide those parameters in the SwiftUI part like so.

Very easily, we are now able to create waved distortion effect using the shader:

[[ stitchable ]] float2 demoShader(float2 position, float2 size) {
    float f = sin(position.x/size.x*M_PI_F*2);
    return float2(position.x, position.y+f*20);
}

The full view with applied shader with parameter is now:

struct DemoView: View {
    
    let size: CGPoint = CGPoint(x: 300, y: 200)
    
    var shader: Shader {
        let shaderLibrary = ShaderLibrary.default
        return Shader(function: ShaderFunction(library: shaderLibrary, name: "demoShader"), arguments: [.float2(self.size)])
    }
    
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
            Text("Hello, distortionEffect!")
        }
        .frame(width: size.x, height: size.y)
        .background(Color.blue.opacity(0.1))
        .distortionEffect(self.shader, maxSampleOffset: CGSize(width: 500, height: 500))
        .overlay(Rectangle().stroke(Color.blue)) // adding stroke so we see bounds of our view
    }
}

Try to experiment with the shader parameters and messing the output with various functions. How fun, right?

Transitions

Now, let’s utilize what we have learned to build a custom view transition. I want to create an effect, that shifts away the content of the view like so:

for that, I extend the shader with one more parameter named effectValue, which controls the offset and the skew of the view content. My shader looks like this:

[[ stitchable ]] float2 demoShader(float2 position, float2 size, float effectValue) {
    float skewF = 0.1*size.x;
    float yRatio = position.y/size.y;
    
    float positiveEffect = effectValue*sign(effectValue);
    float skewProgress = min(0.5-abs(positiveEffect-0.5), 0.2)/0.2;
    
    float skew = effectValue>0 ? yRatio*skewF*skewProgress : (1-yRatio)*skewF*skewProgress;
    float shift = effectValue*size.x;
    
    return float2(position.x+(shift+skew*sign(effectValue)), position.y);
}

The shader is result of some experimentation session trying to tweak the behavior so it works also for the negative effect values. The goal is to use positive value for insertion transition and negative for removal. While testing, I am using a simple slider just to be sure that it behaves correctly for all effectValues between -1 and 1.

Once we are happy with the basic effect, we just wrap it into a view modifier. (I am keeping the size parameter as a constant just for the simplicity of the code snippet. OFC, you can set it dynamically from the actual geometry)

struct ShiftTransitionModifier: ViewModifier {
    let size: CGPoint = CGPoint(x: 300, y: 200)
    var effectValue: CGFloat = 0
    
    var shader: Shader {
        let shaderLibrary = ShaderLibrary.default
        return Shader(function: ShaderFunction(library: shaderLibrary, name: "demoShader"), arguments: [.float2(self.size), .float(self.effectValue)])
    }
    
    func body(content: Content) -> some View {
        content
            .frame(width: self.size.x, height: self.size.y)
            .distortionEffect(self.shader, maxSampleOffset: CGSize(width: 500, height: 500))
    }
}

And the last step is to use the modifier for a custom Transition definition:

let insertionTransition: AnyTransition = .modifier(active: ShiftTransitionModifier(effectValue: 1), identity: ShiftTransitionModifier(effectValue: 0))
let removalTransition: AnyTransition = .modifier(active: ShiftTransitionModifier(effectValue: -1), identity: ShiftTransitionModifier(effectValue: 0))

let shiftTransition: AnyTransition = .asymmetric(insertion: insertionTransition, removal: removalTransition)

And we are done.

One more thing

If you are wondering, how does the shader look like for the transition from the beginning of this article, it is here: (Notice, the shader looks much nicer due to after-experimentation optimizations and utilizing vector operations)

[[ stitchable ]] float2 slideAwayShader(float2 position, float2 size, float time, float direction) {
    float2 c = size/2;
    float2 v = position - c;
    
    float f = (direction > 0 ? position.x : (size.x - position.x) )/size.x;
    
    if ( time > f ) {
        float mul = (time-f)/(1-f);
        return c + v*mul;
    }
    else {
        return float2(-1, -1);
    }
}

Your turn!

Now it is your time to get creative!

Let me know, if you find this article helpful, and send me your animations on Twitter.

This is a widespread structure in various apps and a very common way how to code it in SwiftUI:

HStack(spacing: 12) {
	Text(self.text)
	Spacer()
	Image(systemName: "tortoise.fill")
}

At first glance, everything looks fine. But what if the text starts to overflow? Suddenly it feels, that the wrapping leaves too much space between the text and the trailing icon even though we have set it to some fixed value…

Hmm, let’s examine by replacing the views with just colors:

HStack(spacing: 12) {
	Color.blue
	Spacer()
	Color.red
}

Aha, we are right! The space between is twice as wide as it should be. So the Stack here, even though the spacer does not add anything, puts declared spaces around it.

So how to fix it? You can either remove the spacing parameter from the stack and use explicit padding to its child views, or IMO more convenient way is to make one of the views stretchable using a .frame modifier and setting its maxWidth attribute to .infinity like so:

HStack(spacing: 12) {
	Text(self.text)
		.frame(maxWidth: .infinity, alignment: .leading)
	Image(systemName: "tortoise.fill")
}

Let’s compare the behavior of before and after approaches:

I personally like the latter solution as it

• brings simpler code structure
• has the flexibility to set the alignment of the stretched view (ideal for centering of the view content when needed)
• prevents padding/spacing issues when having optional views in the Stacks

Please note, that it is not the most performant way how to deal with particle effects in SwiftUI. If you need to go crazy about blending and high particle count, there are better ways:

• using the Canvas view (see Magical Particle Effects with SwiftUI Canvas
• embed SpriteKit view
• using MetalKit But more on these another time ;)

Enjoy!

In this article, we will go through all important parts related to the implementation of transitions in SwiftUI - from the very basics to more advanced techniques. At the end of this article, you will be able to implement transitions like this:

Triggering the transition

Let us remind, what the transition is:

Transition is an animation that might be triggered when some View is being added to or removed from the View hierarchy

In practice, the change in the view hierarchy can usually come from the conditional statements, so let us have a look at the following example.

struct BasicTransitionView: View {
    @State var showText = false
    
    var body: some View {
        VStack {
            if (self.showText) {
                Text("HELLO WORLD")
            }
            Button(action: {
                withAnimation() {
                    self.showText.toggle()
                }
            }) {
                Text("Change me")
            }
        }
    }
}

There is a Text that is displayed only in the situation when showText is true. It is important to mention:

• The state change needs to be done withing withAnimation() block. If you explicitly state the animation here, it will affect the transition timing curve and duration.
• By default, the transition is fade in /fade out. We will see below, how to change it
• Note how layout changes and adapts to additional view causing the button itself to jump a bit lower. This behavior is completely valid for our situation with VStack, just keep in mind that inserted/removed view may affect surrounding views.

A transition may be triggered also when changing .id() of a view. In such situation, SwiftUI removes the old View and creates a new one which may trigger transition on both old and new views.

Basic transitions

To change the default transition we can set up a new one using .transition view modifier. There are several types already available for basic view transformations

• .scale
• .move
• .offset
• .slide
• .opacity

In our example, let me demonstrate the usage of move transition that shifts view being added/removed from/towards the leading edge of its frame. We just need to apply .transition(.move(edge: .leading)) to our text view.

Feel free to experiment with the other types.

Combining transitions

The list of basic transitions is pretty short and most probably would not be sufficient, but luckily we can create more complex transitions with two powerful mechanisms

• transition combination
• transition created from any view modifier

You can combine two transitions using .combine(with:) method that returns a new transition that is the result of both transitions being applied.

The amount of transition combinations is not limited, so for example this combination of opacity, scale and move transition is perfectly fine:

.transition( AnyTransition.move(edge: .leading).combined(with: AnyTransition.opacity).combined(with: .scale) )

Asymetric transitions

In case you require to perform different transition on removal than on insertion, it is possible to create asymetric transition using the static function asymmetric(...), for example

.transition( AnyTransition.asymmetric(insertion: .scale, removal: .opacity))

Asymetric transitions are especially handy in situations when the inserted view could overlap the removed view and thus produce unaesthetic animation.

Custom transitions

The creative part begins with the possibility to define your own transition based on view modifiers. Let me start with a very simple example to demonstrate the basics.

Here is a custom view modifier that masks the view with a rounded rectangle shape. The value parameter is expected to have values between 0 and 1 when 0 clips the view entirely and 1 reveals the full view.

struct ClipEffect: ViewModifier {
    var value: CGFloat
    
    func body(content: Content) -> some View {
        content
            .clipShape(RoundedRectangle(cornerRadius: 100*(1-value)).scale(value))
    }
}

Now, we can define custom transition that applies this effect as follows:

.transition(AnyTransition.modifier(active: ClipEffect(value: 0), identity: ClipEffect(value: 1)))

Note: To ease future re-usability, it may be beneficial to define your transitions as static members of AnyTransition:

extension AnyTransition {
    static var clipTransition: AnyTransition {
        .modifier(
            active: ClipEffect(value: 0),
            identity: ClipEffect(value: 1)
        )
    }
}

when used at our example .transition(.clipTransition), the result looks like this:

Please note that:

• modifier transition depends on two states: active and identity. Identity is applied when the view is fully inserted in the view hierarchy and active when the view is gone.
• During the transition, SwiftUI interpolates between these two states, and thus the type of active and identity modifier needs to be the same! (XCode will complain otherwise)

Mastering transitions

So far we went through quite basic stuff so maybe, you have not realized how powerful all these things are. Making a transition from custom view modifiers allows you to unleash your creativity and with a little help of Geometry Effect, AnimatableModifier or blending modes you can create transitions that stand out. Let me showcase several examples:

Counting up transition

Handy for score or achievement screens, count up to the value of Text view using this simple AnimatableModifier:

struct CountUpEffect: AnimatableModifier {
    var value: CGFloat
    
    var animatableData: CGFloat {
        get { return value }
        set { value = newValue }
    }
    
    func body(content: Content) -> some View {
        Text("\(self.value, specifier: "%.1f")")
            .font(.title)
            .foregroundColor(self.value<100 ? .primary : .red)
    }
}

In this case, we need to provide a parameter to the transition itself, so I have prepared simple extension that will provide us with the right transition:

extension AnyTransition {
    static func countUpTransition(value: CGFloat)->AnyTransition {
        return AnyTransition.modifier(active: CountUpEffect(value: 0), identity: CountUpEffect(value: value))
    }
}

And for the sake of excercise, we will combine it with the .scale transition when applied to the view:

.transition(AnyTransition.countUpTransition(value: self.textValue).combined(with: .scale))

Taking content apart

Combining several layers of content in the view modifier is my absolute favorite way to create unique transitions. The sliding door transition is a nice way how to demonstrate this approach

Once again, let me start with the effect itself:

struct SlidingDoorEffect: ViewModifier {
    let shift: CGFloat
    
    func body(content: Content) -> some View {
        let c = content
        return ZStack {
            c.clipShape(HalfClipShape(left: false)).offset(x: -shift, y: 0)
            c.clipShape(HalfClipShape(left: true)).offset(x: shift, y: 0)
        }
    }
}

struct HalfClipShape: Shape {
    var left: Bool
        
    func path(in rect: CGRect) -> Path {
        // shape covers lef or right part of rect
        return Path { path in
            let width = rect.width
            let height = rect.height
            
            let startx:CGFloat = left ? 0 : width/2
            let shapeWidth:CGFloat = width/2
            
            path.move(to: CGPoint(x: startx, y: 0))
            
            path.addLines([
                CGPoint(x: startx+shapeWidth, y: 0),
                CGPoint(x: startx+shapeWidth, y: height),
                CGPoint(x: startx, y: height),
                CGPoint(x: startx, y: 0)
            ])
        }
    }
}

This effect duplicates the view content into ZStack and masks/clips only the left part of the bottom layer and right part of the top layer. Both copies of the content are later moved apart depending on the shift parameter.

Text("HELLO WORLD")
	.padding()
    .background(Color.orange)
    .transition(AnyTransition.modifier(active: SlidingDoorEffect(shift: 170), identity: SlidingDoorEffect(shift: 0)))

You can go really crazy when mixing multiple occurrences of the content so please, bear in mind that

• mixing many (hundrets) content layers may lead to performance issues. The identity modifier remains applied even when the transition finished
• even though I refer to the content layers as copies they are different views of the same type!
• if the content is animated, it will remain live during the whole transition
• there might be some cuts visible even after the transition ends. If you encouter this situation, the solution may be to clip the sub-areas with slight (1-2px) overlap

The transition shown in the previous blog post about onboarding screens was also done with this approach. The only difference is that the view is cut into quarters.

The Task

The best way to learn something new is to practice it. So for this topic, I have a challenge for you.

Implement transition that explodes the view on removal. Example:

How to do it?

1. start with a Geometry Effect that animates a view along a curve
2. prepare a masking shape for content sub-regions
3. create an explosion effect that multiplies the content into many sub-regions, masking each one of them with relevant clipShape and offsetting using the effect from the first step
4. wrap new effect into transition
5. PROFIT

The task

The task for today’s SwiftUI exercise is simple. We would like our app to have N onboarding pages which our user can browse through at the first app launch. Browsing can be made either with a swipe gesture or by pressing the next button.

Something like this:

IntroPageView

We will start with the preparation of a single view that contains an illustration, the title, and description. It is a basic View, you can notice that I like to use a combination of stacks and Spacers for easy alignment of the subviews.

struct IntroPage {
    let imageName: String
    let title: String
    let description: String
}

struct IntroPageView: View {
    let page: IntroPage
    var body: some View {
        VStack {
            Spacer()
            Image(self.page.imageName)
                .resizable()
                .aspectRatio(contentMode: .fit)
            Spacer()
            Group {
                HStack {
                    Text(self.page.title)
                        .font(.title)
                        .foregroundColor(.purple)
                    Spacer()
                }
                HStack {
                    Text(self.page.description)
                    Spacer()
                }
            }
            .padding()
        }
    }
}

Using TabView

If you are familiar with UIKit, you would most probably look for a Scrollview with set property isPagingEnabled = true to start with. Unfortunately, SwiftUI does not have the exact counterpart, but that does not mean, there are no solutions for our case. Of course, one can use UIScrollView based component and wrap it using UIViewRepresentable to SwiftUI, but let me focus on pure SwiftUI solutions only.

Since the recent SwiftUI update, often denoted as SwiftUI2, we can use TabView for our purpose. Even though TabView is mainly purposed for Views organized in Tabbar, applying .tabViewStyle(PageTabViewStyle()) creates exactly what we would expect from a paginated scroll view, it even creates a paging indicator at the bottom of the view!

(To remove or customize paging indicator appearance, set .indexViewStyle(PageIndexViewStyle()) appropriately ;)

struct ContentView: View {
    let pages: [IntroPage]
    
    @State private var currentPage = 0
    
    var body: some View {
        VStack {
        
            TabView(selection: $currentPage) {
                ForEach (0 ..< self.pages.count) { index in
                    IntroPageView(page: self.pages[index])
                        .tag(index)
                        .padding()
                }
            }
            .tabViewStyle(PageTabViewStyle()) // the important part
        
			// NEXT button
            HStack {
                Spacer()
                Button(action: {
                    withAnimation (.easeInOut(duration: 1.0)) {
                        self.currentPage = (self.currentPage + 1)%self.pages.count
                    }
                }) {
                    Image(systemName: "arrow.right")
                        .font(.largeTitle)
                        .foregroundColor(Color.white)
                        .padding()
                        .background(Circle().fill(Color.purple))
                }
            }
            .padding()
        }
    }
}

Nice, clean, and easy. There is only one drawback - this works on iOS14 only… So what if you want/need to support iOS13 as well?

PagingScrollView based on HStack

As already mentioned, the standard Scrollview in SwiftUI has very limited capabilities compared to UIScrollView. It is not possible to enable pagination and prior to SwiftUI2 it was also impossible to scroll to a specific subview. (Now you can use ScrollViewReader for that purpose, but again - supported on iOS14 only)

A bit harder way but with plenty of freedom is to take HStack and implement the scrolling using gesture recognizers. With this approach, you had to work with stack offset and change it according to user actions. You can inspire and/or directly use the component SwiftUIPagingScrollview that I have prepared and is available on Github. The interface is far from ideal as it requires messing with GeometryReader, but for illustration:

GeometryReader { geometry in
	PagingScrollView(activePageIndex: self.$currentPage, 
					 itemCount: self.pages.count, 
					 pageWidth: geometry.size.width, 
					 tileWidth: geometry.size.width, 
					 tilePadding: 0) {
    	ForEach (0 ..< self.pages.count) { index in
        	IntroPageView(page: self.pages[index])
        }
   	}
}

This solution gives us great scrolling experience:

Transitions and id modifier

If you are not very strict about direct scrolling with your finger, an interesting approach is to use custom transitions that simulate the scrolling animation. The transitions are being triggered when views are being added or removed from the view hierarchy. You can create any fancy and asymmetric transition using composition of viewModifiers, but for now we will be OK just by combination of standard moving transition, like this:

extension AnyTransition {
    static var pageTransition: AnyTransition {
        let insertion = AnyTransition.move(edge: .trailing)
            .combined(with: .opacity)
        let removal = AnyTransition.move(edge: .leading)
            .combined(with: .opacity)
        return .asymmetric(insertion: insertion, removal: removal)
    }
}

Please note that I have added there also opacity change just for the fun and demonstration of transition combinations.

Now, to setup several pages with transitions one could write something like this:

Group {
	if 0 == self.currentPage {
    	IntroPageView(page: self.pages[0])
    }
    if 1 == self.currentPage {
    	IntroPageView(page: self.pages[1])
    }
    if 2 == self.currentPage {
    	IntroPageView(page: self.pages[2])
    }
    if 3 == self.currentPage {
    	IntroPageView(page: self.pages[3])
	}
}.transition(AnyTransition.pageTransition)

As you see, that is not very nice and scaleable. (But note the usage of Group view that sets the transition to each of its subviews)

Much nicer and more elegant solutuon is to use identity modifier id like so:

IntroPageView(page: pages[self.currentPage])
	.transition(AnyTransition.pageTransition)
	.id(self.currentPage)

Nice, right? Whenever assigned identifier changes, the view is being replaced with the new one and thus transitions are triggered both for the old view (removal) and new view (insertion).

Summary

Today I have tried to present several ways of building up onboarding screens in SwiftUI. I have examined three approaches that can satisfy most of the use cases - at least I believe so. Let me review them once again:

Use TabView

➖ iOS14 only; low coolness factor (can be tweaked with parallax effects though); cannot set animation style to tab change

➕ quick and easy

Implement custom Scrollview based on HStack

➖ non-trivial implementation; mixing with other scrollable components might lead to issues

➕ ability to fine-tune everything; great scrolling feeling

Use just transitions

➖ no way to mimic true scrollview behavior (if you need it)

➕ clean and easy; you can go crazy with custom transitions, like the one below. But that is for another story and my next blog post 😉.

I will share with you a simple way of creating a TikTok logo-ish effect but the main takeaway of this article is meant to be understanding how to create reusable styling for your app.

Start with blending of layers

The key to creating our logo is in specific blending of two colored shapes. Please check the code first:

struct CommandLogoView: View {
    var body: some View {
        let logo = Image(systemName: "command")
            .font(.system(size: 200, weight: .bold, design: .default))
        
        return logo
            .foregroundColor(Color("tiktokRed"))
            .blendMode(.plusLighter)
            .overlay(
                logo
                    .foregroundColor(Color("tiktokBlue"))
                    .blendMode(.plusLighter)
                    .offset(CGSize(width: -4, height: -3))
            )
    }
}

As you see, I have used a simple SF Symbol as our logo. The resulting view takes this image, fills it with custom red color (defined in project assets) and as .overlay sets the same logo in blue, but slightly shifted with .offset viewModifier. The white area is the result of blend mode that is set to .plusLighter.

Take this example and try to experiment with the viewModifier parameters, especially .blendMode to see how it affects the result. For instance, if you wish to use your logo on white background, you may want to set it to .plusDarker instead

Wrap the effect as custom ViewModifier

We have achieved our logo with effect quite easily, but what if we need to apply the same effect to more elements in our app?

The beauty of SwiftUI is that you can specify custom ViewModifier and hide almost any of your styling into its implementation and thus gain the ability to reuse it anywhere.

My implementation looks like this:

struct TikTokEffect: ViewModifier {
    let offset: CGSize
    
    func negOffset()->CGSize {
        return CGSize(width: -self.offset.width, height: -self.offset.height)
    }
    
    func body(content: Content) -> some View {
        content
            .offset(self.negOffset())
            .foregroundColor(Color("tiktokRed"))
            .blendMode(.plusLighter)
            .overlay(
                content
                    .foregroundColor(Color("tiktokBlue"))
                    .blendMode(.plusLighter)
                    .offset(self.offset)
            )
            
    }
}

You can see that the overall structure derives from our first example, but it is no longer dependent on specific Image. Instead, the view modifier takes the Content that it has been applied to and sets the same content also as its overlay (but with a different color).

Also, the offset is prepared to be set as viewModifier parameter so it can be changed from the outside.

I have also introduced a negative offset here, that shifts the base content in the opposite direction to its overlay. With this improvement, the resulting view remains centered which I personaly prefer but it is optional change.

Our view modifier can be used like this to any kind of view, even the root view if you wish;)

Image(systemName: "command")
   .font(.system(size: 200, weight: .bold, design: .default))
   .modifier(TikTokEffect(offset: CGSize(width: -4, height: -3)))

Reuse view modifier within ButtonStyle

Custom view modifiers are especially handy when creating custom ButtonStyle, transitions, or animations. Let me share here an example of a button, that applies our effect when pressed:

struct TikTokButtonStyle: ButtonStyle {
    
    func backgroundShift(_ isPressed: Bool)->CGSize {
        if isPressed {
            return CGSize(width: -4, height: -3)
        }
        else {
            return CGSize()
        }
    }

    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .padding(20)
            .background(
                RoundedRectangle(cornerRadius: 10, style: .continuous)
                    .modifier(TikTokEffect(offset: self.backgroundShift(configuration.isPressed)))
            )
            .scaleEffect(configuration.isPressed ? 0.95: 1)
            .foregroundColor(.black)
            .animation(.spring())
    }
}

Here we are changing the offset value of our effect based on configuration.isPressed value. The resulting button created as:

Button(action: {}) {
            HStack {
                Image(systemName: "command")
                Text("Command Button")
            }
        }
        .buttonStyle(TikTokButtonStyle())

now behaves like this:

Summary

• Styling the app and creating reusable styles can benefit heavily from custom view modifiers. This is only one of the many use-cases, but the same approach can be used for any app look and feel
• It is wise to keep configurable interface of your view modifier so it can be tuned for specific scenarios and foremost - ANIMATIONS. As an inspiration and your challenge, I present you a loading indicator based on our TikTokEffect. Can you achieve the same - or better?

Did you like this article? What do you want me to focus on next?

Feel free to comment or criticize so the next one is even better. Or share it with other SwiftUI adopters ;)

Shape representation

Shapes in SwiftUI can be constructed as a composition of vector paths and/or shape primitives. If we want to create morphing animation between two shapes, we need to find universal representation first. This can be done either ad-hoc for specific shapes - as we saw in the previous post about custom controls - but it is better to find a more generic one that will allow us to morph any shape to any shape without limitations.

The most common approach is to describe the shape as an approximation of its outline using a finite set of line segments. This means, that we will distribute N points around the shape outline and when doing the morphing animation, we can easily move these outline points from the position given by shape A to the new position in the shape B. For better understanding, check the following illustration:

Implementation of morphable shape in SwiftUI

So how to implement all of this in SwiftUI? Let me start with a new shape representation based on multiple control points. This is quite easy, the only crucial part is that these control points are being represented using our AnimatableVector so it is capable to morph using animation.

But hey - the shape points are two-dimensional (having x and y coordinate), while our AnimatableVector holds only an array of Doubles. What can be done about that? Well, there are two solutions:

• you can implement another custom vector holding array of CGPoints and let it conform to the AnimatableData protocol
• or use the same AnimatableVector and expect even indexed component to be x coordinate and odd-indexed components to by y coordinate. I choose this solution for the following MorphableShape implementation:

struct MorphableShape: Shape {
    var controlPoints: AnimatableVector
    
    var animatableData: AnimatableVector {
        set { self.controlPoints = newValue }
        get { return self.controlPoints }
    }
    
    func point(x: Double, y: Double, rect: CGRect) -> CGPoint {
        // vector values are expected to by in the range of 0...1
        return CGPoint(x: Double(rect.width)*x, y: Double(rect.height)*y)
    }
    
    func path(in rect: CGRect) -> Path {
        return Path { path in
            
            path.move(to: self.point(x: self.controlPoints.values[0], 
				                     y: self.controlPoints.values[1], rect: rect))
            
            var i = 2;
            while i < self.controlPoints.values.count-1 {
                path.addLine(to:  self.point(x: self.controlPoints.values[i], 
					                         y: self.controlPoints.values[i+1], rect: rect))
                i += 2;
            }
            
            path.addLine(to:  self.point(x: self.controlPoints.values[0], 
				                         y: self.controlPoints.values[1], rect: rect))
        }
    }
}

Let’s check the implementation using several random points:

// hepler func creating vector with random values
func randomVector(count: Int)->AnimatableVector {
    let randomValues = Array(1...count).map{_ in Double.random(in: 0...1.0)}
    return AnimatableVector(with: randomValues)
}

// demo view for our proof of concept of morphable shapes
struct DemoView: View {
    static let pointCount = 8 // number of control points
	// vector holds twice as many elements
    @State var controlPoints: AnimatableVector = randomVector(count: pointCount*2) 
    
    var body: some View {
        VStack {
            MorphableShape(controlPoints: self.controlPoints)
                .fill(Color.orange)
                .frame(width: 256, height: 256)
                .overlay( // overlay the shape with the same shape to create outline
                    MorphableShape(controlPoints: self.controlPoints)
                        .stroke(Color.white, lineWidth: 3)
                )
            
            Button (action: {
                withAnimation { // feel free to play with animation curves here
                    // randomize points
                    self.controlPoints = randomVector(count: DemoView.pointCount*2)
                }
            }){
                Text("Randomize")
            }
        }
    }
}

Converting standard shape to MorphableShape

All the above code is enough to morph any shape to any shape, but getting the shape representation as a set of control points may be tricky. Well, it is definitively something you cannot put together “by hand”.

Luckily, there is a way how to generate them using SwiftUI Path API. We can sample the shape outline using the trimmedPath() method, so let me create a simple Path extension, that provides a vector of N control points along any Path:

extension Path {
    // return point at the curve
    func point(at offset: CGFloat) -> CGPoint {
        let limitedOffset = min(max(offset, 0), 1)
        guard limitedOffset > 0 else { return cgPath.currentPoint }
        return trimmedPath(from: 0, to: limitedOffset).cgPath.currentPoint
    }
    
    // return control points along the path
    func controlPoints(count: Int) -> AnimatableVector {
        var retPoints = [Double]()
        for index in 0..<count {
            let pathOffset = Double(index)/Double(count)
            let pathPoint = self.point(at: CGFloat(pathOffset))
            retPoints.append(Double(pathPoint.x))
            retPoints.append(Double(pathPoint.y))
        }
        return AnimatableVector(with: retPoints)
    }
}

Now, it can be utilized like this:

let N = 100
let shape = Circle() // or any other shape
let shapeControlPoints: AnimatableVector = shape.path(in: CGRect(x: 0, y: 0, width: 1, height: 1))
                                                .controlPoints(count: N)

Please, note, that with setting the CGRect size to 1 we are assuring to have the control point coordinates in the range 0...1 which is exactly what our MorphableShape expects to get.

And that’s it!

Use cases

If you are wondering, what is this all good for, I present here several ideas:

• morphing of icons (for multi-state buttons)

• custom transitions and morphing of clip masks

• creating a pointless music video in SwiftUI 🤪

Final notes

• Described algorithm works best for one-component/compact shapes. It works also for multi-component shapes, but the resulting animation may not be eye-pleasant.
• For large curved or complex shapes, the number of control points needs to be quite high (hundreds at least) to have a smooth result.
• The only tricky thing with this approach is that the shapes may differ in the origin and direction of how they are being constructed. If these parameters are different, the morphing animation would not work as expected and shape may “flip” during interpolation. When creating my custom shapes, I usually start the path at the top-left corner and construct the shape in the clockwise direction to avoid these issues. Nevertheles, the control points could be programatically rearranged so the vector always start around the same orientation - but so far I have not implemented this part:)
• It would be awesome, if we could get Path from SFSymbols….🤞

Did you like this article? What do you want me to focus on next?

Feel free to comment or criticize so the next one is even better. Or share it with other SwiftUI adopters ;)

On a daily basis, I spend a lot of time debugging and I am usually using several LLDB commands over and over again. For this purpose, I have defined a couple of custom LLDB commands like printing out the contents of Data as String - so instead of po String(data: jsonData, encoding: .utf8) I simply write printData jsonData

Since not many devs know about the opportunity to define own custom LLDB aliases or commands, I have put together a short video:

(Fun fact: The video was made with Keynote which I found quite useful for such task)

The example of .lldbinit file can be seen on my gist.

Stay safe!