# How do I simplify navigation in single page application **URL:** \ **Category:** Questions\ **Created:** [February 16, 2023, 4:08pm UTC](https://forum.bubble.io/t/how-do-i-simplify-navigation-in-single-page-application/247319 "2023-02-16T16:08:27Z")\ **Posts on this page:** 16\ **Page:** 1
**Author:** ![wknepp](https://avatars.discourse-cdn.com/v4/letter/w/90db22/32.png) [@wknepp](https://forum.bubble.io/u/wknepp)\ **Post date:** [February 16, 2023, 4:08pm UTC](https://forum.bubble.io/t/how-do-i-simplify-navigation-in-single-page-application/247319/1 "2023-02-16T16:08:27Z")
I’m creating an app with many pages, and the best way I have come up with to switch between them is to animate every other page out and then animate the correct page in. The problem is that every page I add requires a lot of work because I have to add the animation out block to all my previous workflows. I’m aware that I can automatically show and hide the groups by using a custom state, but it is important to me that the groups are animated out and in. Does anyone have a better solution to this? Thanks, Wyatt ![image](https://us1.discourse-cdn.com/bubble/original/3X/3/a/3aa8a31004a5c1ab6962473fd27bc41daedb39b1.png) ---
**Author:** ![snowsnow](https://avatars.discourse-cdn.com/v4/letter/s/ed655f/32.png) [@snowsnow](https://forum.bubble.io/u/snowsnow)\ **Post date:** [February 16, 2023, 6:28pm UTC](https://forum.bubble.io/t/how-do-i-simplify-navigation-in-single-page-application/247319/2 "2023-02-16T18:28:43Z")
You can use url parameters. If you want to navigate to “About” page, you create a workflow when “About” button is clicked: Select action Naviagation/Go to Page… Select page Index Send more parameters to the page: Key= p Value = About Then you create a workflow: When Get parameter from URL (p) is “About” → animate section “About” (Show) Then one more workflow: When Get parameter from URL (p) is not “About” → animate section “About” (Hide) And set all the sections as non-visible on page load (except for the home page section) Is it clear enough? 🙂 ---
**Author:** ![wknepp](https://avatars.discourse-cdn.com/v4/letter/w/90db22/32.png) [@wknepp](https://forum.bubble.io/u/wknepp)\ **Post date:** [February 16, 2023, 8:25pm UTC](https://forum.bubble.io/t/how-do-i-simplify-navigation-in-single-page-application/247319/3 "2023-02-16T20:25:08Z")
Can I change the URL parameters without refreshing the page? ---
**Author:** ![snowsnow](https://avatars.discourse-cdn.com/v4/letter/s/ed655f/32.png) [@snowsnow](https://forum.bubble.io/u/snowsnow)\ **Post date:** [February 16, 2023, 10:04pm UTC](https://forum.bubble.io/t/how-do-i-simplify-navigation-in-single-page-application/247319/4 "2023-02-16T22:04:45Z")
@wknepp Yes. If you are on page index and use the action “go to page…” → index, the page doesn’t get refreshed, it only updates the URL parameters. If you don’t set any new parameters, it clears the current parameters. Otherwise, it sets any new parameter that you send. ---
**Author:** ![wknepp](https://avatars.discourse-cdn.com/v4/letter/w/90db22/32.png) [@wknepp](https://forum.bubble.io/u/wknepp)\ **Post date:** [February 16, 2023, 10:28pm UTC](https://forum.bubble.io/t/how-do-i-simplify-navigation-in-single-page-application/247319/5 "2023-02-16T22:28:32Z")
Gotcha, I’ll give that a try later. Thanks so much! ---
**Author:** ![ihsanzainal84](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/ihsanzainal84/32/245932_2.png) [@ihsanzainal84](https://forum.bubble.io/u/ihsanzainal84)\ **Post date:** [February 17, 2023, 8:40am UTC](https://forum.bubble.io/t/how-do-i-simplify-navigation-in-single-page-application/247319/6 "2023-02-17T08:40:39Z")
When you have an element set as “collapse when hidden” there are options for transitions which includes slide in/out transitions. ---
**Author:** ![snowsnow](https://avatars.discourse-cdn.com/v4/letter/s/ed655f/32.png) [@snowsnow](https://forum.bubble.io/u/snowsnow)\ **Post date:** [February 17, 2023, 8:48am UTC](https://forum.bubble.io/t/how-do-i-simplify-navigation-in-single-page-application/247319/7 "2023-02-17T08:48:41Z")
@ihsanzainal84 True. The reason why I don’t use that, is that those transition are limited and not customisable (duration, direction of the animation) compared to the “animate element” action… ---
**Author:** ![ihsanzainal84](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/ihsanzainal84/32/245932_2.png) [@ihsanzainal84](https://forum.bubble.io/u/ihsanzainal84)\ **Post date:** [February 17, 2023, 8:53am UTC](https://forum.bubble.io/t/how-do-i-simplify-navigation-in-single-page-application/247319/8 "2023-02-17T08:53:01Z")
I know what you mean trust me 🙂 Well once you have your workflows set up as suggested by another user it’s just a matter of copy paste and hope you don’t have to worry about it anymore. ---
**Author:** ![wknepp](https://avatars.discourse-cdn.com/v4/letter/w/90db22/32.png) [@wknepp](https://forum.bubble.io/u/wknepp)\ **Post date:** [February 17, 2023, 4:10pm UTC](https://forum.bubble.io/t/how-do-i-simplify-navigation-in-single-page-application/247319/9 "2023-02-17T16:10:21Z")
This seems to work great! I didn’t end up using URL parameters as it was easier for me to just use custom states, but thanks for the help! ---
**Author:** ![snowsnow](https://avatars.discourse-cdn.com/v4/letter/s/ed655f/32.png) [@snowsnow](https://forum.bubble.io/u/snowsnow)\ **Post date:** [February 17, 2023, 5:41pm UTC](https://forum.bubble.io/t/how-do-i-simplify-navigation-in-single-page-application/247319/10 "2023-02-17T17:41:44Z")
@wknepp The problem with using custom states is that they don’t allow you to navigate back / forward using the browser buttons. This may cause issues. For example, if a user push the back button, it may navigate outside of your app. Url parameters instead, create a different page history every time you navigate to a different section of your app. I had initially used custom states for navigation on my single page app. Then, after discovering this issue, I rebuilt everything using url parameters… ---
**Author:** ![wknepp](https://avatars.discourse-cdn.com/v4/letter/w/90db22/32.png) [@wknepp](https://forum.bubble.io/u/wknepp)\ **Post date:** [February 17, 2023, 9:20pm UTC](https://forum.bubble.io/t/how-do-i-simplify-navigation-in-single-page-application/247319/11 "2023-02-17T21:20:26Z")
I don’t think this will be a problem for me, as my app is meant to look and feel like a native app, so having back buttons would actually go against its design. ---
**Author:** ![ihsanzainal84](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/ihsanzainal84/32/245932_2.png) [@ihsanzainal84](https://forum.bubble.io/u/ihsanzainal84)\ **Post date:** [February 18, 2023, 4:19am UTC](https://forum.bubble.io/t/how-do-i-simplify-navigation-in-single-page-application/247319/12 "2023-02-18T04:19:12Z")
He meant the browser’s back button or when a user refreshes the page. Using states means the they get reset at every refresh/back and hence affecting the user experience. ---
**Author:** ![snowsnow](https://avatars.discourse-cdn.com/v4/letter/s/ed655f/32.png) [@snowsnow](https://forum.bubble.io/u/snowsnow)\ **Post date:** [February 18, 2023, 8:38am UTC](https://forum.bubble.io/t/how-do-i-simplify-navigation-in-single-page-application/247319/13 "2023-02-18T08:38:47Z")
@wknepp Keep in mind that on iOS (I don’t know about Android) a user can instinctively swipe right to navigate to a previous page/section of your app. With URL parameters this is not an issue but you can try to do that on your app and see how it behaves… ---
**Author:** ![wknepp](https://avatars.discourse-cdn.com/v4/letter/w/90db22/32.png) [@wknepp](https://forum.bubble.io/u/wknepp)\ **Post date:** [February 20, 2023, 5:34pm UTC](https://forum.bubble.io/t/how-do-i-simplify-navigation-in-single-page-application/247319/14 "2023-02-20T17:34:10Z")
Thank you for telling me this. I did not know that this was a thing. ---
**Author:** ![sanjeevscode](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sanjeevscode/32/160480_2.png) [@sanjeevscode](https://forum.bubble.io/u/sanjeevscode)\ **Post date:** [February 20, 2023, 6:02pm UTC](https://forum.bubble.io/t/how-do-i-simplify-navigation-in-single-page-application/247319/15 "2023-02-20T18:02:28Z")
Have you released your app to the play stores? What wrapper did you use? @snowsnow ---
**Author:** ![snowsnow](https://avatars.discourse-cdn.com/v4/letter/s/ed655f/32.png) [@snowsnow](https://forum.bubble.io/u/snowsnow)\ **Post date:** [February 20, 2023, 6:14pm UTC](https://forum.bubble.io/t/how-do-i-simplify-navigation-in-single-page-application/247319/16 "2023-02-20T18:14:00Z")
I’ve just uploaded my app to Apple TestFlight today to test it before launching. I’m using Superview, which I think it’s great for the price…