# Issue when select tab on Tabs-layoutmaster example

**URL:** <https://forums.fusetools.com/t/issue-when-select-tab-on-tabs-layoutmaster-example/5482>\
**Category:** How-to Discussions\
**Created:** [August 18, 2017, 10:40am UTC](https://forums.fusetools.com/t/issue-when-select-tab-on-tabs-layoutmaster-example/5482 "2017-08-18T10:40:14Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![phuongwd](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/phuongwd/32/431_2.png) [@phuongwd](https://forums.fusetools.com/u/phuongwd)\
**Post date:** [August 18, 2017, 10:40am UTC](https://forums.fusetools.com/t/issue-when-select-tab-on-tabs-layoutmaster-example/5482/1 "2017-08-18T10:40:14Z")

</div>

Hello,

Disable transition when select tab by code \*Transition=“None”\*\

But I got this issue:

### Steps to Reproduce:

**Page 1 (active)** - Page 2 - Page 3

- current active: Page 1
- select tab Page 3

### Actual Behavior:

The indicator and page move from Page 1 -\> Page 2 -\> Page 3

### Expected Behavior:

The indicator and page move from Page 1 -\> Page 3

### Code:

```auto
<PageControl ux:Name="navigation">
    <Page ux:Name="page1" Background="#eee" Transition="None">
        <WhileActive Threshold="0.5">
            <Set indicator.LayoutMaster="page1Tab" />
        </WhileActive>
        <WelcomeText>Welcome to Page 1</WelcomeText>
    </Page>
    <Page ux:Name="page2" Background="#abb7b7" Transition="None">
        <WhileActive Threshold="0.5">
            <Set indicator.LayoutMaster="page2Tab" />
        </WhileActive>
        <WelcomeText>Welcome to Page 2</WelcomeText>
    </Page>
    <Page ux:Name="page3" Background="#f2f1ef" Transition="None">
        <WhileActive Threshold="0.5">
            <Set indicator.LayoutMaster="page3Tab" />
        </WhileActive>
        <WelcomeText>Welcome to Page 3</WelcomeText>
    </Page>
</PageControl>

```

On this example: [Tabs layout master](https://www.fusetools.com/examples/tabs-layoutmaster)

Could you please help?

Thank you very much!

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [August 18, 2017, 11:13am UTC](https://forums.fusetools.com/t/issue-when-select-tab-on-tabs-layoutmaster-example/5482/2 "2017-08-18T11:13:23Z")

</div>

A `PageControl` has continuous navigation progress, so to get to page 3, it has to activate page 2 for a split second.

`Transition` only describes _how the transition looks_ - if you set it to `None`, the page will activate/deactivate immediately, without animation. This does not allow you to “magically jump over” pages.

The other part of the question, how the indicator moves, is described by `LayoutAnimation`:

```auto
<LayoutAnimation>
	<Move RelativeTo="WorldPositionChange" X="1" Duration="0.4" Easing="BackIn"/>
</LayoutAnimation>

```

So, as the pages in `PageControl` get activated, those trigger the `LayoutAnimation` on indicator and it slides to wherever the new destination is.

To achieve your expected behaviour then, you need to use a `Navigator` which does not have continuous progress. In addition to that, you need to make your own custom transitions so you can go from any page to any other page. And you need to create a new `LayoutAnimation` for the indicator, possibly by using an `Attractor`.

For custom transitions in a `Navigator`, take a look at [this example](https://github.com/fusetools/fuse-samples/tree/master/Samples/UIStructure/Transition).

---

<div class="post-metadata">

**Author:** ![phuongwd](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/phuongwd/32/431_2.png) [@phuongwd](https://forums.fusetools.com/u/phuongwd)\
**Post date:** [August 18, 2017, 2:10pm UTC](https://forums.fusetools.com/t/issue-when-select-tab-on-tabs-layoutmaster-example/5482/3 "2017-08-18T14:10:24Z")

</div>

@Uldis,

Supper thanks,

I still keep `LayoutAnimation` to move indicator.

```auto
<Rectangle ux:Name="indicator" LayoutMaster="page1Tab" Alignment="Bottom" Height="4" Color="#6c7a89">
    <LayoutAnimation>
        <Move RelativeTo="WorldPositionChange" X="1" Duration="0.4" Easing="BackIn"/>
    </LayoutAnimation>
</Rectangle>

```

And here is code:

### JavaScript:

```auto
<JavaScript>
    function goHome() {
        router.push('home');
    }

    function goExplore() {
        router.push('explore');
    }

    function goExamples() {
        router.push('fuseExamples');
    }

    module.exports = {
        goHome: goHome,
        goExplore: goExplore,
        goExamples: goExamples
    }
</JavaScript>

```

### UX:

As your suggest, I use `Navigator`:

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

<DockPanel>
    <StatusBarBackground Margin="0,0,0,15"/>
    <Panel ux:Class="Tab" ClipToBounds="false" Margin="0,0,0,4" Background="#bdc3c7">
        <string ux:Property="Text" />
        <Text Value="{ReadProperty Text}" Color="#FFF" Alignment="Center" />
    </Panel>
    <Rectangle ux:Name="indicator" LayoutMaster="page1Tab" Alignment="Bottom" Height="4" Color="#6c7a89">
        <LayoutAnimation>
            <Move RelativeTo="WorldPositionChange" X="1" Duration="0.4" Easing="BackIn"/>
        </LayoutAnimation>
    </Rectangle>

    <Navigator DefaultPath="splash" ClipToBounds="true">
        
        <SplashPage ux:Template="splash" router="router" Background="#fff" />

        <LoginPage ux:Template="login" router="router" Background="#fff"/>

        <HomePage ux:Template="home" router="router" Background="#fff"/>

        <ExplorePage ux:Template="explore" router="router" Background="#fff"/>

        <FuseExamplesPage ux:Template="fuseExamples" router="router" Background="#fff"/>

    </Navigator>
    <Grid Dock="Bottom" ColumnCount="3" Height="50" Background="#bdc3c7">
         <Panel ux:Name="page1Tab">
            <Tab Text="Today">
                <Clicked Handler="{goHome}">
                    <Set indicator.LayoutMaster="page1Tab" />
                </Clicked>
            </Tab>
        </Panel>
        <Panel ux:Name="page2Tab">
            <Tab Text="Explore">
                <Clicked Handler="{goExplore}">
                    <Set indicator.LayoutMaster="page2Tab" />
                </Clicked>
            </Tab>
        </Panel>
        <Panel ux:Name="page3Tab">
            <Tab Text="Examples">
                <Clicked Handler="{goExamples}">
                    <Set indicator.LayoutMaster="page3Tab" />
                </Clicked>
            </Tab>
        </Panel> 
    </Grid>
    <BottomFrameBackground Dock="Bottom"/>
</DockPanel>

```

Can you review and give me your feedback?

Thank you in advance!

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [August 21, 2017, 12:26pm UTC](https://forums.fusetools.com/t/issue-when-select-tab-on-tabs-layoutmaster-example/5482/4 "2017-08-21T12:26:59Z")

</div>

Well if it works like you wanted, this is solved. What kind of feedback do you want me to give?