# Page transition problem

**URL:** <https://forums.fusetools.com/t/page-transition-problem/3342>\
**Category:** How-to Discussions\
**Created:** [October 5, 2016, 8:16am UTC](https://forums.fusetools.com/t/page-transition-problem/3342 "2016-10-05T08:16:08Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![0427hjy](https://avatars.discourse-cdn.com/v4/letter/0/94ad74/32.png) [@0427hjy](https://forums.fusetools.com/u/0427hjy)\
**Post date:** [October 5, 2016, 8:16am UTC](https://forums.fusetools.com/t/page-transition-problem/3342/1 "2016-10-05T08:16:08Z")

</div>

Hi.  
I have a question regarding page transition.  
I have worked my work on rotating-sidebar example from fuse.  
What I was trying to do was that making a button to go to a new page.  
I tried to use login-transition example to do it, but it was not successful.  
Can someone help me with it?? Thank you

- [Attached ZIP file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/acrffxShcHGS-image-1475655211944.zip)

---

<div class="post-metadata">

**Author:** ![Cjay](https://avatars.discourse-cdn.com/v4/letter/c/e68b1a/32.png) [@Cjay](https://forums.fusetools.com/u/Cjay)\
**Post date:** [October 5, 2016, 3:15pm UTC](https://forums.fusetools.com/t/page-transition-problem/3342/2 "2016-10-05T15:15:00Z")

</div>

I didn’t full understand your question but here is a simple example of page navigation using the [Navigator Class](https://www.fusetools.com/docs/fuse/controls/navigator). However, i advice you create a separate file for each page.

```auto
<App>
	<Router ux:Name="router"/>

	<JavaScript>
	  function goNext(){
			router.push('pages');
		}

		function goBack(){
			router.goBack();
		}

		module.exports={
			goNext,
			goBack
		}
	</JavaScript>

	<ClientPanel>
		<Navigator DefaultTemplate="page">
			  <PageOne ux:Template="page" router="router"/>
				<PageTwo ux:Template="pages" router="router"/>
		</Navigator>

		<!-- Page One -->
		<Page ux:Class="PageOne">
			<Router ux:Dependency="router" />
			<StackPanel>
				<Text FontSize="30" Margin="10">Page One</Text>
				<Button Clicked="{goNext}" Alignment="Center" Text="Next Page"/>
			</StackPanel>
		</Page>

		<!-- Page Two -->
		<Page ux:Class="PageTwo">
			<Router ux:Dependency="router" />
			<StackPanel>
				<Text FontSize="30" Margin="10">Page Two</Text>
				<Button Clicked="{goBack}" Alignment="Center" Text="GO Back"/>
			</StackPanel>
		</Page>
	</ClientPanel>
</App>

```