Navigation animation example variation

How-to Discussions
1

Hi,

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

leaving the class as:

<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:

    <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

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)

2

Try adding BringIntoView inside of Clicked:

<Clicked>
  <BringIntoView />
</Clicked>

Not sure but you might need the Target property:

<Clicked>
  <BringIntoView Target="{resource}" />
</Clicked>
3

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

thnx anyway!!

4

My bad BringToFront

5

yep… that was the first i tried:

<WhileActive>
    <BringToFront/>
</WhileActive>

but the effect is not nice at all when swiping manually

6

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

Idk exactly what you’re trying to do sorry :frowning:

7

:slight_smile:

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

8

Took me a while but figured it out:

<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:

<ActivatingAnimation>
    <BringToFront />
</ActivatingAnimation>
9

that was it !!

credit you :slight_smile:

thnx!!

10

NP glad to help