UI animation guide: micro-interactions and UI motion with Linearity Move

UI animation is the motion design layer of digital products, the transitions, feedback states, loading indicators, and micro-interactions that make an interface feel responsive, intuitive, and alive. In 2026 it's a standard expectation in product design, not an enhancement. This guide covers what UI animation is, the principles that make it effective, the most common micro-interaction patterns, and a practical workflow for animating UI elements in Linearity Move on iPad and Mac.

What is UI animation?

UI animation is motion applied to interface elements — buttons, cards, navigation bars, modals, icons, progress indicators — to communicate state changes, guide attention, provide feedback, and make transitions feel continuous rather than abrupt.

It exists on a spectrum from subtle to expressive:

• Micro-interactions — tiny, functional animations triggered by a user action: a button press that confirms the tap, a toggle that slides between states, a form field that shakes on error input
• State transitions — animations that communicate a change in the interface: a card expanding to full screen, a menu sliding in, a tab switching with a horizontal swipe
• Loading and progress — animations that fill time during data fetching: spinners, skeleton screens, progress bars
• Onboarding animations — illustrative motion that introduces features or guides new users through a product
• Decorative motion — ambient animation that gives a product personality without serving a direct functional purpose

The distinction between UI animation and motion graphics is context. Motion graphics exist as content to be watched. UI animation exists as part of an interface to be used — it should support the user's task, not distract from it.

UI animation types from functional to expressive: micro-interactions, state transitions, loading states, and onboarding motion each serve a different purpose in the interface.

Why UI animation matters

It communicates state changes. An interface without animation is a series of abrupt cuts — one state replaced by another with no explanation of what changed or why. Animation creates continuity. When a modal appears with a subtle scale-up, the user understands it came from somewhere. When it dismisses with a fade-down, they understand it's gone. Without animation, these changes feel arbitrary.

It provides feedback. A button that doesn't visibly respond to a tap creates uncertainty — did it register? A micro-interaction that gives the button a brief press state or a ripple effect confirms the action immediately. Feedback animation reduces anxiety and increases confidence in the interface.

It guides attention. A notification badge that pulses, a CTA that gently bobs, a new card that slides in from the right — these all direct the user's eye to where the interface wants it to go. Motion is a more powerful attention signal than colour or size alone because it triggers involuntary visual response.

It makes wait times feel shorter. A loading spinner doesn't make the data arrive faster. But a well-designed loading animation makes the wait feel shorter — it signals that something is happening, and it gives the eye something to follow. Products with polished loading states consistently score higher on perceived performance than products with equivalent actual performance but static loading states.

It differentiates the product. At feature parity, the product that feels better wins. UI animation is a significant contributor to how a product feels — the difference between something that feels snappy and considered versus something that feels static and unfinished.

The principles of good UI motion

Good UI animation follows principles derived from the 12 animation principles (Disney, 1981) adapted for interface contexts. The most relevant are:

Easing over linearity. Elements in the real world don't start and stop at constant speed — they accelerate and decelerate. Interface elements should do the same. An element that moves from A to B at constant speed feels mechanical. The same movement with ease-in-out feels natural. In Linearity Move, easing is set via the keyframe handles in the timeline — dragging the handles creates the bezier curve that defines the interpolation.

Duration that matches intent. Micro-interactions should be fast — 150–300ms. State transitions should be medium — 250–400ms. Decorative and onboarding animations can be longer — 400–800ms. The rule: the more functional the animation, the shorter it should be. Functionality shouldn't wait for animation.

Consistent direction and axis. Elements that enter from the right should exit to the right. Modals that appear from the bottom should dismiss to the bottom. Breaking directional consistency confuses users because it violates the spatial model they've built of the interface.

One thing at a time — mostly. Avoid animating multiple unrelated elements simultaneously. When everything moves at once, nothing is readable. Stagger related elements (150ms between each) so there's a clear sequence. Exception: tightly related groups (a card with its title and subtitle) can animate together as a unit.

Purposeful, not decorative. Every UI animation should answer the question: what does this communicate to the user? If the answer is nothing — if the animation is purely aesthetic — it should be reconsidered. Decorative animation slows users down and can reduce perceived performance.

Common micro-interaction patterns

Button press states. The most basic micro-interaction — a button that responds visually to being tapped. Typically a brief scale-down (96–98%) on press, returning to 100% on release. Sometimes combined with a subtle opacity change. Takes 100–150ms each way.

Toggle switches. A switch that slides from off to on (or vice versa) with the thumb following a clear horizontal path and the background colour transitioning simultaneously. The critical detail: the thumb should travel with ease-out so it decelerates into the new position rather than snapping.

Form validation feedback. A field that shakes horizontally when validation fails — a short, rapid oscillation (3–4 shakes over 300ms) that mimics a physical "no" gesture. A field that shows a green checkmark or subtle glow when validation passes.

Pull to refresh. The spinner that appears when a user pulls down on a list — the icon often morphs or rotates as the pull distance increases, then triggers a spin state when the threshold is reached and refresh begins.

Skeleton screens. The shimmer animation that plays on placeholder elements while content loads — a gradient sweep moving left to right across grey placeholder shapes. Significantly better for perceived performance than a blank screen or a spinner alone.

Success and completion states. The checkmark that draws itself on form completion, the confetti burst on onboarding completion, the animated empty state that plays when a list is emptied. These are the micro-interactions with the most emotional impact — they make an otherwise unremarkable functional moment feel rewarding.

Tab bar transitions. The active tab indicator sliding horizontally between tabs on selection — the indicator moves as a continuous element rather than disappearing in one position and appearing in another. Creates a sense of physical location within the navigation.

