> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getflowpilot.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Animations and timeline

> Animate components with a step timeline, add text effects, set screen transitions, and choreograph a whole screen with the screen-level timeline.

Motion in FlowPilot comes from four places: each component can play a **step-based animation**, text components can run **text effects**, screens move between each other with **transitions**, and a screen can sequence everything together with its own **timeline**. All of it renders the same way on the device that you see in the editor canvas.

<Note>
  The full timeline, steps, and effect editors on this page are an **Advanced mode** surface. In [Simple mode](/editor/editing-modes), a block's [controller](/editor/block-controllers) offers a curated **Animation** field (Effect: None / Fade up / Slide in / Pop / Scale & fade / Bounce in, a Trigger of On appear or On tap, and a Delay) and, for text, a **Text effect** field (Typewriter, Count up, Scramble, and so on). These map to the vetted presets below.
</Note>

## 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                                         |

The exact type fields behind all of this live in the [flow schema reference](/reference/flow-schema). This page covers the options and how to use them.

## 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.

Once a component has an animation, the section shows the preset name (or "Custom animation"), copy and paste buttons, a **Change** button to swap presets, a clear button, quick controls for the most-tweaked values, a mini timeline (when there are two or more steps), **Preview** and **Reset** buttons that replay the animation on the canvas, and an **Advanced** block that holds the Initial State and the full step list.

### 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**.

Reorder steps by dragging them. Add a step with **Add Step**, which offers templates: Enter Animation, After Previous, Effect Loop, Exit Animation, On Tap Reaction, On Action Trigger, and Blank Step.

### 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                                           |

<Note>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](/reference/flow-schema) directly.</Note>

Steps that fire from a tap or an action are called **reactive** steps. They do not run on appear; they wait for the tap or the action.

### 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**.

<Note>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.</Note>

### 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](/editor/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 a `triggerAnimation` action that points at a step that does not exist plays nothing.

<Note>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.</Note>

## 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).

Each child still plays its own animation; stagger only offsets when each one starts.

## 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**)                                                   |

All effects also have a **Delay** before they start.

**Word Cycling** (turn on "Cycle through values") rotates the text through a list of values. The component's own text is the first value, and the values you add cycle after it. Controls include the **Values** list, a **Transition** (Slide Up, Slide Down, Fade Through, Cross Fade, Flip, Scramble), **Display time** and transition timing, **Loop**, and **Pause on last**.

## 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:

1. The navigation **edge** between the two screens.
2. The destination screen's **Enter Transition**.
3. The source screen's **Exit Transition**.
4. The flow's **Default Transition**.
5. The platform default (Slide from Right, 300 ms, Ease In Out).

So you can set one default for the whole flow and override it only where a specific screen needs something different.

* 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.

<Note>Transitions simplify automatically when a user has Reduce Motion enabled on their device. You do not need to handle that case yourself.</Note>

## 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:

1. Pick the **component** the event targets.
2. 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](/editor/particles)).
3. 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**).

The section shows each event's computed start, duration, and end time, plus a mini timeline bar so you can see the whole sequence at a glance.

## 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

<Steps>
  <Step title="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.
  </Step>

  <Step title="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.
  </Step>

  <Step 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**.
  </Step>

  <Step title="Preview it">
    Click **Preview** in the Animations section to replay it on the canvas, or open the full [preview](/editor/preview-and-live-mirror) to see it in context.
  </Step>
</Steps>

## 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 `triggerAnimation` action 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.

## Related pages

* [Particle effects](/editor/particles)
* [Interactions and actions](/editor/interactions-and-actions)
* [Navigation and branching](/editor/navigation-and-branching)
* [The properties panel](/editor/properties)
* [Flow schema reference](/reference/flow-schema)