Animating Text foregroundStyle with gradients

Question

RanLearns OP

Created 4d

Replies 1

Boosts 0

Participants 2

Hello! We can animate Text color via foregroundStyle very nicely in SwiftUI like so:

Text("Some text here")
   .foregroundStyle(boolValue ? Color.green : Color.blue)

withAnimation {
   boolValue.toggle()
}

However, if the foregroundStyle is a gradient, the color of the Text view changes immediately without animation.

The code below works to animate a gradient foregroundStyle on an SF Symbol, but it does not work when applied to a Text view. Is it possible to animate a Text view foregroundStyle between gradient values?

Image(systemName: "pencil.circle.fill")
   .foregroundStyle(boolValue ? .linearGradient(colors: [.red, .orange], startPoint: .top, endPoint: .bottom) : .linearGradient(colors: [.green, .blue], startPoint: .top, endPoint: .bottom))

Thanks for your help!

Boost

Answer 1

DTS Engineer OP

Apple

3d

Hi @RanLearns, thanks for the detailed post. I've replicated this behavior on iOS and macOS and am looking into the cause. If I find out any more information or a workaround I'll let you know.

In the meantime feel free to file a feedback, provide the ID here, and I'll make sure it gets routed to the right place.

Best,

-J

0