The Interact panel also holds non-animation behavior: turn an element into a link (<a>) with a URL and target, and add CSS transitions so property changes animate smoothly.
Where: Right sidebar → Zap (Interact) → Link / Transitions — Select an element
Key ideas
- Link: Toggle the element into an <a>, set the URL and target (same/new tab).
- CSS transitions: Add transition layers (property, duration, easing, delay) so hover/state changes tween instead of snapping.
- Component authoring: The same panel exposes Dimensions, States (pseudo-class toggles), and Instance overrides for components.
Steps
- Open the Interact panel.
- For a link: toggle Link, set the URL and target.
- For transitions: add a layer and set property/duration/easing.
Link behavior
- Turn the selected element into a semantic link.
- Set the destination URL and same-tab/new-tab target.
- Review focus, keyboard activation, accessible name, and whether nested interactive controls make the markup invalid.
CSS transition layers
- Choose the exact property to transition.
- Set duration, easing, and delay.
- Add separate layers when different properties need different timing.
- Trigger a real property change through hover/focus/state/class rather than expecting the transition to animate by itself.
Link versus interaction
Use a link for navigation. Use a click interaction for local state or animation. When both are present, verify that navigation does not interrupt the intended click behavior.
Tips
- Use transitions for simple state changes and the interaction/GSAP engine for sequenced or multi-target choreography.
- Make visible link purpose understandable without relying only on hover.
Troubleshooting
The property snaps instead of transitioning
Confirm a transition layer targets the actual changing property and that the before/after states have compatible values.
Click animation never finishes before navigation
Separate the navigation from the local interaction or redesign the timing; a link can leave the page immediately.