Skip to the article
Conxfolio
Blog · Evidence

Animation that carries meaning, and a reduced-motion rule in every design

Most portfolio animation is a page apologising for having nothing to show. The useful kind explains the thing it is moving.

— if the motion could be removed without loss, remove it.

A portfolio design at full size, its motion resolved into the static pose the page holds
A design at rest. Where motion is used it resolves to a pose the page can hold indefinitely.

Scroll animation became a default somewhere around 2018, and portfolios have been fading paragraphs in from below ever since. It is almost always decoration, it is often an accessibility problem, and it is occasionally the only thing a page has to say.

The designs behind the portfolio builder take a narrower position: motion has to belong to the content.

What that rules out

Text that arrives late for no reason. Parallax on a photograph that has nothing behind it. Counters that tick up to a number, which is a small lie about a number that was always fixed. Any effect whose removal would cost the reader nothing, because a reader on a slow machine or with motion turned off is having exactly that effect removed anyway.

What it allows

Movement that is the idea. A design that reads a career as a rising temperature has to change temperature. One that draws itself as a single line of light has to draw the line. One built as a control-room corridor has to travel down the corridor. In those pages the motion is the structure, and a still screenshot of them is a summary rather than the thing.

The same setting is honoured by the application around the designs. Its own reveals and transitions check it before a timer is started rather than after, so a visitor who has asked for stillness never sees the first frame of an animation that then gives up. A page that respects the setting only in its stylesheet and not in its scripts will still lurch once, which is the version of this promise most sites are actually keeping.

The reduced-motion rule

Every design directory in the shipped set carries reduced-motion rules in its own stylesheets, and the application's own animations check the same setting before they start a timer. The behaviour is deliberate: the final pose is held rather than the animation being run with the movement stripped out. A section that would have revealed itself is simply present. Nothing is hidden from a visitor who asked for stillness.

Why that is a design constraint rather than a patch

Holding the final pose only works if the final pose is a complete page. It forces every animated design to be legible as a static document first, which is the same discipline that makes a page survive a slow connection, a screenshot, and a reader who scrolls faster than the effect. A design that is only good in motion fails all three.

Checking it on your own content

The portfolio page step rendering the real page at desktop width inside the builder
The page step. The real page, with your own material in it, before anything is public.

The page step renders the actual page at desktop and phone width, so an effect that works on a sample career can be judged against yours before anybody sees it. The phone view is the one worth looking at hardest, for the reasons in phone width is the page that publishes.

Checking motion against your own material

Scroll your own page at the page step rather than scrolling the sample. Two failures only appear with real content. A reveal that looked elegant across four case panels becomes a long wait for one, because the effect was pacing a scroll that no longer exists. And an effect tied to a heading behaves differently when your heading is three words rather than nine.

Then look at the page as a still. Take the phone view, stop scrolling, and ask whether the screen in front of you says who you are and what you do. That is the state a reduced-motion visitor sees immediately, the state a slow connection shows for a second or two, and the state a screenshot in a message will freeze. A design that fails that test is not a design with a motion problem, and the other half of the same check is in phone width is the page that publishes.

What motion cannot do

It cannot make a thin portfolio look full, and a page that moves beautifully around one project is a page with one project. The material comes from your own roles and outcomes, and nothing on the page is invented for you. Spend the evening on the three case entries, then choose the design that carries them, as set out in what an authored design means.

Watch one design move

Open a design full size and scroll it. If your system asks for reduced motion, the page holds its pose instead.

Open the portfolio builderRead what authored means

Questions

Does the product respect reduced motion
Yes. Every design directory in the shipped set carries reduced-motion rules in its own stylesheets, and the application's own animations check the same setting before starting a timer.
What happens under reduced motion
The final state is held rather than the animation being replayed without movement. A page that would have revealed a section on scroll simply has the section there.
Is motion ever load-bearing
It is meant to be. A page that reads a career as a temperature, or as a single line of light, uses movement to carry the reading. Where a design has no such idea it does not move.
Will animation slow my page down
The designs are built as static pages with their own stylesheets, so the cost is small. The larger cost of any portfolio page is images, which is a decision you make when you add them.
Can I turn motion off for a visitor
Not as an author. It is the visitor's own operating-system setting, which is the correct place for it, because it is a preference about them rather than about your page.

Conxfolio is a free set of four career tools: a résumé builder with 37 rendered layouts, an ATS résumé checker that prints its own arithmetic, a cover letter builder that traces every proof paragraph back to the line it came from, and a portfolio builder with 20 authored designs. There is no account to create, nothing is held back for a paid plan, and no language model is used anywhere in the product, so the readers, the score and the letter are deterministic code you can check.