Im trying to place LottieSwitches on top of each other in a VStack with SwiftUI and it's leaving a larger vertical gap between the switches. Using .frame(height: XX) is correctly changing the height of the switch but it doesn't eliminate the large gap between them
VStack(spacing: 0) {
HStack {
Text("XXX")
.fontAndColorModifier(size: 16, color: .white, fontWeight: "Poppins-Medium")
LottieSwitch(animation: .named("On-Toggle"))
.isOn($fictionToggleIsOff)
.onAnimation(fromProgress: 0.5, toProgress: 1.0)
.offAnimation(fromProgress: 0.0, toProgress: 0.5)
.frame(height: 55)
Spacer(minLength: 10)
Text("XXX")
.fontAndColorModifier(size: 16, color: .white, fontWeight: "Poppins-Medium")
LottieSwitch(animation: .named("On-Toggle"))
.isOn($nonfictionToggleIsOff)
.onAnimation(fromProgress: 0.5, toProgress: 1.0)
.offAnimation(fromProgress: 0.0, toProgress: 0.5)
.frame(height: 55)
}
.padding(.leading, 20)
.padding(.trailing, 20)
HStack {
Text("XXX")
.fontAndColorModifier(size: 16, color: .white, fontWeight: "Poppins-Medium")
LottieSwitch(animation: .named("On-Toggle"))
.isOn($paperbackToggleIsOff)
.onAnimation(fromProgress: 0.5, toProgress: 1.0)
.offAnimation(fromProgress: 0.0, toProgress: 0.5)
.frame(height: 55)
Spacer(minLength: 10)
Text("XXX")
.fontAndColorModifier(size: 16, color: .white, fontWeight: "Poppins-Medium")
LottieSwitch(animation: .named("On-Toggle"))
.isOn($hardcoverToggleIsOff)
.onAnimation(fromProgress: 0.5, toProgress: 1.0)
.offAnimation(fromProgress: 0.0, toProgress: 0.5)
.frame(height: 55)
}
.padding(.leading, 20)
.padding(.trailing, 20)
}
The LottieFiles have a large padding around the animations. The solution was to use After Effects to crop any excess padding from the animations and re-save. An alternative is to use a bunch of ZStacks to deal with the excess padding