# PageControl inside Page and custom animation

**URL:** <https://forums.fusetools.com/t/pagecontrol-inside-page-and-custom-animation/7025>\
**Category:** How-to Discussions\
**Created:** [June 23, 2016, 10:27am UTC](https://forums.fusetools.com/t/pagecontrol-inside-page-and-custom-animation/7025 "2016-06-23T10:27:01Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fotis](https://avatars.discourse-cdn.com/v4/letter/f/4af34b/32.png) [@Fotis](https://forums.fusetools.com/u/Fotis)\
**Post date:** [June 23, 2016, 10:27am UTC](https://forums.fusetools.com/t/pagecontrol-inside-page-and-custom-animation/7025/1 "2016-06-23T10:27:01Z")

</div>

I have this code :

```auto
<Page ux:Name="moviePanel" Transition="None">
  <Image File="05.png" Alignment="Center" Layer="Background"/>
  <LinearNavigation ux:Name="navigation">
      <NavigationMotion GotoEasing="CircularOut" GotoDuration="0.5" Overflow="Open"/> <!-- TODO Duration check on phone -->
  </LinearNavigation>
  <SwipeNavigate ux:Name="swipeNavigate" ForwardDirection="Right"/>

  <PageControl ux:Name="pageControl" >
    <Each Items="{movieList}">
        <MovieCard />
    </Each>
  </PageControl>

  <Panel Alignment="Bottom">
    <PageIndicator ux:Name="pageIndicator" Navigation="pageControl" Dock="Bottom" Alignment="TopCenter">
          <Circle ux:Template="Dot" ux:Name="dotFac" Color="#C6C6C9" Margin="5" Width="10" Height="20">
              <ActivatingAnimation>
              <Scale Factor="1.1"/>
              <Change dotFac.Color="#fed166" />
            </ActivatingAnimation>
        </Circle>
    </PageIndicator>
  </Panel>
</Page>

```

I added pageControl so i can have the pageIndicators at the bottom of my screen. My problem is that when i added the pageControl it ignored completely the `LinearNavigation` and `SwipeNavigation` plus every `EnteringAnimation, WhileActive` etc i have inside MovieCard class. What am i doing wrong ?

Thanks

---

<div class="post-metadata">

**Author:** ![Vegard\_Strand\_Lende](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/vegard_strand_lende/32/349_2.png) [@Vegard\_Strand\_Lende](https://forums.fusetools.com/u/Vegard_Strand_Lende)\
**Post date:** [June 23, 2016, 2:13pm UTC](https://forums.fusetools.com/t/pagecontrol-inside-page-and-custom-animation/7025/2 "2016-06-23T14:13:35Z")

</div>

Hi!

`<PageControl />` has default animations for Pages put in it. Try setting `<PageControl Transition="None" />`

please also have a look at the docs for [PageControl](https://www.fusetools.com/docs/fuse/controls/pagecontrol)

---

<div class="post-metadata">

**Author:** ![Fotis](https://avatars.discourse-cdn.com/v4/letter/f/4af34b/32.png) [@Fotis](https://forums.fusetools.com/u/Fotis)\
**Post date:** [June 23, 2016, 4:18pm UTC](https://forums.fusetools.com/t/pagecontrol-inside-page-and-custom-animation/7025/3 "2016-06-23T16:18:05Z")

</div>

Hello and thanks for the answer! i added `Transition="None"` to the `PageControl` as you said. My problem now is that i can’t find out how to add my old transition effects; or what i am doing wrong…

I tried adding these lines inside the `PageControl`

```auto
<LinearNavigation ux:Name="navigation">
    <NavigationMotion GotoEasing="CircularOut" GotoDuration="0.5" Overflow="Open"/>
</LinearNavigation>
<SwipeNavigate ux:Name="swipeNavigate" ForwardDirection="Right"/>

```

but when i do the swipe doesn’t work.

[Without PageControl](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/bYiUeTmbA6wI-legacy-files-IAADsdY5HxhXdgLG-hpxggKM2gT1jOC2-za7ppA0m.mp4)

As i show you in the first video without the `pageControl` my original animation was like this and the left and right cards were still shown but with different opacity. Now if i add the `pageControl` the result is the second video.

[With PageControl](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/CWvISZKHkddk-legacy-files-dOfZNAqhFwNawHH4-3LzcO5Ystbg0I3DdVYgNAmQr.mp4)

---

<div class="post-metadata">

**Author:** ![Vegard\_Strand\_Lende](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/vegard_strand_lende/32/349_2.png) [@Vegard\_Strand\_Lende](https://forums.fusetools.com/u/Vegard_Strand_Lende)\
**Post date:** [June 24, 2016, 10:38am UTC](https://forums.fusetools.com/t/pagecontrol-inside-page-and-custom-animation/7025/4 "2016-06-24T10:38:31Z")

</div>

A `<PageControl />` already has `LinearNavigation` and `SwipeNavigate` on it. Have a look at this example:

```auto
<App>

    <Page ux:Class="MyPage" TransformOrigin="TopLeft">
        <EnteringAnimation>
            <Rotate Degrees="90" />
            <Scale Factor="0.5" />
        </EnteringAnimation>
        <ExitingAnimation>
            <Move RelativeTo="Size" X="1" />
        </ExitingAnimation>
    </Page>

    <PageControl Transition="None">
        <MyPage Color="#fc0" />
        <MyPage Color="#0cf" />
        <MyPage Color="#cf0" />
    </PageControl>

</App>

```

---

<div class="post-metadata">

**Author:** ![Fotis](https://avatars.discourse-cdn.com/v4/letter/f/4af34b/32.png) [@Fotis](https://forums.fusetools.com/u/Fotis)\
**Post date:** [June 24, 2016, 1:47pm UTC](https://forums.fusetools.com/t/pagecontrol-inside-page-and-custom-animation/7025/5 "2016-06-24T13:47:01Z")

</div>

I already have `EnteringAnimation` and `ExitingAnimation` to my pages and i found my way with the `navigationMotion` and `SwipeNavigate`. My problem now is that as show to the videos above it keeps dissapearing the next and previous cards. Any idea why ?

Thank you very much for the help so far !