Animation in .NET MAUI Navigation Drawer (SfNavigationDrawer)

Customizing animation duration

The Duration property of the SfNavigationDrawer specifies the timeline for completing one animation cycle. Setting a smaller duration value accelerates animation speed.

<navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer">
    <navigationdrawer:SfNavigationDrawer.DrawerSettings>
        <navigationdrawer:DrawerSettings  Duration="200"/>
    </navigationdrawer:SfNavigationDrawer.DrawerSettings>
</navigationdrawer:SfNavigationDrawer>
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer();
navigationDrawer.DrawerSettings = new DrawerSettings()
{
    Duration = 200,
};
this.Content = navigationDrawer;

NOTE

The Duration property for the SfNavigationDrawer is measured in milliseconds.

The following screenshot illustrates the result of the above code.

Duration

Animation easing effects

The AnimationEasing property of the SfNavigationDrawer allows you to customize the acceleration and deceleration of the drawer’s transition animations when opening and closing. The default value for AnimationEasing is Easing.Linear.

<navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer">
    <navigationdrawer:SfNavigationDrawer.DrawerSettings>
        <navigationdrawer:DrawerSettings AnimationEasing="{x:Static Easing.CubicIn}"/>
    </navigationdrawer:SfNavigationDrawer.DrawerSettings>
</navigationdrawer:SfNavigationDrawer>
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer();

navigationDrawer.DrawerSettings = new DrawerSettings()
{
    AnimationEasing = Easing.CubicIn,
};
this.Content = navigationDrawer;