You know that feeling when a site just feels expensive? Motion is a big part of it. A little makes a site feel alive. Too much makes it busy. One or two moves is plenty.
Scroll reveals
Things glide in as you scroll, so the page reads like a story. Keep it subtle: a small rise and a fade. Scroll this page and you'll see one.
Button micro-interactions
The button reacts when you hover or tap: a fill, a nudge, a color shift. Tiny… and SO satisfying. Hover any button on this site.
Kinetic type
Headlines that move in line by line, so your most important sentence gets seen first. Save it for one headline per page.
Words to describe motion
- Ease out: starts fast and lands softly. Feels natural.
- Stagger: items arrive one after another, not all at once.
- Mask reveal: text or images uncover from behind an edge.
- Parallax: layers move at different speeds as you scroll.
- Marquee: a line of text or logos that scrolls on a loop.
- Duration: how long a move takes. Most website motion lives between 0.2 and 0.6 seconds.
Turn any animation into a designer brief
I love this website animation: [describe what you see]. Turn it into a short designer brief: what moves, when it moves, how fast, and how it should feel. Keep it simple enough to build in Webflow.
Your website should be your hardest working employee… so let it make a gorgeous first impression.