Motion in annual report websites: storytelling without getting in the reader's way

Give every animation a clear purpose

Use motion when it helps readers understand the report: introduce a theme, show how parts connect or explain a sequence. Keep essential text, figures and downloads usable without the effect.

Write down what the reader should learn from each proposed sequence. If a still image explains it just as well, consider whether animation earns the extra production and review work.

A title reveal, animated chart and interactive diagram are separate items to scope and approve. Decide which ones the report needs before commissioning the full treatment.

1. Keep three reader routes open

An annual report can serve people who want different levels of detail:

• Explore the story: understand the theme and major developments.
• Read a section: find a particular topic or explanation.
• Download the report: save the full publication or a chapter.

Make each route clear near the beginning of the experience. A visitor who already knows what they need should be able to find it without completing an animated introduction.

For the design brief, ask for a first-screen layout showing the report title, reporting period, language choice and route to downloads. Review that layout with the animation paused. It should still explain where the visitor is and what they can do next.

The published Hysan annual-report case page can be a visual reference when discussing the relationship between an opening theme and report access.

2. Decide which content benefits from motion

Build a short motion list before approving a full treatment. For each proposed sequence, record its purpose, source material, trigger and end state.

An illustrated location might reveal the relationship between connected spaces. A sequence of project photographs might introduce distinct themes. A small transition might help a reader recognise that a panel has expanded.

Be more cautious with long passages, dense tables and details that need careful comparison. Keep these stable while people read. Avoid making essential labels appear only during a brief moment in an animation.

This exercise also exposes scope. A decorative title reveal and an interactive diagram with several language versions require different design, development and testing work. Ask the proposal to identify those elements separately.

3. Design the final chart before its entrance

When a chart is involved, approve the complete, still version first. Check its title, units, period, source, labels and explanatory notes against the approved report content.

Then decide whether movement helps explain it. For example, revealing one series at a time may support an explanation, provided readers can reach the complete comparison and understand what is being shown.

Keep values available as readable content. W3C's guidance for complex images describes short and more detailed text alternatives for information-rich graphics. Its tables tutorial explains how structural markup communicates relationships in data tables.

Ask how the information will be presented to someone who cannot see the chart or operate a pointer. A tooltip alone should not become the only place an essential figure can be found.

4. Specify control over movement

The brief should describe what happens when a visitor pauses animation, uses a keyboard or has a reduced-motion preference enabled.

WCAG's Level A criterion on Pause, Stop, Hide covers automatically starting movement that lasts more than five seconds and appears alongside other content, with an exception for essential movement. It also addresses automatically updating information. Ask the accessibility reviewer to assess the actual behaviour rather than applying a blanket rule to every animation.

Support for reduced motion is a useful design requirement. WCAG's separate Animation from Interactions criterion is Level AAA; it concerns disabling non-essential interaction-triggered animation. Do not present it as a universal Level AA requirement.

The alternative experience needs the same meaningful content. It might use a finished illustration, simple state changes or static panels. Switching off an effect should not leave an empty space where the explanation belongs.

5. Prototype a real section in every required language

Approve more than a polished opening screen. Choose a representative section containing a heading, paragraph, image, animated element and download link.

Use realistic English and Chinese copy where those languages are required. Check line breaks, label lengths, the reading order and the position of controls. A design that works with a short placeholder title may need adjustment once approved content is inserted.

Test the prototype on a phone and a desktop. Ask a reviewer to find a chapter, switch language and download the correct file. Record difficulties as tasks to resolve rather than treating a completed animation as final acceptance.

6. Include maintenance in the handover

Agree which text and images editors can change, what requires animation software or development support, and how source files will be supplied.

Ask the team to test loading and interaction on the agreed devices and connection conditions. Set an appropriate performance target for the project and check it using representative final assets.

Also decide what happens next year. An archive needs working links and a stable report edition. Replacing a current-year homepage should not silently overwrite the previous report's content.

Miracle's motion graphics and website design services can be discussed together when the brief includes both the visual sequence and its browser implementation.

A practical approval checklist

Before launch, confirm that:

• Each animation has an agreed purpose and readable final state.
• Essential content and downloads remain available without the effect.
• Data, labels and sources match the approved publication.
• Motion controls and alternative presentations have been tested.
• The correct language versions and files are linked.
• Editing, archiving and support responsibilities are documented.

What to include in the report brief

Include the theme, required languages and the sections you want readers to explore. Describe how motion, page design and downloads should work together.