Skip to content
KRIVO

UI/UX

Motion that explains: scroll-driven product stories

Animation earns its place when it shows how something works. A short checklist we use to decide what moves and why.

Author
Gabriel Brandão · Founder, Krivo Works
Published
Reading time
1 min read

Motion can make an interface feel alive, or it can make it feel like a slideshow. The difference is whether the movement carries information.

Ask what the motion says

For every animation, finish the sentence “this moves so the viewer understands…”. If you can’t, it’s decoration. A tab sliding in says “a new tab exists”. A toggle flipping says “this setting changed”.

Tie sequence to scroll when sequence is the point

When a story has an order — first this, then that — scroll is a natural timeline. The viewer controls the pace, can go back, and nothing plays without them. For everything else, a simple reveal is enough.

Stay on the cheap properties

Animate transform and opacity. They run on the compositor and keep the page at 60 frames per second. Avoid animating layout properties in anything that scrolls.

Respect the people who turn it off

Honour prefers-reduced-motion. Show final states, keep the information, drop the movement. Good motion design survives having the motion removed.

GB

Gabriel Brandão

Founder, Krivo Works

Contact

Have something worth building?

Tell us what is slowing your business down, what you want to build or what you think could work better.