Avalonia Pro Max/motion

Motion in Avalonia

Two complementary systems:

| System | Purpose | When | |---|---|---| | Transitions | Animate property changes automatically when value changes | Hover/press, layout, color, size | | Animation (Style.Animations) | Time-based keyframed animation | Skeleton shimmer, indeterminate spinner, attention pulse | | PageTransition (FluentAvalonia / TabControl) | Whole-view transitions | Frame navigation, tab swap |

Target durations:

| Type | Duration | Easing | |---|---|---| | Micro (hover, press) | 100–150 ms | LinearEasing or QuadraticEaseOut | | Standard (panel slide, fade) | 200–300 ms | CubicEaseOut | | Large (page transition) | 300–400 ms | ExponentialEaseOut | | Exit | ~70% of enter | Same family |

---

Transitions on a Style

Available *Transition types: DoubleTransition, BrushTransition, ColorTransition, ThicknessTransition, CornerRadiusTransition, TransformOperationsTransition, BoxShadowsTransition, IntegerTransition, SizeTransition, PointTransition, VectorTransition.

Rule: Animate only Opacity, RenderTransform, Background/Foreground/BorderBrush, and BoxShadow. Avoid Width/Height/Margin — these trigger layout passes and jank.

---

Built-in Easings

LinearEasing, BackEaseIn/Out/InOut, BounceEaseIn/Out/InOut, CircularEaseIn/Out/InOut, CubicEaseIn/Out/InOut, ElasticEaseIn/Out/InOut, ExponentialEaseIn/Out/InOut, QuadraticEaseIn/Out/InOut, QuarticEaseIn/Out/InOut, QuinticEaseIn/Out/InOut, SineEaseIn/Out/InOut.

Defaults if unspecified: linear. Always set an easing for UI feel.

Recommended:

• Enter / appear → CubicEaseOut or ExponentialEaseOut
• Exit / disappear → CubicEaseIn
• Spring-y emphasis → BackEaseOut (subtle, ≤300 ms)

---

Press Feedback (Scale-on-Press)

RenderTransformOrigin="0.5,0.5" is the default — leave it.

---

Keyframe Animation

Spinner:

---

Page / View Transitions

TabControl

  
    
  
  …

Built-in transitions: CrossFade, PageSlide (with Direction and Orientation), CompositePageTransition.

TransitioningContentControl (for ContentControl-based view-switching)

FluentAvalonia Frame

ContentFrame.Navigate(typeof(DashboardPage),
    null,
    new SlideNavigationTransitionInfo
    {
        Effect = SlideNavigationTransitionEffect.FromRight
    });

---

List Item Entrance (Stagger)

Avalonia doesn't have built-in list-item stagger. Two approaches:

1. Animate on ItemContainer load

2. Manual stagger — drive Animation.Delay per item from the ViewModel using indexed offsets.

---

Reduced Motion

Avalonia exposes the OS preference via RendererDiagnostics-ish APIs and platform-specific settings. Pragmatic approach: expose a ReducedMotion setting in your app and bind transition durations to it.

public class MotionSettings : INotifyPropertyChanged
{
    public bool ReducedMotion { get; set; }
    public TimeSpan Standard => ReducedMotion ? TimeSpan.Zero : TimeSpan.FromMilliseconds(200);
    public TimeSpan Fast     => ReducedMotion ? TimeSpan.Zero : TimeSpan.FromMilliseconds(100);
}

Bind in XAML:

Or, in code-behind, swap the Transitions collection at app start when reduced-motion is enabled.

Detect Windows preference:

SystemParameters.ClientAreaAnimation == false  // (P/Invoke; check Avalonia API for Linux/macOS)

---

Modal / Sheet Motion

Sheets should slide+fade in from their trigger direction:

Toggle Classes.open="{Binding IsOpen}".

---

Shared Element-Style Transitions

True shared-element transitions are not built-in. Use:

1. RenderTransform interpolation on both source and destination — animate scale/translation between known positions.
2. LayoutTransformControl for size-based transitions without re-layout cost.
3. For "magic move" lists, consider ItemsRepeater + custom container animation.

---

Performance Rules

• Animate transform + opacity + brush only.
• Never animate Width, Height, Margin, Padding, Grid.Column*.
• Cap concurrent animations per view: 2–3 max for most screens.
• For 60fps, total animation cost per frame < 16 ms. Profile with --renderer skia --fps.
• IterationCount="Infinite" only on small elements (spinner, badge dot).
• Disable expensive transitions on battery (Mobile / WASM).

---

Common Mistakes

• Animating Width/Height for "smooth resize" — use LayoutTransformControl + ScaleTransform instead.
• No easing (defaults to linear) — UI feels mechanical.
• 300 ms fade for press feedback — too slow; press should react ≤100 ms.
• Same enter and exit duration — exit should be ~70%.
• Forgetting RenderTransform="none" initial value — first transition snaps from null.
• Looping decorative animation that pulls eye from content — limits cognition.
• No reduced-motion path — accessibility regression for vestibular-disorder users.
• Animating during virtualization scroll — every recycled container re-runs entrance animation. Disable on virtualized lists or mark as one-shot.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: linuxdevel
• Source: linuxdevel/Avalonia-skills
• License: MIT

Install and usage instructions live in the source repository linked above.