Every interaction pairs a Trigger (what starts it) with a Target (what animates). flowmo supports 15 trigger types, from click/hover to scroll-scrub, drag, and follow-mouse.
Where: Right sidebar → Interactions section → + (Add Interaction picker) — Select an element and add an interaction
Key ideas
- Trigger types: load, click, hover, focus, scroll-reveal, scroll-scrub, mouse-position, form-submit, resize, page-unload, swipe, drag, follow-mouse, mouse-rotate, scroll-inertia.
- Target scoping: Default target is the element itself (its data-f0-id). Use sourceSelector to fire from another element, animationTarget to animate a different one, and groupSelector for per-instance scoping (e.g. per .card).
- Add picker categories: The picker groups triggers as Reveal, Pointer, Scroll, Standalone (Carousel/Tabs/Auto-animate), Morph, Media, Text, Form, Lifecycle.
Steps
- Select the element that should start the interaction.
- Open the Interactions section and click + to open the Add Interaction picker.
- Pick a trigger from a category (e.g. "On hover", "Scroll scrub").
- Set the target (self, another element, or a group selector) and the animated properties.
- Preview to confirm the trigger fires and the target animates.