# Avalonia Pro Max/motion

> Use when adding animation, hover/press feedback, page transitions, list-item entrance, or honoring reduced-motion in an Avalonia app. Covers Transitions, Animation, KeyFrame, easing, IterationCount, and shared-element patterns.

- **Type:** Skill
- **Install:** `agentstack add skill-linuxdevel-avalonia-skills-motion`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [linuxdevel](https://agentstack.voostack.com/s/linuxdevel)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [linuxdevel](https://github.com/linuxdevel)
- **Source:** https://github.com/linuxdevel/Avalonia-skills/tree/main/skills/avalonia/avalonia-pro-max/motion

## Install

```sh
agentstack add skill-linuxdevel-avalonia-skills-motion
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

```xml

  
  
    
      
      
      
      
    
  
  

  
  

```

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)

```xml

  
  
    
      
    
  

  

```

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

---

## Keyframe Animation

```xml

  
    
      
        
        
      
      
        
        
      
      
        
        
      
    
  

```

Spinner:
```xml

  
    
      
      
    
  

```

---

## Page / View Transitions

### TabControl

```xml

  
    
  
  …

```

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

```xml

```

### TransitioningContentControl (for `ContentControl`-based view-switching)

```xml

  
    
      
      
    
  

```

### FluentAvalonia Frame

```csharp
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**
```xml

  
    
      
        
          
            
            
          
          
            
            
          
        
      
    
  

```

**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.

```csharp
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:
```xml

```

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

Detect Windows preference:
```csharp
SystemParameters.ClientAreaAnimation == false  // (P/Invoke; check Avalonia API for Linux/macOS)
```

---

## Modal / Sheet Motion

Sheets should slide+fade in from their trigger direction:

```xml

  
  
  
    
      
      
    
  

  
  

```

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](https://github.com/linuxdevel)
- **Source:** [linuxdevel/Avalonia-skills](https://github.com/linuxdevel/Avalonia-skills)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-linuxdevel-avalonia-skills-motion
- Seller: https://agentstack.voostack.com/s/linuxdevel
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.