The motion behind the new Usarion website

We wanted the motion on the new Usarion to do a job: show you where to look next, then get out of the way.

Text enters one line at a time, each line sliding up from below in a quick cascade, so a paragraph arrives in the order you'd read it. Photographs settle into place as they reach the screen, and each one waits for its own moment, so a tall row of images doesn't finish animating before you've scrolled to it. Figures count up once, when you get to them.

The process section runs off a single scroll value. Instead of snapping from step to step, all five steps glide around a wheel as you scroll and the ring turns with them, so you always know where you are in the process. Cards and sliders tell you what they'll do before you touch them. A small glass circle follows your cursor and says "View" on a card or "Drag" on a slider.

The part we care about most is what happens when motion can't play. Everything loads finished, and the animation is only applied once the page knows nobody can see it happening. If the page is opened without JavaScript, jumped to a section by a link, restored to an earlier scroll position or viewed with reduced motion turned on, the content is simply there. Motion shouldn't be the reason someone can't read the page.

The new Usarion is live. Come and have a look.