Where motion is set
| What | Where to find it |
|---|---|
| Component animation, press feedback, stagger | Select the component, open the Logic tab in the properties panel |
| Text effects and word cycling | Select a text component, open the Style tab, Text Effects section |
| Screen transitions (per screen) | Select a screen, Screen Transitions section |
| Screen transitions (flow defaults) | Design tab in the mini-sidebar, Flow Settings, Screen Transitions |
| Animation speed | Select a screen, Animation Speed section |
| Screen timeline | Select a screen, Timeline section |
Component animations
Select a component and open the Logic tab. The Animations section drives how that component animates. A component animation is a small model: an optional Initial State (where the component starts, before any step runs) plus an ordered list of Steps. Each step says when it fires, what it does, and how long it takes.Start from a preset
When a component has no animation yet, the section shows a row of popular presets plus Browse all and Custom:- The popular presets are Fade Up, Slide In Right, Scale + Fade, Bounce In, and Pop.
- Browse all opens the preset browser, grouped into five categories: Enter, Sequence, Attention, Exit, and Interaction.
- Custom starts you with a single empty enter step.
Steps
Open Advanced to edit steps directly. Each step has:- Name: an optional label.
- Trigger: when the step fires (see below).
- Type: either a state transition (the default, labeled “None (State Transition)”) or a named effect (pulse, bounce, and so on).
- For a state transition, Animate To: Natural State (the component’s resting position) or Custom State, which exposes Opacity, Scale, Move X, Move Y, and Rotate.
- For an effect, Intensity (0 to 100) and Repeat.
- Duration in milliseconds, with quick picks of 150, 300, 400, and 600.
- Easing.
- Haptic.
Triggers
The step Trigger dropdown offers six options:| Trigger | Fires when |
|---|---|
| On Appear | The component first appears on screen |
| After Previous | The previous step finishes (adds a Gap field in milliseconds) |
| With Previous | At the same time as the previous step |
| On Screen Exit | The screen is leaving |
| On Action | A triggerAnimation action targets this step (see below) |
| On Tap | The component is tapped |
The schema and the iOS runtime also define an
onVariable trigger (fire when a variable changes), but it is not offered as a pick in the step dropdown today. If you need it, set it in the flow schema directly.Effects (attention loops)
Set a step’s Type to one of the named effects to make it a looping, keyframe-driven animation. These are the “attention” effects:pulse, bounce, shake, glow, float, heartbeat, wiggle, flash.
An effect step has an Intensity (0 to 100) and a Repeat (1, 2, 3, 5, 10, or Infinite). The Attention preset category gives you these as one-click presets (Pulse, Bounce, Shake, Heartbeat, Float, Wiggle), usually on an onAppear trigger so the component keeps drawing the eye.
Easing
The step Easing dropdown offers: Linear, Ease, Ease In, Ease Out, Ease In Out, and Spring.On a component step, choosing Spring uses default spring physics. The spring Damping and Response sliders appear only on screen transitions (below), not on individual component steps.
Playing a step from an action
A step with an On Action or On Tap trigger does nothing until something fires it. To fire it from a tap on another component, add a Trigger Animation action in that component’s Interactions (on the Logic tab), pick the Target Component, and pick the Step (the default is “First reactive step”). See Interactions and actions for the full action list. If the target component has no reactive steps, the editor tells you so (“No reactive animation steps on this component”). Adding atriggerAnimation action that points at a step that does not exist plays nothing.
FlowPilot once had separate
animation, attention, and exitAnimation properties. They are now folded into the single step timeline, and old flows are migrated automatically, so you only ever see the one Animations section.Press feedback
For a tappable component (a button, or anything with a tap interaction), the Animations section adds a Press Feedback card. The Style options are:None, Scale, Opacity, Highlight, Spring.
Scale and spring styles expose a Scale value (80 to 100 percent). Opacity and highlight styles expose an Opacity (30 to 100 percent). All styles expose Press and Release durations (50 to 500 ms). Press feedback is the quick visual response when a finger goes down, separate from any tap animation step.
Stagger
When you select a stack (a container), the Animations section adds a Stagger card. Turn on Stagger Children to make the stack’s children animate in one after another instead of all at once. Controls:- Interval: time between each child (20 to 500 ms, default 80).
- Order: Natural, Reverse, Center Out, or Random.
- Stagger Haptic: None, Tick (one tap per child), or Ramp (escalating).
Text effects
Select a text component and open the Style tab. The Text Effects section has two independent features. Effect animates how the text first renders:| Effect | What it does |
|---|---|
| None | No effect |
| Typewriter | Types in character by character (set Chars/s, a Cursor of None/Blink/Solid, optional Haptic per character) |
| Typewriter (Words) | Types in word by word (set Words/s) |
| Fade Per Line | Each line fades in in turn (set the Line interval) |
| Count Up | Numbers in the text count up from zero (set the Duration) |
| Scramble | Characters shuffle, then settle into the real text (set Chars/s) |
Screen transitions
A transition is the movement when one screen replaces another. Select a screen to set its transitions, or set flow-wide defaults under Design then Flow Settings. Type options (the move itself):None, Fade, Slide from Right, Slide from Left, Slide from Bottom, Slide from Top, Push, Scale, Flip.
Duration ranges from 100 to 600 ms (default 300). Easing options are Linear, Ease In, Ease Out, Ease In Out, and Spring. Choosing Spring reveals Damping (0 to 1, default 0.85) and Response (0.1 to 1.0 seconds, default 0.35).
Where transitions come from
FlowPilot resolves the transition for a forward move in this order, using the first one that is set:- The navigation edge between the two screens.
- The destination screen’s Enter Transition.
- The source screen’s Exit Transition.
- The flow’s Default Transition.
- The platform default (Slide from Right, 300 ms, Ease In Out).
- In Flow Settings, set the Default Transition. Turn on Custom back transition to give back navigation its own transition; otherwise back transitions auto-reverse the forward one.
- On a screen, turn on Override flow default under Enter Transition or Exit Transition to set that screen’s own.
Transitions simplify automatically when a user has Reduce Motion enabled on their device. You do not need to handle that case yourself.
Screen timeline
Component steps run relative to a single component. The screen timeline choreographs several components, and particle bursts, against one shared clock. Select a screen, open the Timeline section, and turn on Enable Timeline. Then Add Event for each thing you want to sequence:- Pick the component the event targets.
- Choose the Action: Start Animation (run that component’s appear timeline), Trigger Specific Step (run one named step), or Particle Effect (fire particles, see Particle effects).
- Choose When: At absolute time (a Start time in ms from when the screen appears) or After event (after another event finishes, plus an optional Gap).
Animation speed
Each screen has an Animation Speed section with a single Speed Multiplier slider, from 0.25x (slower) to 2.0x (faster), default 1.0x. It multiplies every animation duration and delay on that screen at once, which is handy for slowing a whole screen down to tune it, or speeding everything up without editing each step.Example: title rises, then the button springs in
Animate the title on appear
Select the title text. On the Logic tab, open Animations and choose the Fade Up preset. It sets an Initial State of slightly lower and transparent, with one On Appear step.
Add the button as a second beat
Select the button. Open Animations, click Custom (or Add Step), and add a step. Set its Trigger to After Previous with a Gap of about 150 ms so it follows the title.
Give the button a spring
On that step, set Animate To to Custom State, start it from a smaller Scale and zero Opacity in the Initial State, and set Easing to Spring.
Preview it
Click Preview in the Animations section to replay it on the canvas, or open the full preview to see it in context.
Notes and warnings
- Animation speed scales the whole screen. If a screen feels too fast or too slow everywhere, change its Speed Multiplier before editing individual steps.
- Spring on a step uses defaults. Only screen transitions expose the spring Damping and Response controls.
- Keep onboarding short. Long sequences and big gaps make the user wait. Favor durations in the 200 to 500 ms range and short gaps.
- Reduce Motion is handled for transitions. Heavy component effects and particles are still your responsibility to keep tasteful.
Common mistakes
- A
triggerAnimationaction points at a missing step. The action plays nothing. Make sure the target component has a reactive (On Action or On Tap) step, and pick it in the action. - Overlapping triggers cause jank. Many steps firing With Previous at full intensity can look busy. Stagger them with After Previous and gaps.
- Expecting an appear step to fire on tap. A step’s Trigger decides when it runs. An On Appear step will not respond to a tap; add an On Tap step for that.
- Setting a transition on the wrong level. If a screen’s transition is not what you expect, remember the cascade: an edge or a per-screen override wins over the flow default.