Wait animation to complete before navigate to other page

How-to Discussions
1

I made a tap effect that mimics Whatsapp tap but when the user taps the link the app navigates immediately to the selected page before the animation is fully completed. I tried WhileBusy, Defer, IsFrozen but I’m pretty sure I’m not using them correctly.

Here 's the fully working code. I would like that the animation completes before navigating to the other page.

MainView.ux

<App>
    <JavaScript>
        var Observable = require("FuseJS/Observable");
        lx = Observable(0);
        ly = Observable(0);

        function clik(arg){
            lx.value = arg.localX - 100/2;
            ly.value = arg.localY - 100/2;
        }

        function gotoPage1() {
            router.push("page1");
        };

        module.exports = {
            clik:       clik, 
            lx:         lx, 
            ly:         ly,
            gotoPage1:  gotoPage1
         };
    
    </JavaScript>
    
    <Router ux:Name="router" />

    <Navigator DefaultPath="homepage">
        <Homepage ux:Template="homepage" router="router" />  
        <Page1 ux:Template="page1" router="router" />                       
    </Navigator>
    
    
    <!-- ============================================================== -->    
    <Panel ux:Class="TapEffect" Color="#FFFFFF" ClipToBounds="true">
        <Circle ux:Name="tapcircle" X="{lx}" Y="{ly}" Width="100" Height="100" Opacity="0" Color="#CCCCCC" HitTestMode="None"  Layer="Background">
            <Scaling ux:Name="tapcirclescale" Factor="0" />
        </Circle>
        <Rectangle ux:Name="taprectangle" Width="0%" Color="#EBEBEB" Opacity="0" Layer="Background" />
        <Clicked Handler="{clik}">
            <Change tapcircle.Opacity="0.5" Duration="0.07"/>
            <Change tapcirclescale.Factor="1.5" Duration="0.3" DelayBack="0" Easing="CircularInOut" />
        </Clicked>
        <Pressed>
            <Change taprectangle.Width="100%" Duration="0.1" />
            <Change taprectangle.Opacity="0.4" Duration="0.1" DelayBack="0.3" DurationBack="0.3"/>
        </Pressed>
    </Panel>

    
</App>

Homepage.ux

<Page ux:Class="Homepage">
    
    <Router ux:Dependency="router" />

    <TapEffect Height="40">                
        <Panel Alignment="VerticalCenter" >
            <Text Value="Tap me" Alignment="Center" Color="#00A2E8" FontSize="13">
                <Clicked>
                    <Callback Handler="{gotoPage1}" />
                </Clicked>
            </Text>
        </Panel>
    </TapEffect>

</Page>

Page1.ux

<Page ux:Class="Page1">
    
    <Router ux:Dependency="router" />

     <Panel Alignment="VerticalCenter" >
        <Text Value="PAGE 1" />
    </Panel>

</Page>
2

Try adding a delay="3" to your <Callback>

3

Thank you, it worked! I thought I had to use a more sophisticated approach…

1 Like
4

I know right? This is one of those fuse :heart: moments…