tl;dr:

In SwiftUI, I want proper animations when a list of rows changes order, at the same time as row content changes values. Works with List, does not work with VStack/HStack. Probably something to do with view identity, transitions, animations and transactions.

          Animation glitch:             Works, but uses List:

I have a common setup but I am not able to achieve perfect animations.

• A list of items.
• One of the labels in each row reflects a property.
• The list is sorted by that property.
• On a change to the property - the row label needs to animate, but the overall rows order itself might also change and need animating.

In the Minimal reproducible example I am providing, specifically we have:

• A list of comments.
• One of the labels in each row reflects the 'upvote' count for a comment.
• The list is sorted by 'most upvoted'.

The issue: When both the content AND order changes - the label 'gets detached' and 'jumps' to the final position after the row animation. The issue is the same regardless of whether ScrollView is used (wraps everything), or just directly a VStack/LazyVStack. The issue is the same regardless of whether LazyVStack / VStack is used.

Here is a code you can paste in a new project's ContentView and observe the issue. Run in Simulator and use Debug > Slow animations.

struct ContentView: View {
    @State private var comments: [Comment] = []

    var body: some View {
        HStack {
            Text("Sate 1").onTapGesture { comments = [.init("Well done", 6), .init("Interesting", 5), .init("Nice", 4)] }
            Text("Sate 2").onTapGesture { comments = [.init("Interesting", 7), .init("Well done", 6), .init("Nice", 4)] }
        }

        // Option 1: Animation glitch
        VStack { ForEach(comments, content: CommentRowView.init(comment:)) }
            .padding()
            .animation(.default, value: comments)
        
        // Option 2: Works, but uses `List`
        // List { ForEach(comments, content: CommentRowView.init(comment:)) }
        //    .animation(.default, value: comments)
    }
}

struct CommentRowView: View {
    let comment: Comment
    
    var body: some View {
        HStack {
            Text(comment.text).font(.largeTitle)
            Spacer()
            VStack {
                Text(comment.upvotes.formatted())
                    .contentTransition(.numericText())
                    .animation(.default, value: comment.upvotes)
            }
            .font(.title)
        }.padding().border(.gray)
    }
}

struct Comment: Identifiable, Equatable {
    var id: String { text }; let text: String; let upvotes: Int
    init(_ text: String, _ upvotes: Int) { self.text = text; self.upvotes = upvotes }
}

tl;dr:

In SwiftUI, I want proper animations when a list of rows changes order, at the same time as row content changes values. Works with List, does not work with VStack/HStack. Probably something to do with view identity, transitions, animations and transactions.

          Animation glitch:             Works, but uses List:

I have a common setup but I am not able to achieve perfect animations.

• A list of items.
• One of the labels in each row reflects a property.
• The list is sorted by that property.
• On a change to the property - the row label needs to animate, but the overall rows order itself might also change and need animating.

In the Minimal reproducible example I am providing, specifically we have:

• A list of comments.
• One of the labels in each row reflects the 'upvote' count for a comment.
• The list is sorted by 'most upvoted'.

The issue: When both the content AND order changes - the label 'gets detached' and 'jumps' to the final position after the row animation. The issue is the same regardless of whether ScrollView is used (wraps everything), or just directly a VStack/LazyVStack. The issue is the same regardless of whether LazyVStack / VStack is used.

Here is a code you can paste in a new project's ContentView and observe the issue. Run in Simulator and use Debug > Slow animations.

struct ContentView: View {
    @State private var comments: [Comment] = []

    var body: some View {
        HStack {
            Text("Sate 1").onTapGesture { comments = [.init("Well done", 6), .init("Interesting", 5), .init("Nice", 4)] }
            Text("Sate 2").onTapGesture { comments = [.init("Interesting", 7), .init("Well done", 6), .init("Nice", 4)] }
        }

        // Option 1: Animation glitch
        VStack { ForEach(comments, content: CommentRowView.init(comment:)) }
            .padding()
            .animation(.default, value: comments)
        
        // Option 2: Works, but uses `List`
        // List { ForEach(comments, content: CommentRowView.init(comment:)) }
        //    .animation(.default, value: comments)
    }
}

struct CommentRowView: View {
    let comment: Comment
    
    var body: some View {
        HStack {
            Text(comment.text).font(.largeTitle)
            Spacer()
            VStack {
                Text(comment.upvotes.formatted())
                    .contentTransition(.numericText())
                    .animation(.default, value: comment.upvotes)
            }
            .font(.title)
        }.padding().border(.gray)
    }
}

struct Comment: Identifiable, Equatable {
    var id: String { text }; let text: String; let upvotes: Int
    init(_ text: String, _ upvotes: Int) { self.text = text; self.upvotes = upvotes }
}

• ios
• swift
• animation
• swiftui

• 1 In CommentRowView, try adding .drawingGroup() to the nested Text showing the formatted upvotes (after .contentTransition). See also How to avoid contentTransition apply black in new text - SwiftUI – Benzy Neez Commented yesterday

1 Answer 1

struct CommentRowView: View {
    let comment: Comment
    
    var body: some View {
        HStack {
            //content
        }
        .padding().border(.gray)
        .background(Color.black) //THIS - solid background
        .drawingGroup() // THIS - upvotes number animation fix
    }
}