Motion & design / CREAVA

Give every motion a job

Creava Editorial

Motion can show a relationship, acknowledge an action or direct attention to a change. Write that purpose before choosing a duration or an easing curve. A card that expands into a detail view may explain continuity between the two states. A decorative loop has a different job and should not make an essential task harder to read or complete.

Change one property at a time while comparing alternatives. A shorter duration, a different path and a softer easing curve affect different aspects of the experience. Review the movement in context rather than only as an isolated animation. Consider what happens when a user repeats the action, leaves early or encounters the interface while data is still loading.

Include fallback behavior in the handoff. State the trigger, start and end states, duration, easing, repetition and interruption rules. Then describe what a reduced-motion version should preserve. If the motion carries essential information, that information needs another clear expression. A useful specification makes the intended behavior understandable to someone who did not attend the design discussion.

Put it into practice

Write one sentence describing the motion's purpose.
Compare alternatives by changing one property at a time.
Check repeated actions and interrupted transitions.
Document start state, end state and trigger.
Specify how the experience works with reduced motion.

Open your workspace conversations

CREAVA EDITORIAL · WORKED Q&A

Questions worth following through.

Specific questions, practical answers, and the next detail to check. Prepared by Creava Editorial.

Question 01

A filter panel animates smoothly into view, but its results update later. What should the motion specification make clear so the movement does not imply that filtering is already complete?

Creava Editorial · Answer

Separate the panel's visibility from the state of the results. Describe what indicates a pending update, which controls remain usable and how a confirmed result appears. The transition can explain where options are located, but it should not serve as the only evidence that data has changed. Test the sequence with a delayed update.

Follow-up question

If the results usually arrive before the panel animation finishes, is a separate pending indication still worth specifying for unusual delays?

Creava Editorial · Clarification

Specify the delayed path even if it is uncommon. The implementation needs a clear outcome when its usual timing assumption fails. Keep the indication proportionate and avoid adding unnecessary delay solely to display it; the important distinction is between a requested change and a confirmed result.

Question 02

An introductory animation repeats whenever a person returns to a page, including after opening a detail. How should the team decide whether repetition still serves a useful purpose?

Creava Editorial · Answer

Identify what the introduction explains on a first visit and whether that information is still needed on return. Compare a full replay with a direct or simplified return state. Check whether the animation delays access to the person's previous position or interrupts an ongoing comparison. Document different entry conditions if they justify different behaviour.

Follow-up question

Could replaying a shorter version preserve the visual identity without making the return journey feel like starting the task over again?

Creava Editorial · Clarification

Possibly, but test the return task rather than judging an isolated animation. Keep the previous context recognizable and make the next action available when appropriate. If a brief replay still distracts from resuming the task, retain identity through stable visual choices instead of mandatory repeated movement.

YOUR SIDE OF THE DISCUSSION

Add your perspective.

Your own notes stay private on this device. They are not sent to other members.

Background discussion & source notes

CREAVA EDITORIAL / DISCUSSION DESK

Let’s take the question further.

Practical follow-ups, open questions and considered answers from the Creava editorial desk.

5 official discussion notes

Creava Editorial@creava.editorial · Note 01

Does the movement explain a relationship?

A card expanding into its detail view can help the reader understand continuity, but the same motion used on every unrelated page change may create confusion. Write what remains the same and what changes between the two states. Then ask whether the transition makes that relationship easier to understand. If its only explanation is that the interface feels more premium, compare it with a direct state change. Decorative movement is a design choice, not automatically a usability benefit. Keep it only when it supports the reading environment without obstructing navigation or task completion.

Creava Editorial@creava.editorial · Note 02

Reduced motion is more than a shorter duration

A fast large-scale zoom may still be an uncomfortable zoom. When planning a reduced-motion alternative, first identify which spatial effects can be removed entirely while preserving state and hierarchy. The browser's prefers-reduced-motion media feature reflects a device preference; it does not automatically redesign the interaction for you. Describe a static or simpler alternative and test it alongside the default behaviour. Keep essential progress or completion information visible through text or another stable cue. The implementation should remain understandable when movement is absent, interrupted or not perceived by the person using it.

MDN Web Docs · prefers-reduced-motion CSS media feature

Creava Editorial@creava.editorial · Note 03

Case analysis: a save interaction triggered twice

Imagine a save control whose animation lasts longer than the request. A person clicks again because nothing clearly confirms the first action. The problem is not necessarily an unsuitable easing curve; the specification may lack a pending state and an interruption rule. Define what the second trigger does, what shows while work is pending and which state represents a confirmed result. Build the animation around those states instead of using movement as a substitute for feedback. Test a slow response and a failed response as well as the ideal sequence before accepting the interaction.

Creava Editorial@creava.editorial · Note 04

Tradeoff: preserve responsiveness, reduce choreography

A sequence that waits for several decorative elements to finish before accepting input can feel sluggish even when each individual animation looks refined. Identify the earliest point at which the next action can safely be available. Separate meaningful transitions from visual flourishes and let nonessential elements settle without blocking the task. Compare the flow with and without the flourishes using the same content. This does not imply every transition should be instantaneous; it asks whether the waiting time carries useful information. Document that reason so future changes do not reintroduce unnecessary delay.

Creava Editorial@creava.editorial · Note 05

After handoff: test the paths outside the storyboard

A storyboard usually shows a successful beginning, middle and end. Acceptance testing should also cover leaving halfway through, returning immediately, triggering the action repeatedly and receiving an unexpected state. Write an expected outcome for each path before the implementation review. Check that focus, visible labels and available actions still make sense after interruption. Include the reduced-motion version in the same checklist rather than treating it as a separate polish task. A useful motion specification explains what the experience should do when its ideal choreography cannot complete, not only how a presentation video should look.

CREAVA EDITORIAL / THE WORKING LIBRARY

A little more behind the work.

Briefs, creative decisions, production habits and practical answers from the Creava editorial desk.

Visit the library

Project planning