Motion as UX: clear guidelines for Lottie, Spline and WebGL

Motion in the digital space is far more than just an aesthetic detail. When used strategically, motion design in UX becomes a functional tool that directs attention, conveys meaning and provides clear feedback. It is interaction design in its most dynamic form. However, the line between useful support and distracting overstimulation is a fine one. Successful motion in the user interface follows clear rules regarding technology, performance and accessibility. This guide lays the foundations for the strategic use of Lottie, Spline and WebGL.

Why motion is a UX issue – it’s not just about aesthetics

Movement has the ability to actively guide a user’s perception. An animation can draw attention to an important element, explain the relationship between two views, or make the status of an action immediately clear. Well-executed Motion Design in UX not only improves the perceived speed of an application, but also enhances the clarity and efficiency of user interaction.

However, the use of motion also carries risks. Uncontrolled animations can lead to visual overload, negatively impact a page’s performance and create digital barriers for users with vestibular disorders. A strategic approach based on clear rules and governance is therefore essential.

Areas of application – States, Transitions, Feedback, Onboarding

Motion should never be an end in itself. Every animation must fulfil a clear function. Typical areas of application can be divided into four categories.

System states and state changes

Animations are ideal for visualising changes in the system’s state. Short, clear signals for loading, success or error states provide the user with immediate and understandable feedback. Such animations should not exceed 600–800 milliseconds in duration, so as not to be perceived as distracting.

Transitions between views and components

Transitions between different views or components help the user to find their way around the digital space. An animation can illustrate the hierarchical relationship between a list view and a detail view, or gently draw attention to a newly displayed element. Over-the-top visual effects, such as excessive parallax scrolling, should be avoided, as they are often more distracting than helpful.

Feedback on interaction

Micro-animations are subtle yet effective responses to user actions. Hover effects, the visual feedback when pressing a toggle, or the slight pulsing of a button signal that the system has understood the input. Precise timing is crucial here to ensure the interaction feels smooth and responsive.

Onboarding and training sessions

Animations can be very helpful when introducing new features or complex workflows. Step-by-step visualisations can make a process easier to understand than text alone. It is important that such sequences are optional and can be skipped, and that there is always a fallback in the form of text or static images to ensure accessibility.

Choosing a tool – Lottie, Spline, WebGL/Three.js

Choosing the right tool depends largely on the specific application.

Lottie (2D vector, UI-oriented)

Lottie animations are ideal for UI icons, illustrative elements, micro-interactions and animated logos. As they are vector-based, the file sizes are extremely small, which makes them very efficient. There is a high degree of control over animation within the user interface, and there is broad support from runtimes across various platforms. One drawback is that complex 3D effects are only possible to a limited extent. The newer .lottie format also bundles assets and can drastically reduce file size compared to JSON alone.

Spline (3D, interactive in the browser)

3D Spline It is suitable for lightweight, interactive 3D scenes, such as those used for product demonstrations or visual showcases. The low-code workflow enables rapid iteration directly within the browser. The platform’s limitations become apparent with highly complex scenes that require a high degree of physical accuracy. Performance should always be tested on a range of different devices.

WebGL/Three.js (custom engine)

For bespoke, high-performance 3D experiences, using WebGL and frameworks such as Three.js is often essential. This solution offers full control over rendering, physics and shader effects. The advantage lies in the maximum scope for optimisation and the extensive ecosystem. However, this is offset by high development costs and greater complexity in maintenance and quality assurance.

Decision rule (short version)

• UI icon, short micro-animation: Lottie

• Complex, interactive 3D showcases: Spline

• High-end, large-scale scenes, special effects: Three.js/WebGL

Performance budgets – file size, rendering, FPS, lazy loading

High-performance motion design has to work within tight budgets.

Target frame rate

The target for a smooth display is 60 frames per second (FPS). This means that only around 16.7 milliseconds are available for each individual frame. On mobile devices or screens with a higher refresh rate (HRR), these requirements are even more stringent.

File size and formats

With Lottie, loading times were to be optimised by simplifying paths and bundling assets into .lottie files. In the 3D domain, the optimisation of textures (resolution, compression), the reduction of polygons (mesh reduction) and the use of instancing for recurring objects are crucial.

Reducing rendering costs

Animations should be implemented in such a way that they do not trigger costly layout recalculations (reflow). Instead, GPU-friendly CSS properties such as `transform` and `opacity` should be animated. The `requestAnimationFrame` API ensures that animations are optimally synchronised with the browser’s rendering cycle.

Lazy loading and defer

Non-critical animations should only be loaded once they are within the user’s viewport. Techniques such as the `IntersectionObserver` or the `loading="lazy"` attribute for media are tried-and-tested methods for this.

Accessibility – Reduced Motion, Focus Order, Keyboard Navigation Path

Good motion design is accessible.

Respect ‘Reduced-Motion’

Users can specify in their operating system that they prefer reduced motion. This setting must be queried and respected via the @media (prefers-reduced-motion: reduce) media query. Non-essential animations should be minimised or disabled entirely in this case.

Focus and keyboard

All interactive elements, including those within a 3D scene, must be accessible and operable via the keyboard. The focus order must be logical and straightforward. The use of `tabindex` with values greater than 0 should be avoided, as this disrupts the natural order.

Motion Hygiene

Background animations that play automatically without serving any clear purpose should be avoided. Users must be able to pause or stop important animations.

Governance – Motion tokens, handoff, QA/regression

Clear governance is essential to embed Motion throughout the organisation in a scalable and consistent manner.

Motion Tokens (Design System)

Recurring animation values should be defined as design tokens. These include duration, delay, acceleration curves (easing) and opacity levels. These tokens ensure a consistent visual style across all components.

Handoff from Design to Dev

The handover from design to development must be clearly defined. This includes the source file, a description of the acceptance criteria, the mapping to the motion tokens and the definition of fallbacks for `prefers-reduced-motion`.

QA and regression testing

Quality assurance should include a checklist covering FPS targets, CPU/GPU load, the impact on Core Web Vitals, and accessibility tests (screen readers, keyboard). Automated tests, for example using Lighthouse or visual regression tools, can help to ensure quality in the long term.

Conclusion

Motion Design in UX is a function, not an end in itself. The choice of tool should be based on the specific use case and the resources available, not on the latest trend. Only when performance, accessibility and clear governance are taken into account from the outset can motion realise its full potential and contribute to a better, more understandable and more enjoyable user experience.