Interactions and animation

Add interactions to layers, switch them off per breakpoint, respect reduced motion and shape transitions.

Interactions

Select one layer and choose Add interaction in the Interactions section of Properties. The layer fades in when it comes into view.
Each interaction shows what starts it and what it does, such as When in view · Animate.
Switch it off on a breakpoint with On Desktop, On Tablet or On Phone.
Reduced motion decides what happens for people who ask their device for less motion: Fade only keeps a fade, Off shows the layer at once.
Delete interaction removes it. Deleting a layer removes its interactions too, and undo brings both back.

Open Transition to shape how an animation moves. The curve shows it.
Spring takes a duration and a bounce. Physics spring takes stiffness, damping and mass.
Easing offers ready-made curves, your project's easing tokens, or a Custom curve with two handles.
Instant changes at once. Delay waits before it starts, and Stagger starts the layers it animates one after another.

Select a layer and choose Hover, Press or Focus in States. While a state is chosen, what you change in Properties applies in that state only.
Transition sets how the layer moves into the state. Clear removes what the state changes, and Done goes back to the layer itself.
Hover only shows on devices that can hover, such as a computer with a mouse.

Trigger chooses what starts an interaction: when the layer comes into view, on page load, or a click, hover, press or keyboard focus.
A click, hover, press or focus can Animate the layer to the values under Animates to, or Scroll to another layer, stopping Offset pixels above it.
A layer that is a link can't also run an interaction on click.

Interactive elements go in from the Interactive group of the Insert panel. Select one to change its settings in Element.
An element made with a feature this editor doesn't have is kept as it is. Element says so, and the published page shows it as an empty box.

Choose When scrolled into view as the trigger to animate a layer while a layer is in view, and back when it leaves.
Layer in view is the layer that has to come into view: This layer, or another section or named layer of the page.
Offset is how many pixels of it must be in view before the animation starts.

An Accordion shows questions whose answers open on a click, like an FAQ. Each item is a frame inside it: its first layer is the question, the rest is the answer.
In Element, Several open at once lets visitors keep more than one answer open; otherwise opening one closes the others. Open at first is the item that starts open (0 for none).
While you edit, every answer shows, so you can change it in place. The published page needs no script, and keyboard users open and close the answers with Enter or Space.

Select a row stack or a collection list and choose Wrap in ticker from the command palette. Its items then scroll on and on in the published site; on the canvas the ticker stays at rest.
In Element, set the Speed (px per second), the Direction, and the Speed under the pointer (0 pauses it). Set the speed on another breakpoint to change it there only.
A ticker pauses when it is off screen, and stays still for visitors who prefer reduced motion. Screen readers read its items once.

Select a row stack or a collection list and choose Wrap in carousel from the command palette. Its items become slides that visitors swipe, scroll or step through with the arrows, the dots or the arrow keys.
In Element, turn the Arrows and Dots on or off, let it Loop, or Play by itself every few seconds; it stops while the pointer or the keyboard focus is on it.
The buttons' names are site text: write them in the site's language, and translate them like any other text. In the dot's name, {n} is the slide number.

An interaction can switch an instance to another of its variants: choose Change variant as the Action, then the instance on the page and the variant. A click, a hover, a press, keyboard focus or a scroll into view can start it; a hover, press, focus or scroll goes back to the variant shown before when it ends.
The change animates with the variant's Transition: in the master, choose the variant in Variants and set how it animates in. Only the properties the variant changes animate.