Animations
Add entrance animations, looping motion, press feedback, and screen transitions to your flows.
Animations
Motion makes a flow feel like part of the app instead of a screen dropped on top of it. Setgreet gives you four kinds of motion, all authored in the editor and rendered natively on iOS and Android: an entrance animation when a component appears, a continuous loop to draw the eye, press feedback on buttons, and a transition when the flow moves between screens.
All motion respects the user's accessibility settings. On iOS, Reduce Motion turns animations off. On Android, setting the animator duration scale to zero does the same. Content always renders at its final, fully visible state.
Entrance animations
An entrance animation plays once, when a component first appears on screen.
Presets
| Preset | Description |
|---|---|
none | No animation. The component appears instantly. |
fade | Fades in from transparent to opaque. |
slide-up | Slides in from below the component's final position. |
scale | Scales up from slightly smaller. |
Older flows may still carry presets that are no longer offered, such as bounce, rotate, or flip. These were
never rendered on device and resolve to no motion. Re-pick one of the four presets above to animate those components.
Configuration
| Property | Type | Default | Description |
|---|---|---|---|
| Preset | select | none | The entrance animation to apply. |
| Duration | number | 300ms | How long the animation takes to complete. |
| Delay | number | 0ms | Time to wait before the animation starts. Use this to stagger multiple components. |
| Easing | select | easeOut | The timing curve (see Easing below). |
Stagger an entrance by setting increasing delay values on sibling components. A title at 0ms, a subtitle at 100ms, and a button at 200ms creates a cascade. Keep the final delay under about 400ms so the call to action is never slow to arrive.
The scale preset defaults to spring easing for a natural settle. Every other preset defaults to easeOut.
Loop animations
A loop runs continuously, drawing attention to one element. Loops are independent of the entrance animation and compose with it: the loop waits for the entrance to finish, then starts, so the two never fight over the same property.
Presets
| Preset | Description |
|---|---|
none | No loop. |
float | A gentle vertical bob. Good for hero art and illustrations. |
pulse | A soft fade down and back up. Good for a small status dot or badge. |
Configuration
| Property | Type | Default | Description |
|---|---|---|---|
| Loop | select | none | The loop preset to apply. |
| Cycle | number | 2800ms float, 1500ms pulse | Milliseconds for one full cycle, out and back. |
| Iterations | number | 0 | Number of full cycles. 0 means the loop runs indefinitely. |
Using loops well
Motion is decoration, never information: a screen has to read correctly with every animation removed. Use at most one float per screen, on the hero art. Reserve pulse for a single small accent. Looping a headline or a call to action makes a screen feel restless rather than alive.
Press feedback
Buttons can scale down slightly while pressed, the tactile response users expect from a native control.
| Property | Type | Default | Description |
|---|---|---|---|
| Press feedback | boolean | off | Enable the pressed state. |
| Pressed scale | number | 0.96 | How far the button scales down. Values run from 0.85 to 1.0. |
Screen transitions
A screen transition controls how a screen animates in when the flow navigates to it. Set it on the screen itself, in the properties panel, with no component selected.
| Type | Description |
|---|---|
none | Instant swap, with no motion. |
fade | The incoming screen fades in as the outgoing one fades out. |
slide | A horizontal slide. Going back mirrors going forward automatically. |
slide-up | The incoming screen rises from the bottom, like a sheet. |
| Property | Type | Default | Description |
|---|---|---|---|
| Type | select | Default | The transition to apply. |
| Duration | number | 300ms | How long the transition takes. Valid from 0 to 1000ms. |
| Easing | select | ease-in-out | linear, ease-in, ease-out, or ease-in-out. |
You only set the transition on the incoming screen. The outgoing screen's exit is derived from it, so a fade in pairs with a fade out and a slide in pairs with a slide out in the opposite direction.
Screens left on Default keep the behavior they have always had, so adding transitions to one screen never changes the rest of the flow. Pick one transition style for a flow and stay with it unless a particular moment earns the change: slide suits a forward-moving sequence such as a quiz, fade suits a reveal.
Easing
Easing controls the acceleration curve of an animation.
| Easing | Description |
|---|---|
linear | Constant speed from start to finish. Mechanical feel. |
easeIn | Starts slow, accelerates toward the end. |
easeOut | Starts fast, decelerates toward the end. The natural choice for an entrance. |
easeInOut | Starts and ends slow with acceleration in the middle. Smooth and polished. |
spring | Physics-based spring dynamics with a natural overshoot and settle. Ignores the duration value. |
Duration
Duration is measured in milliseconds. The default is 300ms.
| Range | Feel |
|---|---|
| 100-200ms | Snappy and immediate. Good for press feedback and micro-interactions. |
| 200-400ms | Balanced. The sweet spot for entrances and screen transitions. |
| 400-800ms | Deliberate and attention-drawing. Good for a hero element. |
| 800ms+ | Dramatic. Use sparingly. |
Lottie animations
For motion that goes beyond these presets, the Lottie component renders JSON animations created in After Effects and exported via Bodymovin, with frame-by-frame control, adjustable speed, and resolution-independent rendering.
Reach for Lottie when you need branded illustrations or complex multi-element motion. For everything else, the presets above render natively with no asset to load.