Start with a preset or choose Simple, Auto-animate, or Timeline; then define trigger, target, timing, scope, playback, and the CSS/GSAP engine before verifying preview and export.
Where: f0 Website → select an element → right sidebar → Interact → Interactions → + or Presets
Key ideas
- Simple: The default from/to tween for one effect or a staggered group, including fade, slide, scale, rotate, flip, blur, and text effects.
- Auto-animate: A FLIP transition between captured component/layout states, paired by stable element identity or display name.
- Timeline: A multi-step sequence for deliberate coordination across elements, properties, media, and exact offsets.
- Trigger and scope: Load, pointer, focus, scroll, form, lifecycle, drag/swipe, and mouse-position triggers combine with target, group/instance behavior, and optional responsive scope.
- Engine choice: Auto chooses between eligible CSS and GSAP; CSS handles supported simple cases, while GSAP owns advanced triggers, plugins, scrub, FLIP, and timelines.
Steps
- Select the element that should trigger or receive the animation and open Interact → Interactions.
- Choose a preset for a common effect, or create an interaction and select Simple, Auto-animate, or Timeline.
- Choose the trigger and confirm its target. Set animationTarget when a different element should move, and groupSelector/instance scope for repeating components.
- For Simple, keep the canvas CSS in its final visible state and define the hidden/offset entrance as a from-state. For Auto-animate, capture the real states. For Timeline, order each tween and offset.
- Set duration, delay, GSAP ease, loop/yoyo/reverse, stagger amount/origin, and trigger-specific options such as scroll start/end or click-outside reversal.
- Leave Engine on Auto unless you need to force an eligible CSS case or diagnose a GSAP-only behavior.
- Preview from the real initial condition—a fresh load, before the scroll threshold, or the inactive component state—then verify responsive scopes and export.
Preset families
- Standard: fade, slide, scale, flip, rotate, and blur.
- Text: character, word, or line reveal; scramble; typewriter; counter.
- Plugin effects: SVG draw/morph, motion path, media control, image sequence, and other schema-backed effects.
Playback and repetition
- Once versus replay/reverse.
- Loop and alternate/yoyo.
- Stagger by each or total amount, starting first/center/edges/random/grid.
- Sibling reversal for tabs/accordions and instance scoping for repeated components.
Safe delivery
The authored element should remain usable and visible without animation. Test keyboard/focus and a reduced-motion path for essential content, and verify the exported artifact because a stale export is not regenerated by later source edits.
Tips
- Use Simple plus stagger for repeated cards before reaching for a long Timeline.
- Keep motion distance and duration proportional; subtle entrances and micro-interactions age better than constant large movement.
Limitations and important notes
- Not every effect is CSS-eligible.
- Auto-animate requires captured states and stable matching identity.
- Pinned or scrubbed motion needs enough document flow and careful testing near the end of a page.
Troubleshooting
A load animation only works after editing
Reload Preview from a fresh document state and confirm the trigger is load, the interaction is enabled, and the initial state is owned by the interaction.
Repeated cards animate as one wrong group
Review groupSelector and instanceScope; use one parent-scoped interaction with a child selector and stagger.