Hi everyone

Here's my problem: I created a TabView with tabViewStyle(PageTabViewStyle()) and would like to have a different LinearGradient as background for each of the page. So far that wasn't too hard to build, however I'd like the LinearGradients to transition gracefully from one to another (I did it successfully for plain Color elements with the .animation(.default) modifier.

This is what I tried so far:

1. With an array of gradients => The animation does not happen (the LinearGradient will change abrutly between pages)

struct ContentView: View {
    @State private var selected = 0   
    var blueBackground = LinearGradient(gradient: Gradient(colors: [Color.blue, Color.white]), startPoint: .topLeading, endPoint: .bottomLeading)

    var grayBackground = LinearGradient(gradient: Gradient(colors: [Color.gray, Color.white]), startPoint: .topLeading, endPoint: .bottomLeading)

    var gradients: [LinearGradient] {
        return [blueBackground, grayBackground, grayBackground]
    }

    var body: some View {
        ZStack {
            Rectangle().fill(gradients[selected]).edgesIgnoringSafeArea(.all)

            TabView(selection: $selected){
                Text("☀️").font(.title).tag(0)
                Text("🌦").font(.title).tag(1)
                Text("⛈").font(.title).foregroundColor(Color.white).tag(2)
            }.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
            .tabViewStyle(PageTabViewStyle())
        }.animation(.easeIn)
    }   
    }

2. With a "conditional rendering" => The animation happens, but I get a weird "flash" when going from one page to another (see https://twitter.com/MaximeHeckel/status/1297380458163056640 for a video recording)

        struct ContentView: View {
          @State private var selected = 0

          var blueBackground = LinearGradient(gradient: Gradient(colors: [Color.blue, Color.white]), startPoint: .topLeading, endPoint: .bottomLeading)

          var grayBackground = LinearGradient(gradient: Gradient(colors: [Color.gray, Color.white]), startPoint: .topLeading, endPoint: .bottomLeading)

          var gradients: [LinearGradient] {
              return [blueBackground, grayBackground, grayBackground]
          }

          var body: some View {
              ZStack {
                  if selected == 0 {
                      Rectangle().fill(gradients[0]).edgesIgnoringSafeArea(.all)
                  } else {
                      Rectangle().fill(gradients[1]).edgesIgnoringSafeArea(.all)
                  }

                  TabView(selection: $selected){
                      Text("☀️").font(.title).tag(0)
                      Text("🌦").font(.title).tag(1)
                      Text("⛈").font(.title).foregroundColor(Color.white).tag(2)
                  }.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
                  .tabViewStyle(PageTabViewStyle())
              }.animation(.easeIn)
          }
       }

Currently on iOS 14 beta4 and developing on XCode beta 12 I'm pretty new to SwiftUI development, so maybe what I'm asking simply isn't possible or is a very complex problem.

Thank you in advance for your help!

Hey Maxime,

Please check out my example: https://gist.github.com/sergeytimoshin/1dc887d0f51b0d18f7bdcbf4bd21e181