Motion

Motion is part of an element's style. Select an element, open the Style tab and scroll to Motion. There are two kinds: a transition animates the element whenever its style changes, and an animation plays when the element appears. Both run natively on iOS and Android and on the web.

Transitions

A transition makes a change of style gradual instead of instant.

1. Under Animate changes, pick what should animate: Everything, Opacity, Background colour or Transform.
2. Set the Duration in milliseconds. 150 to 300 feels quick; longer reads as slow.
3. Optionally set a Delay and an Easing.

A transition does nothing on its own. It animates changes that come from somewhere else:

• A state. Give the element a state with a different style, for example a card that turns yellow when a counter passes three. The transition animates the way into the state and the way out.
• Being pressed, hovered or focused. See Press feedback below.
• The theme. Switching between light and dark animates the colors.

Set the transition in the Default state. A state's own style only says how the element looks in that state.

Animations

An animation plays once the element is on screen.

1. Under Animation, pick a preset.
2. Adjust the Duration, Delay, Repeat, Direction and Easing.
3. Press Play to see it again on the canvas.

Preset	Kind	What it does
Fade in	Enter	Fades from transparent
Fade in up, Fade in down	Enter	Fades in while moving a short way up or down
Slide in from left, Slide in from right	Enter	Slides in from the side
Zoom in	Enter	Grows slightly while fading in
Bounce in	Enter	Pops in with a small overshoot
Pulse	Loop	Grows and shrinks a little
Spin	Loop	Rotates a full turn
Shake	Loop	Moves side to side
Bounce	Loop	Hops up and back
Blink	Loop	Fades out and back

An enter preset plays once and ends on the element's own style. A loop preset repeats forever unless you change Repeat.

On the canvas, Design mode shows the finished state and Play replays the animation. In Develop, Prototype and Play the animation runs when the element appears. An element that is already on screen does not replay it, so a tab you return to keeps its content still.

Press feedback

An element that can be pressed has two more entries in the State row of the Style tab: Pressed and Hovered. An input also has Focused.

1. Select the element and pick Pressed in the State row.
2. Change only what should differ while it is pressed, such as a lower opacity or a darker background.
3. Go back to Default and add a transition under Motion, so the change animates.

The pressed look applies for as long as the finger is down. Hovered applies under a mouse pointer, so it matters on the web.

Screen transitions

A screen in a stack can open with its own transition. Select the screen on the Screens canvas and set Transition in the inspector: Fade, Fade from bottom, Flip, Simple push, Slide from bottom, Slide from right, Slide from left, None, or the iOS-style slides. Default keeps the platform's own transition.

Screen transitions run on iOS and Android. On the web a screen changes without one.

Ask the assistant

The assistant can add motion for you. Try "make the cards fade in one after another", "animate the button when it is pressed" or "open the details screen with a fade".

Reduced motion

When a person has turned on Reduce Motion in their device settings, transitions and animations are switched off for them. Elements show their finished style straight away. Pressed, hovered and focused looks still apply, without the animation.

In code

Motion keys are ordinary style keys, so they work in a Styler.create style the same way:

import { Styler } from '@mapples/style';

const styles = Styler.create({
  card: {
    opacity: 1,
    transitionProperty: 'all',
    transitionDuration: '200ms',
    animationName: 'fadeInUp',
    animationDuration: '500ms',
    animationFillMode: 'both',
  },
  cardPressed: { opacity: 0.6 },
});

<Pressable styled={{ style: styles.card, 'style::$pressed': styles.cardPressed }} />;

• Times are strings with a unit: '300ms' or '0.3s'.
• animationName takes a preset name (fadeIn, fadeInUp, fadeInDown, slideInLeft, slideInRight, zoomIn, bounceIn, pulse, spin, shake, bounce, blink) or keyframes written in place, such as { from: { opacity: 0 }, to: { opacity: 1 } }. The presets are exported as ANIMATION_PRESETS.
• Timing functions are ease, ease-in, ease-out, ease-in-out and linear.
• 'style::$pressed', 'style::$hovered' and 'style::$focused' hold only the keys that differ in that state.
• An element with motion is rendered through Reanimated. @mapples/style needs react-native-reanimated 4 or later; apps created with the Mapples CLI already have it.

Limits

• No exit animation: an element that is hidden disappears at once.
• No custom easing curves in the editor, only the named ones.
• No scroll-driven or gesture-driven effects.
• For animation files made in other tools, use the Lottie and Rive elements.