tezvyn:

Animated.sequence versus Animated.parallel

AI-drafted, machine-checkedSource: interviewintermediate
WHAT IT TESTS

Composing multiple animations.

OUTLINE

sequence runs animations one after another in order, parallel starts them at the same time.

RED FLAG

thinking parallel waits for the slowest before others begin, or confusing them with stagger.

WHAT THIS TESTS Whether you understand the animation composition helpers and can pick the right one for a given motion design, rather than chaining callbacks by hand.

A GOOD ANSWER COVERS Animated.sequence accepts an array of animations and runs them strictly in order, starting the next only when the current one calls back as finished. Animated.parallel accepts an array and starts every animation at the same moment; the composite finishes when the last child finishes, and by default if one is stopped the others stop too unless you pass stopTogether false. Both return a composite animation object with start and stop, so you call .start() once on the wrapper. You should also mention Animated.stagger, which is like parallel but with a fixed delay between each start.

COMMON WRONG ANSWERS Saying parallel runs animations one after another, which is actually sequence. Confusing parallel with stagger. Forgetting that you call start on the composite, not on each child. Believing sequence needs manual completion callbacks; the helper handles chaining internally.

LIKELY FOLLOW-UPS How does stagger differ, how do you stop a running composite, what happens if one animation in a parallel set is interrupted, and can you nest sequence inside parallel.

ONE CONCRETE EXAMPLE A sequence use case: a toast that first slides up from the bottom, then after settling pulses its scale to draw attention, then waits and slides away; each phase must wait for the prior one. A parallel use case: a modal card that simultaneously fades its opacity from 0 to 1 while scaling from 0.9 to 1.0, so both transforms feel like one unified entrance. Nesting is allowed, so you can run a parallel group as one step inside a larger sequence.

Read the original → reactnative.dev

Get five bites like this every day.

Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.