A menu opens because isOpen became true. A notification leaves because React removed it from the tree. A card changes visual state when it receives focus.
Then there is the hero where the heading splits into lines, the image unmasks 180 milliseconds later, the background drifts while the section is pinned, and the sequence changes direction when the user scrolls back.
If application state determines what the animation should resolve to, start declaratively. If timing, sequencing, measurement, or another browser-controlled signal defines the behavior, imperative control often maps more cleanly.
That decision comes before the library choice. Motion has both declarative React APIs and imperative controls such as useAnimate; GSAP is built around imperative tweens and timelines but provides React-specific lifecycle tooling. Declarative does not mean Motion, and imperative does not mean GSAP. They are programming models that different libraries expose in different ways.
The animation is attached to something the application already understands: isOpen.
React owns the state. The animation layer translates a change in that state into visual movement.
You do not need to describe every path the sidebar could take from every previous position. You declare the state it should resolve toward and let the animation system handle the transition.
This model fits naturally when motion follows meaningful interface states: open and closed; selected and unselected; hover, tap, or focus; mounted and unmounted; expanded and collapsed; layout states already represented by component data.
The component has a real domain state: expanded or collapsed. The animation is merely the visible transition between those conditions.
Introducing a timeline, storing it in a ref, then calling .play() and .reverse() would add orchestration to a problem that barely has a sequence.
Now imagine an intro sequence: reveal a hero image; begin the headline before that reveal finishes; stagger several metadata items; overlap the navigation entrance; pause briefly; start another visual event at a labelled point.
But those booleans do not describe meaningful application state. They exist because the developer needs a clock.
The important information in this interaction is not whether the heading is ultimately visible. It is when its movement starts relative to everything else.
The heading begins before the image finishes. The metadata follows while the heading is still moving. Changing the choreography means adjusting relationships on one shared temporal axis.
The timeline is carrying information that a collection of end states would obscure.
This is where imperative animation tends to earn its complexity: when the sequence itself is part of the behavior.
Rich hero choreography is one example. Coordinated SVG sequences, route transitions, scroll-linked storytelling, and animation systems responding to measurements or browser events can create the same requirement.
The condition matters more than the category. A scroll effect does not become imperative merely because scrolling is involved. It becomes a stronger candidate when several elements need coordinated progress, relative timing, reversible sequences, or mutable control that is clearer as a timeline than as component state.