Beyond After Effects: Animating Product UI for Production
After Effects is excellent for sequences and illustration. Product UI needs states, input and runtime playback. Where AE fits, where it stops, and how to hand off.
Core Takeaway
After Effects is excellent for non-interactive sequences, illustration and marketing motion. It is a weak home for product UI because the output is a fixed timeline, not a component with states and inputs. The usual bridge is Lottie or dotLottie, and that bridge carries only part of the interaction. Decide early whether you are making a film or a component, then choose the tool for that job.
After Effects is a sequence tool
After Effects is built around a composition and a playhead. That model is ideal for a title card, an explainer or a looping illustration where the sequence is known in advance. It is not built around a component that must respond to a tap, wait for data and recover from an error. You can fake those states with separate compositions, but the logic connecting them still has to live outside the file.
What survives the export
Bodymovin exports a subset of After Effects features to Lottie JSON for playback on web and mobile. Some effects, expressions, blend modes and unsupported layer types do not survive, or need to be baked. A dotLottie package can add assets, themes and a state machine, but only a compatible dotLottie player runs that logic. Before designing around an effect, test the export and the player on the target platform.
Where After Effects still wins
Keep After Effects for the work it does best: brand films, launch videos, detailed illustration, compositing and anything that ends up as a video file. It is also a strong sketching tool for motion ideas. The mistake is treating an AE composition as the production source for a component that developers must rebuild feature by feature.
The handoff gap
A video or a GIF shows what the motion should look like but not how it behaves. A developer still has to choose the curve, decide what happens on interruption, and recreate every state. That translation is where timing drifts and edge cases disappear. If the interaction matters, hand off the states and the timing in a form the runtime can use, not only a reference movie.
A practical split
Use After Effects for the parts nobody touches, and an interactive runtime for the parts they do.
- Marketing film or launch loop: After Effects, exported as video
- Animated illustration with a few triggers: After Effects plus Lottie or dotLottie, tested on target players
- Buttons, toggles, forms, sheets and AI states: a state machine with springs, authored in the runtime you ship
- One interactive component across web and mobile: a file-based runtime or a code-first state machine
How to decide
Ask one question before opening any tool: will a person interact with this, and can it branch? If the answer is no, a timeline is fine. If the answer is yes, start with states and choose a runtime that can run them. That runtime can be a code-first state machine, a Rive file or another interactive format. The tool matters less than whether the states survive the export.
Key Principles to Remember
- After Effects is a sequence tool; product UI is a state and input problem
- Bodymovin exports a subset of AE features, and dotLottie state machines need a compatible player
- Keep AE for films, illustration and compositing
- Hand off states and timing, not only a reference video
- Choose the runtime before animating the interactive parts
Frequently Asked Questions
Sources
- lottie-web and Bodymovin — Airbnb
- dotLottie specification — dotLottie
- Motion overview — Material Design 3