UI animation in Linearity Move: core techniques

Linearity Move on iPad and Mac provides the tools needed to design and prototype UI animations — pins, keyframes, masks, morphing, and the Design/Animate Mode workflow. Here's how the key techniques map to UI animation work.

Pins — defining start and end states

Animation pins in Move define where an element is at the start and end of its animation. For a UI element sliding in from the left: pin the element's position off-canvas at the start of the timeline, pin it at its final position at the point you want it to arrive. Move fills in the motion between the two pins.

Pins are particularly useful for UI work because interfaces are about elements arriving at and leaving fixed positions — unlike motion graphics, where elements often move continuously through a composition.

Keyframes for position, scale, rotation, and opacity

The four properties that cover almost all UI animation needs:

• Position — for slides, entrances, exits, and spatial transitions
• Scale — for press states (scale down), pop-in effects (scale up from 0), and card expansions
• Rotation — for spinners, refresh indicators, toggles, and expressive icon animations
• Opacity — for fades, ghost states, and layered reveal sequences

Each property gets its own keyframe track in the Move timeline. Setting a keyframe records the value of that property at that point in time. Changing the value at a different time point creates the animation.

Selecting multiple objects for consistent timing

In Move, you can select multiple layers and set keyframes for all of them simultaneously. For animating a card that contains a title, subtitle, and image — select all three, set the initial keyframes together, then set the final keyframes together. This ensures they all move as a unit with identical timing. For staggered effects, set the group keyframes first, then offset individual layers by 50–100ms.

Masks for reveal animations

Masks in Move clip an element to a defined shape — only the area inside the mask is visible. For UI animation, masks are the technique behind most reveal effects: text that appears to write itself (the text is full-size but masked by a rectangle that grows left to right), a progress bar filling, a card content area revealing as the card expands.

Apply a mask by placing a shape over the element and using the mask function in the layer panel. Animate the mask shape — not the element itself — to control what's visible at each point in the timeline.

Colour morphing for state changes

Move supports animating colour changes between keyframes — a shape or fill transitions from one colour to another over the animation duration. For UI animation, this is used for: toggle switches changing background colour between states, progress indicators shifting colour as they fill, active state changes on navigation elements.

Set keyframe 1 with the initial colour, keyframe 2 with the final colour — Move interpolates the colour change smoothly between them.

Walkthrough: animating a fintech app UI in Move

This walkthrough is based on the Linearity Academy tutorial by Maddy Zoli — intermediate level, iPad.

Animating UI elements with Linearity Move on iPad

Let"s jump into crafting an engaging animation that showcases the interface of a fintech app.

Maddy Zoli

The tutorial uses a fintech app UI as the subject — a dashboard screen with a balance card, transaction list, and navigation bar. The context matters: fintech UI animation needs to feel precise and controlled, not playful or expressive. Timing is tight, easing is subtle, and nothing decorative slows the user down.

Step 1 — Import the design file and create scenes. Download the tutorial's .curve file from the Academy page and import it into Move. The design is structured as separate artboards — each artboard becomes a scene in Move. Import, then structure the scenes in the timeline so they play in sequence.

Step 2 — Set up pins for static elements. The navigation bar and header stay fixed while content animates. Pin these elements at their position from the first frame — they won't move, and the pin ensures Move treats them as anchors rather than elements to animate.

Step 3 — Animate the balance card. The balance card enters with a scale-up from 95% and a simultaneous opacity fade from 0 to 100. Set keyframe 1 at time 0 (scale 95%, opacity 0). Set keyframe 2 at 0.3 seconds (scale 100%, opacity 100). Apply ease-out easing — the card decelerates into its final position.

Step 4 — Stagger the transaction list items. Each transaction row in the list enters with the same animation — slide up from 10px below its final position, opacity 0 to 100. Select all rows, set the keyframes simultaneously, then offset each row's keyframes by 80ms. The result is a cascading list reveal that reads clearly and feels fast.

Step 5 — Animate the progress bar with a mask. The account progress bar fills from left to right. Apply a mask to the filled bar — a rectangle that starts at zero width and expands to full width over 0.6 seconds. Animate the mask width, not the bar itself. Use ease-in-out for a smooth fill.

Step 6 — Use colour morphing for the active state. The active tab in the navigation bar has a different colour from the inactive ones. Animate the colour morph between states — the inactive colour at keyframe 1, the active colour at keyframe 2. This communicates the state change without requiring a separate element.

Step 7 — Adjust timing and easing. Review the full animation at normal speed. Check that: nothing takes longer than 400ms, no two unrelated elements are moving simultaneously, every element has easing applied. Use the keyframe handles in Move's timeline to refine the bezier curves until everything feels settled.

Step 8 — Export. Export as MP4 for presentation to stakeholders or for use in a product demo video. Export as a Lottie JSON file if the animations will be implemented directly in the app — Lottie preserves the keyframes, easing, masks, and morphing with full fidelity.

Exporting UI animations

For UI animation work, Lottie is almost always the right handoff format. The developer implements the Lottie file using the platform SDK (iOS, Android, web) and the animation plays in the product exactly as designed. See the Lottie animation guide for the full implementation workflow.

Go deeper: Academy tutorial

The full tutorial this guide is based on is free in the Linearity Academy:

Animating UI elements with Linearity Move on iPad — Intermediate / iPad / includes downloadable .curve file

Related Academy tutorials:

• How to animate with masks on iPad — covers the mask technique in depth
• Learn Linearity Move in 90 seconds on iPad — quick orientation if you're new to Move

UI animation sits within the broader motion design landscape. For a full overview of animation principles, tools, formats, and workflows, the animation and motion design guide covers the complete picture.