SwiftUI Animation: How to Move THEN Show? - swiftui

Question

Example
Here is a menu with three items:
This is fine. But what I would like to achieve is:
Menu expands
Then the three images fade-in AFTER the menu is done expanding
I thought maybe adding a 2nd, delayed animation for the opacity might work but instead, it looks like all animation (movement and opacity) gets delayed:
Here is the code:
struct SequenceAnimation_SOQuestion: View {
#State private var show = false
var body: some View {
HStack(spacing: 40) {
Group {
Image(systemName: "pencil")
Image(systemName: "scribble")
Image(systemName: "lasso")
}
.opacity(show ? 1 : 0)
.animation(Animation.default.delay(0.5))
Button(action: { self.show.toggle() }) {
Image(systemName: "line.horizontal.3.decrease")
.rotationEffect(.degrees(-90))
}.offset(x: 10)
}
.padding(20)
.padding(.leading, 40)
.foregroundColor(.white)
.background(Capsule().fill(Color.blue))
.font(.largeTitle)
.offset(x: show ? -70 : -320)
.animation(.default)
}
}

Answer 1

You should add each animation separately, then you can have different animations for each one:
struct ContentView: View {
#State private var isMenuCollapsed = true
#State private var isItemsVisible = false
var body: some View {
HStack(spacing: 40) {
Group {
Image(systemName: "pencil")
Image(systemName: "scribble")
Image(systemName: "lasso")
}
.opacity(isItemsVisible ? 1 : 0)
Button(action: {
withAnimation(Animation.default) {
self.isMenuCollapsed.toggle()
}
withAnimation(Animation.default.delay(0.2)) {
self.isItemsVisible.toggle()
}
}) {
Image(systemName: "line.horizontal.3.decrease")
.rotationEffect(.degrees(-90))
}.offset(x: 10)
}
.padding(20)
.padding(.leading, 40)
.foregroundColor(.white)
.background(Capsule().fill(Color.blue))
.font(.largeTitle)
.offset(x: isMenuCollapsed ? -320 : -70)
}
}

Answer 2

I don't know exactly what kind of animation you want, but i worked something out which may be somewhere around your goal.
I changed the working of the animations. In your 2nd example your images were animation not right so that's what the following line fixes:
struct SequenceAnimation_SOQuestion: View {
#State private var show = false
var body: some View {
HStack(spacing: 40) {
Group {
Image(systemName: "pencil")
Image(systemName: "scribble")
Image(systemName: "lasso")
}
.opacity(show ? 1 : 0)
.animation(!self.show ? .default : Animation.default.delay(0.5))
Button(action: { self.show.toggle() }) {
Image(systemName: "line.horizontal.3.decrease")
.rotationEffect(.degrees(-90))
}.offset(x: 10)
}
.padding(20)
.padding(.leading, 40)
.foregroundColor(.white)
.background(Capsule().fill(Color.blue))
.font(.largeTitle)
.offset(x: show ? -70 : -320)
.animation(!self.show ? Animation.default.delay(0.5) : .default)
}
}
If you provide me a bit more specific information about your goal you're trying to achieve, I can maybe help you.