Visibility and entrance animations
27.0.29 adds visibility controls and one-shot entrance animations. Configure them on the selected element, container, or Subpage List, then test in Live Preview or an exported application. Entrance animations deliberately do not play on the design canvas.
Show or hide an element
Set Visible (isVisible) to a literal or bind it to a variable, page parameter, datasource field, feedback, or environment value. For example, bind a status label to a boolean $showStatus$ variable, then toggle that variable in preview.
| Value | Result |
|---|---|
Unset, null, or empty string | Visible; hiding is opt-in. |
false, "false", 0, or "0" | Hidden. |
| True or another nonempty boolean-like value | Visible. |
| Unresolved dynamic token | Visible until a value resolves. |
By default, hiding removes the element from layout (display: none). Enable Reserve space (isVisibleReserveSpace) to keep its occupied area while making it invisible and noninteractive (visibility: hidden). Reserve space is a plain boolean option; it does not hide an element on its own. Modes can override visibility.
Choose the animation level
| Owner | Saved properties | Result |
|---|---|---|
| Element | animate | Animate one control when it appears. |
| Container | childAnimate, childAnimateDelay | Supply a preset to child elements and stagger their arrival. |
| Subpage List | itemAnimate, itemAnimateDelay | Animate repeated page instances with an item stagger. |
Presets are None, Fade, Slide left/right/up/down, Zoom in/out, and Pop. Their saved IDs are none, fade, slide-left, slide-right, slide-up, slide-down, zoom-in, zoom-out, and pop. Element reveals last 300 ms; delays are in milliseconds.
For example, set a container's childAnimate to slide-up and childAnimateDelay to 60 to reveal its controls in sequence. An element's own preset takes precedence; explicit animate: "none" opts it out. The container delay also applies to children with their own animation preset.
For a room directory, use the Subpage List's itemAnimate: "fade" and itemAnimateDelay: 60. Its ordinary animate setting affects the whole list box instead. Avoid stacking container and item cascades on the same list unless the combined delay is intentional.
Both cascades limit their total spread to 1.5 seconds by compressing the step for large collections. Delays use item/element index; hidden children still retain their index positions.
When animations replay
Entrance animation runs on initial render, page remount, or a reveal after display: none. Ordinary value updates do not replay it. Changing the preset, including through a mode, can restart it. Reserve-space hiding keeps the element mounted and does not replay its entrance when shown again.
The runtime disables element entrance animations for prefers-reduced-motion: reduce. Page transitions are configured separately and are not covered by that entrance-animation guard.
Verify navigation into the page, hide/show behavior, list data arriving asynchronously, and long-list delays. Keep required controls usable without animation and check the actual target runtime.