SF Symbols .replace animation is partially missing

Question

Created 2w

Replies 2

Boosts 0

Participants 2

In SF Symbols 7, I'm observing a discrepancy between the .replace animation previewed in the SF Symbols app and the result when using the code template the app provides.

Expected behavior: When previewing the .replace animation in the SF Symbols app (with Magic Replace preferred), the transition looks like:

Apr-28-2026 14-35-45.gif

Actual behavior: When I implement the animation using the exact code template generated by the SF Symbols app, the result looks like:

Apr-28-2026 14-37-56.gif

My code:

struct PlaygroundSwiftUIView: View {
    
    @State var name = "folder.circle"
    
    var body: some View {
        Image(systemName: name)
            .font(.system(size: 60))
            .contentTransition(.symbolEffect(.replace))
            .onTapGesture {
                name = "tree"
            }
    }
}

#Preview {
    PlaygroundSwiftUIView()
}

The animation rendered in my app does not match the preview shown in the SF Symbols app. The drawOff animation is partially missing.

Is there something missing from the code template, or is there an additional configuration step required to achieve the correct Replace effect? or is this a bug?

Boost

Answer 1

DTS Engineer OP

Apple

1w

Hello @Mim0sa,

.onTapGesture does not provide an implicit animation context, unlike Button.

This means that a state change triggered by a Button will drive animations for .contentTransition but .onTapGesture by itself will not.

I was able to achieve the expected result with a Button:

Button {
    isClicked.toggle()
} label: {
    Image(systemName: isClicked ? "folder.circle" : "tree")
        .font(.system(size: 60))
        .contentTransition(.symbolEffect(.replace))
}

If you need to use onTapGesture, wrap the state change in a withAnimation(_:).

You can see the Animation context listed in the documentation of withAnimation.

I hope this helps!

 Travis

0

Answer 2

DTS Engineer OP

Apple

20h

Thank you for your reply, I tried the method you suggested, but folder.circle‘s drawOff animation is still partially missing. iOS Simulator 26.4.1 My code

Thanks for the update, @Mim0sa.

I see the same thing but only when using SF symbols with certain animations. For example, when I replace folder.circle with text.below.folder the drawOff animation plays in full, but is cut off again with square.and.arrow.up.

This might be a bug. I'd greatly appreciate it if you could open a bug report using Feedback Assistant. Include the code you sent as a sample project, so I can share this with the relevant engineering team.

Bug Reporting: How and Why? has tips on creating your bug report.

Reply with the feedback number once you filed the report.

 Travis

0