Navigation animation example variation

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)

Try adding BringIntoView inside of Clicked:

<Clicked>
  <BringIntoView />
</Clicked>

Not sure but you might need the Target property:

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

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

thnx anyway!!

My bad BringToFront

yep… that was the first i tried:

<WhileActive>
    <BringToFront/>
</WhileActive>

but the effect is not nice at all when swiping manually

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

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

:slight_smile:

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

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>

that was it !!

credit you :slight_smile:

thnx!!

NP glad to help