Browse documentation
Interactions & motion
Add hover, entrance, and scroll behavior, then verify how it plays in the real page.
Where to find it
- Editor
- Select a layer
- Style
- Effects / Interactions
In this guide
An intentional effect with a clear trigger, tested in Preview and at smaller screen sizes.
Before you start: Open a page with editable content. Start with one element so the result is easy to judge.
Choose the right control
Effects offers common visual behaviors. Interactions gives you trigger-based actions and more detailed motion controls. The options depend on the selected layer.
- 1Add effect. Choose a behavior for the current selection.
| Desired behavior | Starting point |
|---|---|
| Reveal an element as it appears | Effects → Appear |
| Animate on pointer hover or press | Effects → Hover or Press |
| Repeat a visual movement | Effects → Loop |
| Animate with scrolling | Effects → Scroll, or Interactions → While scrolling |
| React to an event | Interactions → Add interaction → Trigger on |
| Animate between pages | Pages → Page transitions |
Create an entrance effect
An entrance effect is a useful first exercise because the trigger and result are easy to observe.
- 1
Select one layer
Choose the heading, image, or container you want to animate. In Style → Effects, open the + menu and choose Appear.
- 2
Set the trigger and movement
In the effect editor, choose when it should play and inspect its preset, transform, and transition controls. Start with a short, subtle movement.
- 3
Play it in Preview
Open Preview from the header. Reload or scroll the page as needed to exercise the chosen trigger.
You should see: The selected element animates when its trigger occurs. The rest of the page remains usable.
Build a scroll interaction
Choose the trigger based on the relationship you want between scrolling and animation.
- 1
Open Add interaction
With the layer selected, scroll to Interactions and choose +. Inspect the Trigger on choices.
- 2
Choose the scroll behavior
Use Scroll into view for an entrance, While scrolling for continuous progress, Scroll direction for up/down behavior, or Parallax for relative movement. Configure the target and the fields shown for that trigger.
- 3
Test the whole scroll range
In Preview, scroll forward and backward through the section. Check what happens at the start, end, and when returning to the page.
Before you move on
- The trigger matches the intended visitor action.
- Text and controls remain visible and usable.
- There is enough page length for the scroll behavior to occur.
- The mobile experience works without hover.
- The page remains understandable with reduced motion enabled.
Screenshots use a local sample workspace.