Ask f0 AI to author or revise a scoped interaction, then inspect its trigger, target, animation mode, playback, responsive scope, and preview before accepting it.
Where: f0 Website → AI Assistant, or select an element and press Cmd/Ctrl+K — Describe the motion and its trigger
Key ideas
- Start from exact context: A selected element, stable data-f0-id, and explicit trigger/target make the generated interaction predictable.
- Cmd/Ctrl+K is a contextual entry: With a canvas selection, the floating Ask AI/property picker can open the selected element’s bound conversation; the full AI panel is better for longer motion briefs and follow-ups.
- Three core animation modes: Simple is a from/to tween, Auto-animate uses FLIP between captured states, and Timeline coordinates several steps precisely.
- One event, one interaction: Motion properties for the same target and trigger should be merged instead of creating competing duplicate interactions.
- Preview and delivery parity: The interaction compiler serves editor preview, iframe preview, and export, but every responsive and scroll case still needs verification.
Steps
- Select the exact element or group that should trigger or receive the motion.
- Open the AI Assistant, or press Cmd/Ctrl+K for the contextual floating Ask AI entry when a canvas selection is active.
- Describe the trigger, animated target, visual effect, timing/easing, replay behavior, and responsive boundary. State whether the target is the selected element, its children, or another element.
- Ask for Simple for a single from/to effect, Auto-animate only when explicit captured states exist, or Timeline for coordinated multi-step choreography.
- Review the generated selector, trigger, animation target, group/instance scope, playback, stagger, and breakpoint/container conditions in Interact.
- Preview from a fresh load or the correct scroll position and test every input method used: pointer, keyboard/focus, touch/swipe, or form submission.
- Accept only after checking desktop and smaller breakpoints; undo and narrow the scope if the assistant changed the wrong element or duplicated an event.
Useful brief template
“On [trigger], animate [exact target] from/to [properties], over [duration/ease], [once/reverse/loop], stagger [children] by [amount], only at [breakpoint/container condition].”
Common class conventions
- f0-reveal for grouped staggered entrances.
- f0-tabs/f0-tab/f0-tab-panel for scoped tab behavior.
- f0-carousel and its track/slide/control classes for one owned carousel interaction.
- f0-accordion item/trigger/panel classes for one-open-at-a-time behavior.
Choosing an engine
- Auto lets the compiler choose.
- CSS is eligible only for supported simple cases.
- GSAP is required for complex triggers, plugins, scrubbing, FLIP, or timelines.
- Do not hide content in persistent CSS for an entrance; use a from-state so the final authored state stays visible.
Tips
- Prefer restrained combinations such as opacity plus a small translation; use Timeline only when ordering truly matters.
- Use stable element ids or intentional reusable classes, not brittle positional selectors.
Limitations and important notes
- Cmd/Ctrl+K behavior depends on the active surface, selection, and whether the selected element has a bound conversation.
- AI output is not proof of keyboard access, reduced-motion behavior, responsive safety, or export correctness.
- Auto-animate needs real captured states; it is not a substitute for an underspecified layout request.
Troubleshooting
Nothing moves
Confirm the interaction is enabled, the selector matches, the trigger can fire, and the element is not hidden by persistent CSS.
The motion fires twice or fights itself
Look for another interaction with the same target and trigger. Merge the properties or update the existing definition.