Popup Animations in .NET MAUI Popup (SfPopup)

15 Jul 20265 minutes to read

Animation Modes

Built-in animations are available in SfPopup, which is applied when the PopupView opens and closes in the screen. By default, the animation mode is set to Fade. The following animation modes are available in SfPopup:

NOTE

The AnimationMode setting applies to both Displaying popup when the SfPopup is set as root view and Displaying popup on the go.

Zoom

Zoom-out animation will be applied when the PopupView opens and Zoom-in animation will be applied when the PopupView closes.

<sfPopup:SfPopup x:Name="popup" 
                 AnimationMode="Zoom" />
using Syncfusion.Maui.Popup;

public MainPage()
{
    InitializeComponent();
    popup.AnimationMode = PopupAnimationMode.Zoom;
}

Syncfusion .NET MAUI Popup with zoom animation

Fade

Fade-out animation will be applied when the PopupView opens and Fade-in animation will be applied when the PopupView closes.

<sfPopup:SfPopup x:Name="popup"
                 AnimationMode="Fade" />
using Syncfusion.Maui.Popup;

public MainPage()
{
    InitializeComponent();
    popup.AnimationMode = PopupAnimationMode.Fade;
}

Syncfusion .NET MAUI Popup with fade animation

SlideOnLeft

PopupView will be animated from left-to-right when it opens and from right-to-left when it closes.

<sfPopup:SfPopup x:Name="popup"
                 AnimationMode="SlideOnLeft" />
using Syncfusion.Maui.Popup;

public MainPage()
{
    InitializeComponent();
    popup.AnimationMode = PopupAnimationMode.SlideOnLeft;
}

Syncfusion .NET MAUI Popup with SlideOnLeft animation

SlideOnRight

PopupView will be animated from right-to-left when it opens and from left-to-right when it closes.

<sfPopup:SfPopup x:Name="popup"
                 AnimationMode="SlideOnRight" />
using Syncfusion.Maui.Popup;

public MainPage()
{
    InitializeComponent();
    popup.AnimationMode = PopupAnimationMode.SlideOnRight;
}

Syncfusion .NET MAUI Popup with SlideOnRight animation

SlideOnTop

PopupView will be animated from top-to-bottom when it opens and from bottom-to-top when it closes.

<sfPopup:SfPopup x:Name="popup"
                 AnimationMode="SlideOnTop" />
using Syncfusion.Maui.Popup;

public MainPage()
{
    InitializeComponent();
    popup.AnimationMode = PopupAnimationMode.SlideOnTop;
}

Syncfusion .NET MAUI Popup with SlideOnTop animation

SlideOnBottom

PopupView will be animated from bottom-to-top when it opens and from top-to-bottom when it closes.

<sfPopup:SfPopup x:Name="popup"
                 AnimationMode="SlideOnBottom" />
using Syncfusion.Maui.Popup;

public MainPage()
{
    InitializeComponent();
    popup.AnimationMode = PopupAnimationMode.SlideOnBottom;
}

Syncfusion .NET MAUI Popup with SlideOnBottom animation

None

Animation will not be applied.

<sfPopup:SfPopup x:Name="popup"
                 AnimationMode="None" />
using Syncfusion.Maui.Popup;

public MainPage()
{
    InitializeComponent();
    popup.AnimationMode = PopupAnimationMode.None;
}

Animation duration

The SfPopup allows you to customize the opening and closing animation duration of the PopupView by using the AnimationDuration property. The duration is specified in milliseconds (ms), and the value must be greater than or equal to 0. The default value is 300 ms.

<sfPopup:SfPopup x:Name="popup"
                 AnimationDuration="150" />
using Syncfusion.Maui.Popup;

public MainPage()
{
    InitializeComponent();
    popup.AnimationDuration = 150d;
    popup.Show();
}

Animation easing

The SfPopup allows you to show the PopupView with various easing effects for all the available SfPopup.AnimationMode using the SfPopup.AnimationEasing property.

<sfPopup:SfPopup x:Name="popup"
                 AnimationEasing="SinIn" />
using Syncfusion.Maui.Popup;

public MainPage()
{
    InitializeComponent();
    popup.AnimationEasing = PopupAnimationEasing.SinIn;
    popup.Show();
}