When creating a multi-page Ceros experience, you’ll notice that we apply a default set of arrow icons 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 Ceros arrows and create your own navigation!
To remove the default page navigation:
- Select the paintbrush icon to open up the Theme panel
- Uncheck “enable arrows” and press Done
- Now you can design and set up your own navigational structure
When using your own navigation, it is important to note the difference between a “Go to Next Page” and a “Go to Page X” transition. If you set up a “Go to Next Page” transition, it will slide or swipe to the next page. A “Go to Page X” 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 X” 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, create an interaction that says “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 X” interactions, and the different assets on each page then are set up to animate in On View:
Click here to import this experience to Ceros
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 Designer Course.