Wait animation to complete before navigate to other page

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.


        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() {

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

    <Navigator DefaultPath="homepage">
        <Homepage ux:Template="homepage" router="router" />  
        <Page1 ux:Template="page1" router="router" />                       
    <!-- ============================================================== -->    
    <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" />
        <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" />
            <Change taprectangle.Width="100%" Duration="0.1" />
            <Change taprectangle.Opacity="0.4" Duration="0.1" DelayBack="0.3" DurationBack="0.3"/>



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

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



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

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


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

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

1 Like

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