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.
Trigger and target are separate roles
- The trigger answers what input or lifecycle event starts the interaction; the target answers what element or property changes.
- By default the selected element can be both trigger and target. Source selector, animation target, and group selector allow those roles to differ.
- For repeated components, use instance mode and a group selector/pairing rule so each trigger affects the intended local target.
Choose from the picker
- Reveal and Pointer cover common entrance/gesture behavior; Scroll includes scrub and inertia.
- Standalone includes Carousel, Tabs, and Auto-animate; Morph, Media, Text, Form, and Lifecycle provide specialized trigger families.
- Start with the narrowest suitable trigger and target, then preview before adding multiple interactions to the same elements.
Tips
- A scroll-scrub is tied to scroll progress; use a click/hover trigger when the motion should respond to a discrete action.
Limitations and important notes
- Some interaction types are specialized and expose different settings; not every trigger supports every target/property combination.