Responsive, animations and interactions
Adapt a frame to tablet and mobile widths, animate elements, make components react to hover and clicks, and open menus or modals.
A frame is not a static picture. In the inspector you can adapt it to other screen widths, animate it, and make it react to the person using it. Everything stays inside the frame's HTML, so it travels with your exports and is visible to agents.
Test it in the preview
Animations and interactions are frozen while you edit, so nothing moves under your cursor. To try them, open Actions (...) at the top right and choose Preview prototype. Choose Exit prototype preview in the same menu to go back to editing.
In the preview, prototype links, animations, interactions, overlays and interactive variants all play.
Viewports (breakpoints)
Open the Viewports section at the top of the inspector.
- The frame itself is Desktop, the base. Its width is the frame's width.
- Click Tablet or Mobile to add a viewport, or + (Add a custom viewport) for another width. You can change a viewport's width or remove it with the cross.
Each viewport appears next to the frame on the canvas, showing the same screen at its width. Click one, on the canvas or in the list, to edit it.
While you edit a viewport, the inspector shows Editing Tablet (or the viewport's name):
- Every style you change applies to this viewport only. Everything else still comes from the frame.
- The panel lists the overridden properties. Reset one with its arrow, or click Reset all.
- Hide on Tablet hides the selected element on that viewport only.
Each viewport inherits from the frame, never from another viewport. A viewport applies from its width up to the next wider one, and the narrowest one also covers smaller screens.
Text and structure are shared: adding, deleting or rewording an element changes it on every viewport.
Animation
Select an element and open the Animation section. Click + next to an effect to add it, then click its name to edit it.
| Effect | What it does |
|---|---|
| Hover | Animates while the pointer is over the element, and back when it leaves. |
| Press | Animates while the element is pressed. |
| Appear | Animates from start values to the element as designed, In view or On load. Tick Replay each time it enters the view to play it again. |
| Loop | Repeats forever: Loop (restart) or Mirror (back and forth), paused when off screen unless you choose to keep playing. |
| Text effect | Splits the text by words, characters or lines and animates each piece with a Stagger, in view or With the scroll. |
| Scroll speed (parallax) | Moves the layer faster (positive) or slower (negative) than the page. |
| Scroll transform | Interpolates between start and end values as the element moves through the screen. |
Each effect animates opacity, offset, scale, rotation (2D and 3D), skew and blur. More properties adds other CSS properties such as a background color or a shadow. Presets give you a starting point.
Each effect has a transition:
- Instant: no animation.
- Ease: a duration, a delay and a curve (ease out, ease in, back, anticipate, linear, or a custom Bézier).
- Spring: Duration and bounce, or Physics (stiffness, damping, mass).
A small graph shows the curve you get.
People who turn on reduced motion in their system settings see the end state without animation.
Interactions
The Interactions section of an element defines what happens when someone clicks it or moves the pointer over it. Click Add interaction, choose the trigger (click, mouse enter, mouse leave), then the action:
- Toggle, set or increment a page variable.
- Open, close or toggle an overlay, or close the current one.
- Go to another frame, with a transition.
- Open a link, or scroll to an element.
- Change the variant of a component instance.
The same section binds the element to a page variable:
- Visibility shows the element only when a variable is on, or only when it is off.
- Text binding replaces the element's text with a text or number variable.
Page variables
With nothing selected, the inspector shows Page variables. A variable holds a state of the page, such as an open menu, a counter or a chosen color.
Click + to add one, then choose its type (boolean, number, text, color or image) and its default value. Interactions change the variable, and elements bound to it react.
A non-boolean variable can also be used in any style as var(--vato-v-<id>).
Overlays (menus, tooltips and modals)
An overlay is an element shown on top of the page when an interaction opens it. Select the element, open Overlay, and choose one of these:
- Make menu / tooltip: anchored to the element that opens it. Choose the side, the alignment, the distance and the margin kept from the screen edges. The overlay flips to the other side when there is no room.
- Make modal: centered over a dimmed backdrop. You can change the backdrop color.
Closing decides whether a click outside closes the overlay, or only an action does. Escape always closes it.
Then select the button that should open it and add an interaction Open / close overlay.
Overlays are hidden while you edit. Select the overlay in the layer list to edit it.
Interactive components
Select a component's main element and open Variants & variables.
Variants that react
- Hover and Pressed create, in one click, a copy of the component next to it as a new variant, already connected. Change the copy's colors or sizes: instances animate to them on hover or press.
- Add connection links two variants with a trigger (hover, press, click, mouse leave or in view), a delay and a transition. Click connections act as toggles when you add one in each direction.
Only style and visibility differences between variants are animated. Keep the same structure in each variant.
Component variables
Inside a component's main element, select a child and give the variable a name:
- Bind property to variable turns a property into a variable: fill color, text color, border color, opacity, radius, font size, gap or padding. Its current value becomes the default.
- Text, Visibility and Image expose the element's text, visibility or image as a property of the component.
Each instance of the component then shows these variables in the inspector and can set its own values. A nested component inherits a variable with the same name from its parent.
Layout and tokens
- Position accepts Sticky, with a distance from the top, and Fixed (pinned to the screen), in addition to the usual positions.
- Color fields offer your project's color tokens (Apply a color token). A bound color shows the token's name and follows every change made to the token.
Exports and agents
HTML exports, the standalone viewer and the React version include the compiled viewports, animations and interactions. The React version adds a small runtime file next to the component.
Agents use the same features. Ask them for a mobile version, a hover effect or a menu that opens on click, and they write it into the frame.