Popup Animations in .NET MAUI Popup (SfPopup)

19 Sep 20235 minutes to read

Animation Modes

Built-in animations are available in SfPopup, which is applied when the Popup view opens and closes in the screen. By default, the animation mode is set to Fade
The SfPopup has different animation modes as listed below:

NOTE

Setting of the AnimationMode is same for 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 Popup view opens and Zoom-in animation will be applied when the Popup view closes.

<sfPopup:SfPopup x:Name="popup" 
                 AnimationMode="Zoom" />
public MainPage()
{
    InitializeComponent();
    popup.AnimationMode = AnimationMode.Zoom;
}

.NET MAUI Popup with zoom animation

Fade

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

<sfPopup:SfPopup x:Name="popup"
                 AnimationMode="Fade" />
public MainPage()
{
    InitializeComponent();
    popup.AnimationMode = AnimationMode.Fade;
}

.NET MAUI Popup with fade animation

SlideOnLeft

Popup view 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" />
public MainPage()
{
    InitializeComponent();
    popup.AnimationMode = AnimationMode.SlideOnLeft;
}

.NET MAUI Popup with slide on left animation

SlideOnRight

Popup view 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" />
public MainPage()
{
    InitializeComponent();
    popup.AnimationMode = AnimationMode.SlideOnRight;
}

.NET MAUI Popup with slide on right animation

SlideOnTop

Popup view 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" />
public MainPage()
{
    InitializeComponent();
    popup.AnimationMode = AnimationMode.SlideOnTop;
}

.NET MAUI Popup with slide on top animation

SlideOnBottom

Popup view 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" />
public MainPage()
{
    InitializeComponent();
    popup.AnimationMode = AnimationMode.SlideOnBottom;
}

.NET MAUI Popup with slide on bottom animation

None

Animation will not be applied.

<sfPopup:SfPopup x:Name="popup"
                 AnimationMode="None" />
public MainPage()
{
    InitializeComponent();
    popup.AnimationMode = AnimationMode.None;
}

Animation duration

The SfPopup allows you to customize the opening and closing animation duration of Popup view by using the AnimationDuration property. By default, the animation duration is set to 300 milliseconds.

<sfPopup:SfPopup x:Name="popup"
                 AnimationDuration="150" />
public MainPage()
{
    InitializeComponent();
    popup.AnimationDuration = 150;
}

Animation easing

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

<sfPopup:SfPopup x:Name="popup"
                 AnimationEasing="SinIn" />
public MainPage()
{
    InitializeComponent();
    popup.AnimationEasing = PopupAnimationEasing.SinIn;
}