여러 속성을 병렬 및 순차적으로 애니메이션 처리하기

Real UI animations are rarely a single value changing in isolation. A modal might slide up and fade in at the same time. A success icon might bounce in, then a label slides in after. React Native's Animated API provides composition helpers that let you orchestrate multiple animations working together: Animated.parallel, Animated.sequence, Animated.stagger, and Animated.delay.

These composition methods return animation objects that can be started, stopped, and even nested inside each other for complex multi-step effects.

Animated.parallel takes an array of animations and runs them all at the same time. When all animations in the array complete, the parallel group is done. This is the right choice when multiple properties should change together — for example, fading in while sliding up.

By default, if one animation in a parallel group stops (e.g., due to an interruption), all others stop too. You can override this with { stopTogether: false } as the second argument.

Animated.sequence takes an array of animations and runs them one at a time — the next animation only starts when the previous one completes. This is perfect for multi-step choreography: first a button presses in, then a spinner appears, then a checkmark pops in.

If any animation in a sequence is stopped, the subsequent animations will not run. Sequences can be nested inside parallel groups and vice versa for complex choreography.

Animated.delay does nothing for a specified number of milliseconds. It is only useful inside a sequence, creating a pause between animation steps. Using delay you can build natural pacing into multi-step animations.

For example, you might show a success message with a brief delay after an action completes, giving the user time to register what happened before the UI changes. Delays under 300ms are usually imperceptible; 400-800ms feels deliberate and intentional.

Animated.stagger is like parallel but with a time offset between starting each animation. The first animation starts immediately, the second starts after the stagger delay, the third after 2× the delay, and so on. This creates beautiful cascading entrance effects for lists or menus.

Stagger is perfect for animating list items entering the screen — each item fades/slides in slightly after the previous, giving the eye a clear path to follow through the content.

A polished modal entrance might: (1) the overlay fades in, (2) the modal card slides up and fades in simultaneously, (3) the title text appears. This three-phase choreography uses a sequence where the first step is the overlay, the second step is a parallel animation for the card, and the third step is the title.

Wrapping this in a useEffect that fires when the modal becomes visible gives you the complete entrance animation triggered by state.

Exit animations run in reverse order: first the card slides away and fades out, then the overlay fades out, then you update state to unmount the modal. Trigger the exit in the close handler, wait for the animation to complete in the callback, and only then call setVisible(false).

This prevents the modal from abruptly disappearing before the animation finishes — a common mistake that makes apps feel cheap.

Composition methods can be nested freely. A parallel inside a sequence means that at that step, multiple things happen simultaneously. A sequence inside a parallel means one branch runs step-by-step while another branch runs immediately in parallel.

Think of it like planning a theatre production: some actors are on stage at once (parallel), some scenes happen back to back (sequence), and some special effects happen with a ripple delay (stagger).

The object returned by composition methods has a .stop() method. Store the animation in a ref so you can stop it from outside (such as when a component unmounts mid-animation or when a new animation should interrupt the current one).

Always stop animations in the useEffect cleanup to prevent 'setState on unmounted component' warnings and memory leaks, especially for looping or long-running sequences.

A practical stagger implementation initializes an array of Animated.Values (one per list item) all at opacity 0, then runs a stagger animation in a useEffect when data loads. Each item in the rendered list connects to its animated value via index.

This technique makes content-heavy screens feel more dynamic. Users perceive staggered loading as faster than everything appearing at once, even though the total time is longer.

Composing animations with the component lifecycle ensures animations play at the right moment. Use useEffect for mount animations, state change effects for conditional animations, and callback composition for exit animations before unmounting.

Keep animation logic close to the component that owns the animated values. If animation logic becomes complex, extract it into a custom hook that returns the animated values and trigger functions, keeping the JSX layer clean.

Test your understanding of React Native Mobile Development concepts from this lesson.

In this lesson you learned: Animated.parallel runs multiple animations simultaneously, Animated.sequence chains animations so each starts after the previous completes, and Animated.stagger creates cascading effects by offsetting start times across an array of animations. Next up we explore useNativeDriver to achieve 60fps animations by offloading work to the native thread.