bi-10 step 03 — Two animation paths under load

Goal

Show that the difference between transform and top is which stages run, not which processor is used.

Tasks

1. Animate the same visual effect two ways: transform and top.
2. Record both. For each, list the pipeline stages present in the trace.
3. Introduce a 500 ms main-thread block mid-animation. Describe what the user sees in each case.
4. Animate box-shadow (paint-heavy) and filter: blur() (composited but expensive). Explain why the second contradicts a naive "composited = cheap" model.
5. Find one unexpectedly-composited layer in DevTools' layer view and determine what created it.

Done when

• Stage lists for both animation paths
• Behaviour under main-thread block described for each
• filter: blur() explained in a way consistent with the pipeline model