SOLVED: Problems with the animations of TabView for swipes vs 'Next' button

@TEMPEST

Apr '23

I've posted the code here: https://stackoverflow.com/questions/76024890/swiftui-tab-view-animation-different-when-swiping-vs-next-button-navigation

But the problem is that I want a Tab View (Page View) to be Swipeable and also navigate via a 'Next' Button (for Onboarding)

The issue is that to get the Swipe to work I have to bundle the 'selected' page inside a 'withAnimation' modifier.

But this then also smooth animates the 'Next' button on the last page (where it becomes the 'Continue' button) = it's a nice effect, but when the user swipes instead of taps the button to advance the page, the button DOES NOT animate between label states and it looks weird.

Is there a way to unify this, either way (no smooth button label animation) or (smooth button label animation on swipe AND tap)?

@Hectorcrdna

Apr '23

Hi, You could add an .animation(.default, value: buttonLabel) to the button so it animates on swipe and tap.

            Button(buttonLabel)
            {
              withAnimation
              {
                if self.selectedPage == numberOfPages
                {
                  // Complete the onboarding process - transition view here...

                  return
                }
                selectedPage += 1
              }
            }
            .animation(.default, value: buttonLabel)
            .buttonStyle(.borderedProminent)
            .foregroundColor(.white)

or you can use the .transaction to remove the button animation completely.

            Button(buttonLabel)
            {
              withAnimation
                {
                    if self.selectedPage == numberOfPages
                    {
                        // Complete the onboarding process - transition view here...

                        return
                    }

                    selectedPage += 1
                }
            }
            .transaction { transaction in
                transaction.animation = nil
            }
            .buttonStyle(.borderedProminent)
            .foregroundColor(.white)

your choice.

@TEMPEST

Apr '23

@Hectorcrdna

Thank you so much!

I haven't got that far in the SwiftUI 100 Days course, so these two modifiers are COMPLETELY new to me, but thank you so much!

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.