> For the complete documentation index, see [llms.txt](https://adospace.gitbook.io/reactorui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://adospace.gitbook.io/reactorui/guide/components-with-a-state/animation.md).

# Animation

Animating components in ReactorUI essentially means animating between component states. \
[Xamarin Forms](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/animation/) already contains a set of useful functions that let you move properties of controls over time according to a tween function. You can still use standard animation functions in ReactorUI getting a reference to the control as explained [here](https://adospace.gitbook.io/reactorui/guide/components-with-a-state/reference-to-native-controls) but it's not the recommended way.

In the most simple scenarios, enable animations in ReactorUI is as simple as calling the function `WithAnimation()` over the component you want to animate.

Let's build an example to illustrate the overall process. Consider a page that contains a frame and an image inside it that is initially hidden. When user tap the image we want to gradually show it and scale to full screen.

This is the initial code of the sample:

```csharp
public class MainPageState : IState
{
    public bool Toggle { get; set; }
}

public class MainPage : RxComponent<MainPageState>
{
    public override VisualNode Render()
    {
        return new RxContentPage()
        {
            new RxFrame()
            { 
                new RxImage()
                    .HCenter()
                    .VCenter()
                    .Source("city.jpg")
            }
            .OnTap(()=>SetState(s => s.Toggle = !s.Toggle))
            .HasShadow(true)
            .Scale(State.Toggle ? 1.0 : 0.5)
            .Opacity(State.Toggle ? 1.0 : 0.0)
            .Margin(10)
        };
    }
}
```

NOTE: [Here ](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=windows)you can learn how to integrate resources like photos in Xamarin Forms.

Running the application you should see something like this:

![Sample app without animation](/files/-M8COLG7XJrCdEu3Tz-V)

Now let's add `WithAnimation()` to image component:

```csharp
return new RxNavigationPage()
{
    new RxContentPage("Animation Demo")
    {
        new RxImage()
            .HCenter()
            .VCenter()
            .Source("city.jpg")
            .OnTap(()=>SetState(s => s.Toggle = !s.Toggle))
            .Opacity(State.Toggle ? 1.0 : 0.0)
            .Scale(State.Toggle ? 1.0 : 0.5)
            .Margin(10)
            .WithAnimation()
    }
};
```

By default `WithAnimation()`enables any pending animation applied to the component before it: in the above sample `Opacity()`and `Scale()` by default add a tween animation each for the respective properties.

![Sample app with animation](/files/-M8CPh5GOkiS0wk02mQA)

Try experimenting modifying the position of the call to WithAnimation() or passing a custom duration (600ms is the default value) or easing function (Linear is the default). \
Many other properties are animatable by default but you can create custom animation with more complex algorithms for other properties or combination of properties.\
Animations in ReactorUI is inspired to SwiftUI so you can even take a look to its documentation to discover other powerful ways of animating between states.<br>

![](/files/-M8CVXhL03p_VLazTp5K)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://adospace.gitbook.io/reactorui/guide/components-with-a-state/animation.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.