string inside Text View doen\'t be animated, i don\'t know why it works like that

Question

I want to animate Text view in SwiftUI, but string inside it doen't be animted. I don't know why and need some help.

I'm making ios application showing location detail. It is fetched by async function(loadData). and when fetch is finished, i want to show this with animation which makes Text("Loading") move away and fade in and Text(data == nil ? "" : representiveName!) move to intended spot and fade out. but when data is fetched red border from second Text is moving top to down but string in Text doen't move, it is just located at intended spot from beginig and fades out. help me please

    ZStack {
        Text("Loading")
            .offset(CGSize(width: 0, height: data == nil ? 0:50))
            .opacity(data == nil ? 1:0)
        Text(data == nil ? "" : representiveName!)
            .border(.red)
            .offset(CGSize(width: 0, height: data == nil ? -50:0))
            .opacity(data == nil ? 0:1)
    }
    .animation(.easeInOut(duration: 0.5).delay(0.5), value: data)            
    .task {
        data = await loadData(logitude: longitude, latitude: latitude)
    }

Answer 1

The issue you are experiencing is likely caused by the fact that the animation modifier is applied to the entire ZStack rather than to each individual Text view. When you apply the animation modifier to the ZStack, it animates the entire ZStack as a single unit, rather than animating the individual views within the stack.

To animate the individual Text views, you will need to apply the animation modifier to each view separately. You can do this by moving the animation modifier to the end of each Text view's modifiers, like this:

ZStack {
    Text("Loading")
        .offset(CGSize(width: 0, height: data == nil ? 0:50))
        .opacity(data == nil ? 1:0)
        .animation(.easeInOut(duration: 0.5).delay(0.5), value: data)
    Text(data == nil ? "" : representiveName!)
        .border(.red)
        .offset(CGSize(width: 0, height: data == nil ? -50:0))
        .opacity(data == nil ? 0:1)
        .animation(.easeInOut(duration: 0.5).delay(0.5), value: data)
}
.task {
    data = await loadData(logitude: longitude, latitude: latitude)
}

By applying the animation modifier to each Text view separately, you can animate the individual views as desired.

You may also need to adjust the delay parameter of the animation modifier to ensure that the animations for the two views are properly synchronized.