# Navigation animation example variation

**URL:** <https://forums.fusetools.com/t/navigation-animation-example-variation/2731>\
**Category:** How-to Discussions\
**Created:** [May 12, 2016, 11:46am UTC](https://forums.fusetools.com/t/navigation-animation-example-variation/2731 "2016-05-12T11:46:38Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![zaulin](https://avatars.discourse-cdn.com/v4/letter/z/d26b3c/32.png) [@zaulin](https://forums.fusetools.com/u/zaulin)\
**Post date:** [May 12, 2016, 11:46am UTC](https://forums.fusetools.com/t/navigation-animation-example-variation/2731/1 "2016-05-12T11:46:38Z")

</div>

Hi,

i have modified the Navigation animation example: [https://www.fusetools.com/examples/navigation-animation](https://www.fusetools.com/examples/navigation-animation)

leaving the class as:

```auto
<Panel ux:Class="Card" Height="256" Width="256" Alignment="Bottom" ux:Name="p">

<EnteringAnimation Scale="0.5">
    <Move RelativeTo="Size">
        <Keyframe X="-0.5" Time="0.4"/>
        <Keyframe X="-1" Time="0.6"/>
    </Move>
    <Scale Factor="0.5" Duration="1" />

</EnteringAnimation>

<ExitingAnimation Scale="0.5">
    <Move RelativeTo="Size"> 
        <Keyframe X="0.5" Time="0.6"/>
        <Keyframe X="0" Time="1"/>
    </Move>
    <Scale Factor="0.5" Duration="1" />
</ExitingAnimation>
</Panel>

```

and the ux:

```auto
    <Panel Margin="0,100">
        <LinearNavigation Duration="0.4" Easing="CircularOut"/>
        <SwipeNavigate SwipeDirection="Left" />
        <Each Items="{profiles}">
            <Card Name="{resource}" CachingMode="Never">
                <Image Source="{DataToResource resource}"/>
                <Clicked>
                    <NavigateTo Target="{resource}"/>
                </Clicked>
            </Card>
        </Each>
    </Panel>

```

getting the result:

![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/MGhBhk5BIZMo-legacy-files-WrxObUUEwpfq6YYp-w8DhY_QCHKy1NCvuoyttrW5N.png)

as u can see the card on the left is over the “active” card… how i do bring to bottom that one? (or bring to front the active)

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [May 12, 2016, 9:44pm UTC](https://forums.fusetools.com/t/navigation-animation-example-variation/2731/2 "2016-05-12T21:44:32Z")

</div>

Try adding `BringIntoView` inside of `Clicked`:

```auto
<Clicked>
  <BringIntoView />
</Clicked>

```

Not sure but you **might** need the `Target` property:

```auto
<Clicked>
  <BringIntoView Target="{resource}" />
</Clicked>

```

---

<div class="post-metadata">

**Author:** ![zaulin](https://avatars.discourse-cdn.com/v4/letter/z/d26b3c/32.png) [@zaulin](https://forums.fusetools.com/u/zaulin)\
**Post date:** [May 12, 2016, 9:53pm UTC](https://forums.fusetools.com/t/navigation-animation-example-variation/2731/3 "2016-05-12T21:53:54Z")

</div>

not working: as far as i know BringIntoView it only works with ScrollView to “navigate” to a node.

thnx anyway!!

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [May 12, 2016, 10:01pm UTC](https://forums.fusetools.com/t/navigation-animation-example-variation/2731/4 "2016-05-12T22:01:48Z")

</div>

My bad `BringToFront`

---

<div class="post-metadata">

**Author:** ![zaulin](https://avatars.discourse-cdn.com/v4/letter/z/d26b3c/32.png) [@zaulin](https://forums.fusetools.com/u/zaulin)\
**Post date:** [May 12, 2016, 10:29pm UTC](https://forums.fusetools.com/t/navigation-animation-example-variation/2731/5 "2016-05-12T22:29:09Z")

</div>

yep… that was the first i tried:

```auto
<WhileActive>
    <BringToFront/>
</WhileActive>

```

but the effect is not nice at all when swiping manually

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [May 12, 2016, 10:32pm UTC](https://forums.fusetools.com/t/navigation-animation-example-variation/2731/6 "2016-05-12T22:32:44Z")

</div>

There is no `Duration` property but maybe the `Delay` property helps somehow?

Idk exactly what you’re trying to do sorry ☹

---

<div class="post-metadata">

**Author:** ![zaulin](https://avatars.discourse-cdn.com/v4/letter/z/d26b3c/32.png) [@zaulin](https://forums.fusetools.com/u/zaulin)\
**Post date:** [May 12, 2016, 10:45pm UTC](https://forums.fusetools.com/t/navigation-animation-example-variation/2731/7 "2016-05-12T22:45:28Z")

</div>

🙂

i want that when swiping the active card goes on top but with a smooth transition (changing alpha channel for example)

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [May 12, 2016, 11:29pm UTC](https://forums.fusetools.com/t/navigation-animation-example-variation/2731/8 "2016-05-12T23:29:40Z")

</div>

Took me a while but figured it out:

```auto
<Panel ux:Class="Card" Height="256" Width="256" Alignment="Bottom" ux:Name="p">
    <EnteringAnimation Scale="0.5">
        <Move RelativeTo="Size">
            <Keyframe X="-0.5" Time="0.4" />
            <Keyframe X="-1" Time="0.6" />
        </Move>
        <Scale Factor="0.5" Duration="1" />
    </EnteringAnimation>
    <ExitingAnimation Scale="0.5">
        <Move RelativeTo="Size">
            <Keyframe X="0.5" Time="0.6" />
            <Keyframe X="0" Time="1" />
        </Move>
        <Scale Factor="0.5" Duration="1" />
    </ExitingAnimation>
    <ActivatingAnimation>
        <BringToFront />
    </ActivatingAnimation>
</Panel>

```

Add the following to the `Card` class:

```auto
<ActivatingAnimation>
    <BringToFront />
</ActivatingAnimation>

```

---

<div class="post-metadata">

**Author:** ![zaulin](https://avatars.discourse-cdn.com/v4/letter/z/d26b3c/32.png) [@zaulin](https://forums.fusetools.com/u/zaulin)\
**Post date:** [May 13, 2016, 10:09am UTC](https://forums.fusetools.com/t/navigation-animation-example-variation/2731/9 "2016-05-13T10:09:01Z")

</div>

that was it !!

credit you 🙂

thnx!!

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [May 13, 2016, 3:22pm UTC](https://forums.fusetools.com/t/navigation-animation-example-variation/2731/10 "2016-05-13T15:22:27Z")

</div>

NP glad to help