/
Style :hover, :focus, and :active states (and per-breakpoint overrides) from a class — a single definition carries all its interactive states.
A rotate-around-object interaction turns an element to face the cursor — useful for needles, eyes, arrows, and playful hovers.
Beyond tweening properties, interactions can run special effects: textSplit, textScramble, typewriter, counter, svgDraw, svgMorph, motionPath, plus media controls and image sequences.
flowmo can run an interaction as pure CSS or via GSAP. The engine auto-picks: simple reveals/hovers/scroll compile to lightweight CSS when eligible, and anything complex (stagger, text-split, custom r
A set of ready-made interactions wire media to scroll or pointer: scrub a video or image sequence to scroll, scrub a Lottie, drive a Spline 3D scene, or auto-play a video when it enters the viewport (
The "Shadow & Filters" block stacks multiple shadow and filter effects — box/inner/drop/text shadow plus blur, backdrop blur, brightness, contrast, saturate, hue-rotate, invert, grayscale, and sepia.
Split text into characters, words, or lines and animate the pieces with a stagger — great for headline reveals.
Breakpoint presence lets you show or hide an element per breakpoint — so a section can appear on desktop but not mobile, without deleting it.
An auto-animate interaction tweens an element (or component) smoothly between states or variants using a FLIP transition — so toggling a layout, list order, or variant animates instead of snapping.
Edit SVG paths on the canvas with full cubic-Bézier anchors — drag handles in mirror, asymmetric, or corner modes; supports subpaths and closing.
flowmo builds real, working forms. Native inputs (input/textarea/select/button/label) get type and validation attributes, and any element can be flagged to “act as a form field”. Pair it with a form-s
Components are reusable elements; instances inherit the master and can expose properties (Boolean, Text, Instance Swap, Variant). Variant changes can animate via FLIP.
A window-resize interaction fires when the viewport changes size — handy for responsive behaviors that aren’t covered by breakpoints alone.
A morph interaction animates one element into another — opening a card into a lightbox, or a bullet into a panel — using a FLIP transition between the source and target.
A scroll-reveal interaction animates an element as it enters the viewport — the classic fade/slide-in. You set where the reveal starts and ends and whether it plays once.
Pointer-triggered interactions animate an element on hover, click, or focus — for buttons, cards, and inputs.
Turn a design into a reusable component with variants and states, then override exposed props per instance. The Interact panel’s Dimensions, States, and Instance sections drive this.
flowmo’s templates aren’t static blocks — each declares typed content slots (text, image, video, icon, background). When you insert one (or let the AI fill it), your content drops into the right slots
The Transform block moves, scales, rotates, and skews elements in 2D or 3D, with a 3D toggle that switches transform-style to preserve-3d.
A page-unload interaction animates as the visitor navigates away — for page-transition effects. It can optionally hold navigation briefly so the animation can play.
Variant-animate tweens a component subtree whenever a prop or variant changes — so switching a component’s state animates instead of snapping.
Build a carousel from a track of slides with prev/next and bullet controls, using the .f0-carousel class convention.
The Settings tab of any interaction controls timing: duration, delay, easing, looping, and how a multi-element animation staggers.
For coordinated, ms-precise choreography, the timeline interaction sequences multiple tweens with overlaps and position offsets.
A scroll-scrub interaction ties animation progress to scroll position — scrubbing a timeline as you scroll, optionally pinning the element in place. It also drives video scrubbing and image-sequence p
Interactive code elements (React / canvas / WebGL) can expose their own editable fields, and those fields become animatable — so you can keyframe or scroll-drive a custom element’s parameters just lik
Make an element follow the pointer (with optional smoothing and axis lock) using the follow-mouse trigger.
Select a parent by element/class selector, enable Animate children, and stagger each parent’s direct children independently.
Scoping decides what triggers an interaction and what it animates — and, for repeated components, whether each instance reacts on its own or all together.
Every interaction uses one of three animation modes — Simple (a from→to state, the default), Auto-animate (FLIP between variants), or Timeline (a multi-tween sequence) — and a one-click preset library
A mouse-position interaction drives values from where the cursor is — for parallax layers and cursor-reactive elements.
Drive an animation from pointer position (mouse-position trigger) — e.g. parallax or a value that tracks the cursor across an axis.
A tabs interaction wires tab buttons to panels — showing one panel at a time with a fade between them, using flowmo’s .f0-tabs class conventions.
The "Type" picker in Layout & Transform chooses how a container lays out its children: free, Stack (Flex), Grid, Block, Inline, Inline Block, Table, or None.
A form-submit interaction runs when a form is submitted: validate fields, then send an email, hit a webhook, or run a custom script, with success/failure outcomes.
Make every click/trigger add another movement, rotation, or scale from the element’s current state.
Scroll inertia adds smoothed, momentum-based motion driven by scroll velocity — a soft, weighted feel rather than a 1:1 scrub.
The "Layout & Transform" panel lets a frame arrange its children automatically. flowmo offers three layout modes — free (absolute), Stack (Flex), and Grid.
An accordion isn’t a single interaction type — it’s a pattern you compose: clickable headers that expand panels, where opening one closes the others. You build it from a click interaction plus per-ins
Make elements draggable (with bounds and inertia) or respond to swipe gestures in a direction.
flowmo is desktop-first: style the base breakpoint, then add smaller breakpoints whose overrides cascade down. Breakpoints can be max-width, min-width, or both, with an optional scale-lock.
The Design System holds reusable CSS variables (color/number/text/image/multi) and global classes. Change a token once and every element using it updates.
Interactions animate with GSAP. Each tween has a duration and a GSAP ease (power1–3.out, back.out, elastic.out, expo.out, sine.inOut, none), with optional stagger, loop, and yoyo.
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.