Enhanced replace transition for SF Symbols in iOS 18

iOS 18 introduces a new option for the ReplaceSymbolEffect called MagicReplace. This feature allows for smooth animations of slashes and badges in SF Symbols, enhancing the visual transitions in our apps.

The MagicReplace option is automatically applied to the replace symbol effect when possible, and it works specifically with related SF Symbols. This feature is particularly useful for tappable elements in our apps, such as various toggles.

Let's see how it works with an example of a notification toggle.

Button {
    withAnimation {
        notificationsEnabled.toggle()
    }
} label: {
    Label(
        "Toggle notifications",
        systemImage: notificationsEnabled ? "bell" : "bell.slash"
    )
}
.contentTransition(
    .symbolEffect(.replace)
)

In iOS 18 beta, this results in a smooth magic replace animation on the bell icon when the slash is added or removed.

A gif a smooth animation for adding and removing a slash on a bell icon when it's tapped

While the new magic option is applied by default, we can also specify it explicitly along with a preferred fallback option.

.contentTransition(
    .symbolEffect(.replace.magic(fallback: .replace))
)

This new feature allows for more polished and visually appealing interactions in our apps, enhancing the overall user experience.

If you are enjoying our blog and would like to support us, you can sponsor us on GitHub.