Motion work can contend for the main thread and cause jank
Aliases: main-thread contention · animation jank · layout thrash
What it is
If interpolation, layout and paint for motion pile onto the main thread, input handling and the next frame miss vsync together. Jank is contention, not a duration that was set too long. A 200 ms clip that does layout every frame eats the 16 ms budget; scroll and click callbacks queue behind it. Jank is that ledger, kept separate from “how long the transition should play perceptually.”
Why it happens
The typical UI thread runs script, style and layout, and input dispatch. If each animation frame mutates properties that retrigger layout (width, height, margin, position in flow), a whole subtree is laid out again every frame, and work grows with node count. The compositor could have moved layers alone, but that path requires the motion to stay on transform and opacity; fall back to layout and the main thread locks to rendering.
Contention does not look like “the animation got slower.” It looks like a long tail on frame time: most frames fine, some at 40 or 70 ms, so travel stutters. If input lives on the same thread, a tap inside a jank frame is delayed to the next, and finger-following dies with it.
Studying it
Use a frame-time histogram, not mean frame rate. Independent variables: whether animated properties trigger layout, whether input is concurrent, node count. Dependent variables: share of frames over budget, input-to-handler delay, tail (95th-percentile frame time, for example). Record on the target device; a simulator’s main thread is a different shape.
Report whether the animation runs during scroll: scroll already spends layout, so stacked motion punches the budget sooner.
Where it stops holding
- Compositor-only motion (layer transforms) barely takes this contention path, unless too many layers were uploaded or a large blur is in play.
- Shortening duration cuts frame count, not work per frame; a short heavy clip still punches the budget.
- Background tabs are throttled and change the contention pattern; their frame times must not stand in for the foreground.
Applying it
- Take flow-affecting properties out of interaction animation; move displacement onto transforms.
- Avoid extra script layout reads during the clip, which force synchronous layout.
- Check: on a low-end physical device, open a frame-time view and play the motion while scrolling. A 95th percentile over budget means the main thread is being crowded.
Related
- Same group: F7.12.2 Dropped frames hurt more than no motion because they expose strain · F7.12.3 On low-end devices, complex motion should degrade or stop, not scale uniformly · F7.12.4 Simultaneous motions stack cost beyond a single-motion budget
- Nearby: R3.08 Performance cost of animation · R3.05 Render-blocking and layout shift · F7.02 Motion duration
- Search terms:
jank·frame budget·main thread