# Custom transition on Page in PageControl

**URL:** <https://forums.fusetools.com/t/custom-transition-on-page-in-pagecontrol/6052>\
**Category:** How-to Discussions\
**Created:** [July 25, 2016, 9:53am UTC](https://forums.fusetools.com/t/custom-transition-on-page-in-pagecontrol/6052 "2016-07-25T09:53:56Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fahad](https://avatars.discourse-cdn.com/v4/letter/f/ecccb3/32.png) [@Fahad](https://forums.fusetools.com/u/Fahad)\
**Post date:** [July 25, 2016, 9:53am UTC](https://forums.fusetools.com/t/custom-transition-on-page-in-pagecontrol/6052/1 "2016-07-25T09:53:56Z")

</div>

I have a router navigation set up with `PageControl`, but I have one page which isn’t really supposed to be part of the `PageControl`, it needs to slide up into the view from the bottom ( `<Move Y="-1" RelativeTo="Size" Duration... Easing... />` )

The problem is this doesn’t “fit in” to the PageControl, because it shouldn’t be accessible by swiping and should just go over whatever the current page is. How would I go about doing this, while still holding on to normal router functions like passing data through `.push()` and that page having it’s own bit of navigation? Thanks

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [July 25, 2016, 10:59am UTC](https://forums.fusetools.com/t/custom-transition-on-page-in-pagecontrol/6052/2 "2016-07-25T10:59:43Z")

</div>

Hi, something like this?

```auto
<Panel>
    <Panel> 
        <!-- ... this is the sliding up panel .. -->
        <WhileTrue Value="{showOverlay}">
            <Move ... />
        </WhileTrue>
    </Panel>
    <PageControl />

```

---

<div class="post-metadata">

**Author:** ![Fahad](https://avatars.discourse-cdn.com/v4/letter/f/ecccb3/32.png) [@Fahad](https://forums.fusetools.com/u/Fahad)\
**Post date:** [July 25, 2016, 11:01am UTC](https://forums.fusetools.com/t/custom-transition-on-page-in-pagecontrol/6052/3 "2016-07-25T11:01:50Z")

</div>

Hey, that works! But would it still be accessible vai the router?

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [July 25, 2016, 11:16am UTC](https://forums.fusetools.com/t/custom-transition-on-page-in-pagecontrol/6052/4 "2016-07-25T11:16:39Z")

</div>

You can encode whether to have the overlay open in your route parameter:

```auto
router.goto("foo", { showOverlay: true });

```

Then you can do:

```auto
<Panel ux:Name="overlayContainer" >
  <JavaScript>
      var Observable = require("FuseJS/Observable");

      overlayContainer.showOverlay = Observable(false);

      module.exports = { showOverlay: overlayContainer.showOverlay }
  </JavaScript>
  <Panel> 
      <!-- ... this is the sliding up panel .. -->
      <WhileTrue Value="{showOverlay}">
          <Move ... />
      </WhileTrue>
  </Panel>
  <PageControl />

```

Then from the pages within your pagecontrol, you can do

```auto
this.onParameterChanged(function(param) {
    overlayContainer.showOverlay.value = param.showOverlay;

```

If the pages are classes, you have to make a dependency: `<Panel ux:Dependency="overlayContainer">`

---

<div class="post-metadata">

**Author:** ![Fahad](https://avatars.discourse-cdn.com/v4/letter/f/ecccb3/32.png) [@Fahad](https://forums.fusetools.com/u/Fahad)\
**Post date:** [July 25, 2016, 4:55pm UTC](https://forums.fusetools.com/t/custom-transition-on-page-in-pagecontrol/6052/5 "2016-07-25T16:55:52Z")

</div>

Thanks!