> For the complete documentation index, see [llms.txt](https://learn.squirrel365.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learn.squirrel365.io/the-designer/container/container-transitions.md).

# Container Transitions

Use visibility transitions on containers in Squirrel365 to move between screens, so your app navigates the way a mobile app does instead of switching instantly.

Mobile apps move between screens rather than swapping them out instantly. A settings screen slides in from the right, a filter panel rises from the bottom, and closing them reverses the movement. That motion is a large part of what makes an app feel like an app.

Visibility transitions on containers bring that behaviour to Squirrel365. You build each screen of your app as a container, control which one is showing with dynamic visibility, then add a transition so the change is animated rather than abrupt.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FRzqkPwtGyFqR8IKCUUrS%2FTransitions%20Demo%202026-08-14.gif?alt=media&amp;token=7f643208-5979-422c-bd4b-a433283545da" alt=""><figcaption></figcaption></figure>

### Building screens with containers

Squirrel365 does not have a separate screen component. Instead, you use a container as a screen: size it to fill the canvas, put the components for that part of your app inside it, and give it a dynamic visibility condition that decides when it should be on show.

A typical app has one container per screen, all bound to the same cell. Writing a different value into that cell from a button brings one container forward and sends the others away. Add a visibility transition to each container and you have navigation that moves.

Because containers layer over one another rather than pushing each other aside, the incoming screen simply covers the one behind it. This is exactly how a modal or a slide over panel behaves on a phone.

{% hint style="info" %}
Visibility transitions can be set on any container, but they are built for showing and hiding whole areas of your app. Using one to add decorative movement to a small container, or to animate something that is not really a change of might produce strange results.
{% endhint %}

### Adding a transition to a container

1. Select your container on the canvas.
2. In the property panel, open the **Dynamic visibility** section and set up your show condition.
3. Below the condition, expand the **Visibility transitions** sub section. It is collapsed by default.
4. Choose an option from **Transition on show**. Instant is selected to begin with, which means no animation.
5. If you choose **Slide in**, pick a direction using the arrow buttons.
6. Adjust **Easing** and **Duration** if you want to change how the movement feels.

The **Transition preview** shows what your settings will look like. The white outline is the canvas, the blue panel is your container, and the label above tells you exactly what the transition does, for example "Slide in from right". The preview replays whenever you change a setting, and again when you hover over it.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FPkB9sLuLKWpKiGM3QlTK%2Fimage.png?alt=media&amp;token=87be48bc-cd43-4035-b546-776450060386" alt="Visibility transitions sub section expanded in the property panel, showing Transition on show set to Slide in with the direction arrows and the transition preview." width="251"><figcaption></figcaption></figure>

To see the transition happen in your app, switch to Debug mode or Preview mode.

### Choosing a direction

The arrow buttons set the direction the container **travels**, not the edge it comes from. Selecting the left arrow moves the container leftwards, which means it enters from the right side. The preview label describes the finished result.

### Setting a different transition on hide

By default, hiding a container simply reverses whatever you set for showing it. A container that slides in from the right slides back out to the right, using the same easing and duration. This is controlled by the **Reverse transition on hide** checkbox, which is ticked to begin with.

Reversing suits most navigation, because a screen that arrived from the right should leave the same way. Clear the checkbox when you want the two halves to behave differently. A second set of controls appears, with its own **Transition on hide**, direction, easing and duration, so you can have a panel slide in gently and then disappear instantly when it closes.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FWYAa00y9FbBnf56cj6zM%2Fimage.png?alt=media&amp;token=6606e0d9-3ff6-45e3-b281-00931a9ed15f" alt="Visibility transitions with Reverse transition on hide unchecked, showing both the show and hide control sets." width="250"><figcaption></figcaption></figure>

### Properties

<table data-search="false"><thead><tr><th>Property</th><th width="382.58203125">Description</th><th>Default</th></tr></thead><tbody><tr><td>Transition on show</td><td>How the container appears. Instant shows it straight away with no animation. Fade in brings it up from transparent. Slide in moves it into position from off screen.</td><td>Instant</td></tr><tr><td>Direction</td><td>Which way the container travels as it slides in. Only available when Transition on show is set to Slide in.</td><td>Left</td></tr><tr><td>Transition preview</td><td>An animation of your current settings, with a label describing the result. Replays on change and on hover.</td><td>Not applicable</td></tr><tr><td>Easing</td><td>How the movement is paced. Linear keeps a constant speed. Ease in starts slowly, Ease out finishes slowly, and Ease in-out does both. Ease sits between them.</td><td>Ease in</td></tr><tr><td>Duration</td><td>How long the transition takes, in seconds.</td><td>0.5</td></tr><tr><td>Skip transition on initial show</td><td>Stops the transition running the first time the app loads. The container is simply there, and transitions normally from then on.</td><td>Unchecked</td></tr><tr><td>Reverse transition on hide</td><td>Hides the container by reversing the show transition. Clear it to set the hide behaviour separately.</td><td>Checked</td></tr><tr><td>Transition on hide</td><td>How the container disappears. Only available when Reverse transition on hide is cleared.</td><td>Slide out</td></tr></tbody></table>

### Tips and common uses

**Your opening screen.** The container that is visible when your app first loads will animate in before the viewer has done anything, which looks like a glitch. Tick **Skip transition on initial show** on that container so it is simply there from the start.

**Navigation between screens.** Slide in from the right to go forward and leave Reverse transition on hide ticked, so going back retreats to the right. A duration of around 0.3 seconds keeps it feeling responsive rather than sluggish.

**Modals and dialogs.** Slide up from the bottom to open, which reads as a new task starting. Many apps close a modal instantly rather than animating it away, so clear Reverse transition on hide and set Transition on hide to Instant if you want that.

**Notifications and messages.** Slide in to draw attention, then fade out rather than sliding, so the message dissolves quietly instead of pulling the eye back to it.

**Keep them short.** Transitions are there to explain a change, not to be the change. Anything much beyond half a second starts to feel like waiting.

**Be consistent.** Use the same direction and duration for every screen at the same level of your app. Movement that changes from screen to screen is more distracting than no movement at all.