The offset animation is not functioning as expected 🧐

[rathodmayur93]

Hello,
I want to express my gratitude for developing this library; it has been working exceptionally well for my project. Lately, I've been attempting to apply an offset animation to a WebImage, but unfortunately, the image doesn't animate at all. Interestingly, when I substitute the WebImage with AsyncImage, the animation works perfectly. Does anyone have any insights into why this might be happening?

Code

struct FirstView: View {
    
    @State private var isAnimating: Bool = false
    
    var body: some View {
        ZStack {
            Color.red
            
            VStack {
                
                VStack {
                    WebImage(url: URL(string: "https://picsum.photos/200"))
                        .scaledToFit()
                        .offset(x: isAnimating ? 0 : -1000)
                        .animation(.linear(duration: 2.0), value: isAnimating)
                    
                    AsyncImage(url: URL(string: "https://picsum.photos/200"))
                        .scaledToFit()
                        .offset(x: isAnimating ? 0 : -1000)
                        .animation(.linear(duration: 2.0), value: isAnimating)
                    
                }
                .opacity(isAnimating ? 1 : 0)
                .animation(.linear(duration: 2.0), value: isAnimating)
            }
            .ignoresSafeArea()
            .onAppear {
                isAnimating = true
            }
        }
    }
}

#Preview {
    FirstView()
}

Output

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-01-12.at.15.00.20.mp4

[dreampiggy]

Try again with 3.0.0-beta2 ?

[foxmayurrathod]

Hi @dreampiggy
Thank you for getting back to me. Even after upgrading to 3.0.0 beta 3, I'm still encountering the same problem. Would you please confirm if it's working properly on your side?

[dreampiggy]

A workaround is to use the explicit animation in SwiftUI.

The WebImage itself contains complicated structure because of animated GIF support (which means, it replace itself with new body when timer of next frame triggered). It's not a simple shape view.

Can you have a try with withAnimation closure ? https://developer.apple.com/tutorials/swiftui/animating-views-and-transitions

WebImage(url: URL(string: "https://picsum.photos/200"))
    .scaledToFit()
    .offset(x: isAnimating ? 0 : -1000)
    .animation(.linear(duration: 2.0), value: isAnimating)
.onAppear {
 withAnimation {
    isAnimating = true
  }
}

For AnimatedImage, it use UIViewRepresentable, it's magic handled by SwiftUI X UIKit support and use another render technique, so it's work without additional help.

[foxmayurrathod]

@dreampiggy, I attempted the solution you suggested, but unfortunately, it is still not working for me

[fuziki]

Adding the geometryGroup modifier to the WebImage could help resolve the issue. This modifier is effective in addressing conflicts within the animation hierarchy.

If you're using iOS 17 or later, you can try the following:

WebImage(url: url)
    .scaledToFit()
    .geometryGroup()

For versions prior to iOS 17, consider trying transformEffect(.identity):

WebImage(url: URL(string: "https://picsum.photos/200"))
    .scaledToFit()
    .transformEffect(.identity)