TabView Indicator doesn't move when page changes

Question

When I scroll from one page to the other the horizontal indicator bar doesn't move, what would be the appropriate way to move it (with animation if possible)?

The green area below doesn't move to the right once I switch to the analytics area.

Here's the full code:

enum PortfolioTabBarOptions: Hashable, CaseIterable {
    case balance, analytics
    
    var menuString: String { String(describing: self) }
}


struct CustomPagerTabView: View {
    
    @Binding var selectedTab: PortfolioTabBarOptions
    
    @State var tabOffset: CGFloat = 0
    
    var body: some View {
        VStack {
            HStack(alignment: .center) {
                HStack(spacing: 100) {
                    ForEach(Array(PortfolioTabBarOptions.allCases.enumerated()), id: \.element) { index, element in
                        // Current Tab
                        if(selectedTab.menuString == element.menuString) {
                            Text(element.menuString.capitalizeFirstLetter())
                                .font(.system(size: 15.0))
                                .bold()
                                .onTapGesture() {
                                    selectedTab = element.self
                                }
                                .onAppear {
                                    self.tabOffset = CGFloat(index)
                                }
                        }
                        // Innactive Tabs
                        else {
                            Text(element.menuString.capitalizeFirstLetter())
                                .foregroundColor(.gray)
                                .font(.system(size: 15.0))
                                .bold()
                                .onTapGesture() {
                                    selectedTab = element.self
                                }
                        }
                    }
                }
                .padding(.horizontal)
            }
            
            // Indicator...
            Capsule()
                .fill(.gray)
            // Width of the indicator bar
                .frame(width: PortfolioTabBarOptions.allCases.count == 0 ? 0 : (getScreenBounds().width / CGFloat(PortfolioTabBarOptions.allCases.count)), height: 1.2)
                .padding(.top,10)
                .frame(maxWidth: .infinity,alignment: .leading)
                .offset(x: tabOffset)
        }
        .padding(.top)
    }
}

Answer 1

The green area below does move to the right, but only 1 pixel. Try something like this example code, choose the value (200) most suited for your purpose:

.onAppear {
    self.tabOffset = CGFloat(index*200)  // <-- here
}