Animations

Animations bring your in-app experiences to life. Setgreet supports a full animation system with enter, exit, hover, tap, and loop animations — all rendered natively on iOS and Android. You can apply preset animations to any component or use Lottie JSON for complex custom motion graphics.

Enter Animations

Enter animations play when a component first appears on screen. They control how elements transition from invisible to visible.

Presets

Preset	Description
`fade`	Fades in from transparent to opaque.
`fadeIn`	Alias for fade.
`slideUp`	Slides in from below the component's final position.
`slideDown`	Slides in from above.
`slideLeft`	Slides in from the right.
`slideRight`	Slides in from the left.
`scale`	Scales up from a smaller size.
`scaleIn`	Alias for scale.
`bounce`	Enters with a bouncing effect.
`pulse`	Fades in with a pulsing size change.
`shake`	Enters with a horizontal shake.
`flip`	Flips in along the Y axis.
`rotate`	Rotates in from a turned angle.
`none`	No animation — the component appears instantly.

Triggers

Enter animations can be triggered by different events:

Trigger	Description
`onMount`	Plays immediately when the screen loads. This is the default.
`onVisible`	Plays when the component scrolls into the viewport. Useful in scrollable screens.

Configuration

Property	Type	Default	Description
Preset	select	none	The animation preset 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	ease	The timing curve (see Easing section below).

Stagger multiple enter animations by setting increasing delay values on each component. For example, a title with 0ms delay, a subtitle with 100ms, and a button with 200ms creates a cascading entrance effect.

Exit Animations

Exit animations play when a component is removed from the screen — typically during a screen transition. They control how elements leave the viewport.

Presets

Exit animations use the same preset library as enter animations. Common pairings:

Enter	Exit	Effect
`fadeIn`	`fadeOut`	Gentle fade transition.
`slideUp`	`slideDown`	Content slides up to enter, down to leave.
`scaleIn`	`scaleOut`	Zooms in to appear, shrinks to disappear.
`slideLeft`	`slideRight`	Horizontal slide transitions.

Configuration

Exit animations share the same duration, delay, and easing properties as enter animations.

Hover Animations

Hover animations provide visual feedback when a user hovers over a component (on devices that support hover, such as iPads with a pointer or desktop web previews).

Properties

Property	Type	Default	Description
Preset	select	none	The animation preset.
Scale	number	1.05	Scale factor applied on hover.
Opacity	number	1	Opacity applied on hover.
Duration	number	300ms	Transition duration.
Easing	select	ease	Timing curve.

Tap Animations

Tap animations play when a user taps on a component, providing tactile feedback. They are most commonly used on buttons and interactive elements.

Properties

Property	Type	Default	Description
Preset	select	none	The animation preset.
Scale	number	0.95	Scale factor on tap (values below 1 create a "press in" effect).
Opacity	number	1	Opacity on tap.
Duration	number	300ms	Animation duration.
Easing	select	ease	Timing curve.

Loop Animations

Loop animations run continuously, repeating for a set number of iterations or indefinitely. They are ideal for drawing attention to important elements.

Properties

Property	Type	Default	Description
Preset	select	none	The animation preset. `pulse` and `bounce` are the most common loop animations.
Duration	number	300ms	Duration of one animation cycle.
Iterations	number	-1	Number of repetitions. -1 means infinite.
Direction	select	normal	Playback direction: `normal`, `reverse`, `alternate` (forward then backward).
Easing	select	ease	Timing curve.

Common patterns

Pulsing badge — apply a pulse loop to a "NEW" badge to draw the eye
Bouncing arrow — a bounce loop on a down-arrow icon to indicate scrollable content
Attention button — a subtle pulse on a CTA button to encourage taps

Easing

Easing controls the acceleration curve of an animation — whether it starts slow, ends slow, or maintains constant speed.

Easing	Description
`linear`	Constant speed from start to finish. Mechanical feel.
`ease`	Starts slow, accelerates, then decelerates. The most natural-feeling default.
`easeIn`	Starts slow, accelerates toward the end. Good for exit animations.
`easeOut`	Starts fast, decelerates toward the end. Good for enter animations.
`easeInOut`	Starts and ends slow with acceleration in the middle. Smooth and polished.
`spring`	Physics-based spring dynamics with natural overshoot and settle. Creates the most organic feel.

Duration and Delay

Duration

Duration controls how long an animation takes to complete, in milliseconds. The default is 300ms.

Range	Feel
100-200ms	Snappy, immediate. Good for tap feedback and micro-interactions.
200-400ms	Balanced. The sweet spot for most enter/exit animations.
400-800ms	Deliberate, attention-drawing. Good for hero elements and celebrations.
800ms+	Dramatic. Use sparingly for special moments.

Delay

Delay sets how long to wait before an animation begins, in milliseconds. The default is 0 (immediate).

Delay is most useful for staggering — creating a cascading sequence where components animate in one after another. Set incrementing delay values on sibling components to achieve this effect.

Lottie Animations

For animations that go beyond what presets offer, the Lottie component renders JSON-based animations created in After Effects and exported via Bodymovin.

Lottie animations offer:

Frame-by-frame control with start and end frame properties
Adjustable playback speed
Loop and autoplay configuration
Resolution-independent rendering at any size

Use Lottie when you need branded illustrations, complex multi-element animations, or animations that match a specific design specification.

Animations

On this page