Create scroll-triggered animations, hover effects, page transitions, and interactive elements to bring your website to life.
The Web Interactions Panel
Access the Web Interactions Panel in the left sidebar to add interactivity to any element:
- Select an element on the canvas
- Open the Web Interactions Panel
- Add triggers and actions
- Preview the interaction
Trigger Types
Triggers determine when an interaction occurs:
- Click - When the element is clicked or tapped
- Hover - When the mouse enters the element
- Scroll Into View - When the element becomes visible
- Page Load - When the page finishes loading
- Mouse Move - Based on cursor position
Action Types
Actions define what happens when a trigger fires:
- Animate - Move, scale, rotate, or fade elements
- Toggle Class - Add or remove CSS classes
- Navigate - Go to a page, section, or URL
- Show/Hide - Toggle element visibility
- Open Modal - Display a modal overlay
Animation Properties
Configure how animations behave:
- Duration - How long the animation takes (in ms)
- Delay - Wait time before animation starts
- Easing - Animation curve (ease, linear, bounce, etc.)
- Direction - Forward, reverse, or alternate
- Loop - Repeat the animation continuously
Hover Effects
- Select an element
- Add a Hover trigger
- Set the hover state properties (scale, opacity, color)
- Configure transition duration and easing
- Preview by hovering in the preview
Scroll Animations
- Create entrance animations for page sections
- Configure scroll offset (when to trigger)
- Set animation to play once or every time
- Use parallax effects for depth
Page Transitions
- Configure transitions between pages
- Choose transition type: fade, slide, zoom
- Set transition duration
- Works with navigation links automatically
Best Practices
- Use subtle animations - less is more
- Keep durations under 500ms for responsiveness
- Test on mobile devices for performance
- Provide fallbacks for reduced motion preferences
- Avoid animating too many elements simultaneously