When creating a multi-page experience, you’ll notice that we apply a default set of page navigation arrows to help users navigate the experience. However, in some instances, you may not want to use the default, linear navigation. If this is the case, you can remove the standard navigation arrows and create your own navigation!
To remove the default page navigation
In the Studio, select the paintbrush icon to open up the Theme Panel
Uncheck Enable arrows and click Done
Now you can design and set up your navigational structure
Creating custom page navigation
When creating your experience navigation, it is important to note the difference between a Go to Next Page and a Go to Page transition. If you set up a Go to Next Page transition, it will slide or swipe to the next page. A Go to Page interaction will not have a swiping transition. Instead, the page will just appear. To create an even more intricate page transition, you can combine a Go to Page interaction with different animation types on each object.
To start, place something on your first page such as an arrow, a menu, an icon, etc., that will be used for page navigation, and place a hotspot over it
On the hotspot, add the interaction On Click –> Go to Page 2
Apply an On View animation to all of the content on page 2 so that the animation occurs when your page displays, this will create the effect of having a transition between those pages.
You can continue to repeat this process for all subsequent pages to create consistent transitions between all of the pages in your experience.
You can see an example of unique transitions created via this method in the experience below. In this experience, clicking the different plus signs takes you to different pages of the experience. The plus signs have hotspots over them with On Click -> Go to Page interactions, and the different assets on each page then are set up to animate in On View:
Click the button below to import this experience into your account.
Another way to create different navigation, rather than using page arrows, is by building out a menu to direct users to specific pages. To learn how to do this, check out this video lesson.