SwiftUI animations of elements in a scrollview doesn't work ? Xcode GM update

Question

I just switched to the GM version of xcode and since then I have a problem that I did not have before it seems to me.

I created a simplified version of the problem:

I have a scrollview with several elements inside.

I add animations states on the blue square but I have the impression the elements have no animations and changes state brutally.

I tried with an element outside the scrollview (purple square) and it works

I don't see why animations do not work someone has an idea?

 @State var Enter = false


var body: some View {


    VStack {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 15) {

                Rectangle()
                    .foregroundColor(Color.red)
                    .frame(width: 80, height: 80, alignment: .center)


                Button(action: {
                    withAnimation(.easeInOut(duration: 1.12)) {
                        self.Enter = true
                    }
                }) {
                    Rectangle()
                        .foregroundColor(Color.blue)
                        .frame(width: 80, height: 80, alignment: .center)
                        .opacity(self.Enter ? 0 : 1)
                }
                 //.padding(.horizontal, self.Enter ? 50 : 10)




                Rectangle()
                    .foregroundColor(Color.green)
                    .frame(width: 80, height: 80, alignment: .center)
                    .offset(x: self.Enter ? 30 : 0 , y: 0)

                Rectangle()
                    .foregroundColor(Color.red)
                    .frame(width: 80, height: 80, alignment: .center)



            }
            .padding(.leading, 67 )
            .padding(.trailing, 110)
                // .padding(.top, (screen.height)/81.2)
                .padding(.bottom, 10)
        }


    HStack {
        Rectangle()
        .foregroundColor(Color.purple)
            .frame(width: 80, height: 80, alignment: .center)
         .offset(x: self.Enter ? 80 : 0 , y: 0)
    }
    }
}

Answer 1

Using implicit vice explicit animation often works for me in these situations. This should accomplish what you were looking for: (works in the Xcode 11 GM seed)

Update: GM seed is apparently not passing the animation inside the scroll view. Edited to apply animation to both the HStack and the lone purple box

struct Square: View {
    let color: Color

    var body: some View {
        Rectangle()
            .fill(color)
            .frame(width: 80, height: 80)
    }
}

struct SquareAnimation: View {
    @State private var enter = false

    var body: some View {
        VStack {
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 15) {
                    Square(color: .red)
                    Square(color: .blue)
                        .opacity(self.enter ? 0.25 : 1)
                        .onTapGesture {
                            self.enter.toggle()
                    }
                    Square(color: .green)
                        .offset(x: self.enter ? 30 : 0)
                    Square(color: .red)
                }
                .animation(.easeInOut)
            }

            Square(color: .purple)
                .offset(x: self.enter ? 80 : 0)
                .animation(.easeInOut)
        }
    }
}

Answer 2

I am stuck with same problem. Solution by smr has helped. However, I was not able to get show/hide view animation. Following is an example:

struct Test: View {

    @State var showView = false

    var body: some View {

        ScrollView {

            Button(action: {
                self.showView.toggle()
            }) {
                Text("Toggle View")
            }

            if showView {
                Text("Some View")
            }

        }
        .animation(.easeInOut)

    }
}