Interaction

Effects & states

The Effects panel: reveals, hover, press, scroll — and what each one writes.

What an element does is the same kind of question as how it looks, so it is asked in the same place: the last two folds of the Style panel — Effects, then Overlays.

Each fold has a + in its head, one row per effect, and a chip that opens a sheet. Sheets stack, so Enter → Transition is two steps deep and one gesture back.

The five effects

The split is which moment they answer for. In view and Appear are the same reveal at a different moment, so an element has at most one — the menu offers whichever it has not got. Scroll is not an animation but a position. Hover and Press are states.

Reveals

Pick a preset, then override what you like: enter state, exit state, duration, delay, easing or a spring, the start point, whether it plays once, and the stagger for its children.

The exit state is locked by default, and that is the honest default: an element leaves the way it came. Unlock it and you get something that rises in and sinks out. See Motion for the attributes all of this writes.

Hover and Press are CSS

Not motion attributes — a rule:

.card {
  border-color: var(--border-light);
  translate: 0 0;
  transition: border-color 200ms ease, translate 200ms ease;

  &:hover {
    border-color: var(--primary);
    translate: 0 -2px;
  }
}

The transition on the base rule names exactly the properties the state changes — never all — and it is removed again with the effect. They show up in the CSS tab immediately and work with JavaScript off. That is the whole reason they are a rule and not a runtime.

The list belongs to the element

Effects read the element's own selector, not whichever rule the selector picker happens to be standing in. And they are offered even when the element has no class yet — an attribute never needed a rule to live in. (Hover and Press do need a selector, since they are rules.)

Removing

The × on a row removes the effect and everything it wrote: the attributes, the state rule, and the transition that existed for it. Inside a sheet, the same × on a field means back to the inherited default — which is what emptying the field already did.