As an indie developer running a handful of calm-and-wellness apps, I was bothered for a long time by how the favorite heart responded when you tapped it. Tap it, and the color changed. That was all. Without any motion, the tap barely registered as a tap. Your finger expects a reaction, yet the screen stays still. That small mismatch quietly lowered the warmth of the whole experience.
Because Rork Max outputs real Swift, this kind of tactile detail sits naturally on top of the standard iOS machinery. If an icon already uses SF Symbols, adding a few lines of symbolEffect makes it bounce the moment you press it, or pulse while something loads. No new library, no swapped-out assets.
Using two subjects, a favorite button and a downloading indicator, I will walk through where symbolEffect earns its place, hands on. I will also be honest about the version where I over-animated and made things harder to read.
Start with the smallest step: a one-shot bounce
The first thing I tried was a bounce that fires only at the instant you tap the favorite button. The key idea here is to react to the number of taps rather than to animate continuously. In SwiftUI, you use the overload with value:, which plays the effect once whenever the value changes.
import SwiftUI
struct FavoriteButton: View {
@State private var isFavorite = false
// Count taps and use it to trigger the bounce
@State private var tapCount = 0
var body: some View {
Button {
isFavorite.toggle()
tapCount += 1
} label: {
Image(systemName: isFavorite ? "heart.fill" : "heart")
.font(.system(size: 32))
.foregroundStyle(isFavorite ? .pink : .secondary)
// Bounces once every time tapCount changes
.symbolEffect(.bounce, value: tapCount)
}
}
}The important detail is that I pass tapCount (an Int) to value:, not isFavorite (a Bool). If you pass a Bool, the effect may not replay when the state returns to a value it held before. Keeping a separate counter guarantees a bounce on every press. I passed the Bool directly at first and spent a good half hour puzzled by an icon that only bounced every other tap.
The rule for one-shot effects is simple: drive them by a count. Hold onto that one point and the rest falls into place.
Animate continuously: pulse and variableColor while loading
Next is the downloading indicator. It should keep moving as long as work continues, so this one repeats. .pulse fades in and out, while .variableColor lights up layers in sequence, which suits anything that progresses in stages, like a signal strength or a download.
struct DownloadingIcon: View {
let isDownloading: Bool
var body: some View {
Image(systemName: "arrow.down.circle")
.font(.system(size: 28))
.symbolEffect(
.variableColor.iterative.reversing,
isActive: isDownloading
)
}
}For repeating effects you use isActive: instead of value:. The animation runs only while isActive is true and stops naturally when it turns false. Because it wires directly to a state variable, switching the motion on and off around the start and end of a download reads cleanly.
.iterative lights the layers one at a time, and .reversing folds back when it reaches the end. Drop those two and every layer blinks at once, which feels restless. I first built it with .cumulative, where the light builds up, but that "accumulating" look clashed with the "counting down" feeling of a download, so I rebuilt it. Choosing an effect turned out to be less about visual taste and more about matching the direction of the state you want to convey.