Scroll animation that reads
as intent, not decoration.

Motion is the fastest way to make a site feel alive, and the fastest way to make it feel cheap. The difference is not how much moves. It is whether each movement tells the visitor something.

01Why most scroll effects feel bolted on

The most common scroll animation on the web is a section fading up 40 pixels as it enters the screen. One of them looks fine. Twenty of them, all with the same timing, tell the visitor nothing except that the site has an animation setting turned on.

That is decoration: motion applied to everything, equally, because it can be. Visitors learn to ignore it within a few screens, and on slower devices they start to resent it.

Motion with intent is the opposite. It is rare, it is specific, and when it happens it explains something the static page could not.

02Rule one: motion answers a question

Before anything moves, we ask what it is for. Good answers sound like: this number counts up because the size of it is the point; this panel slides in from the button because that is what opened it; this diagram builds step by step because the order matters.

EASE · POWER3.OUT

0.0S

0.6S

PROGRESS

MOTION

Field note / 05

Motion with
intent

If the only answer is “it looks nice”, the element usually stays still. That restraint is what gives the moments that do move their weight.

03Rule two: tie it to the visitor

The best motion feels caused by the person using the site. Scroll-linked animation does this well: progress follows the scroll, so the visitor is in control and can pause, reverse or skim. Hover states that respond immediately do the same for the cursor.

• Keep it quick. Interface feedback usually lands between 150 and 400 milliseconds. Longer sequences are for storytelling moments, not buttons.
• Pick one or two curves. A consistent ease, such as a gentle ease-out, makes the whole site feel like it was made by one hand.
• Let it settle. Elements should land in their final place cleanly, not bounce around after the visitor has moved on.

“If nothing would be lost by removing an animation, it was decoration.”

04Rule three: never block the reading

Text should be readable the moment it is on screen. Headlines that wait for a long reveal, content hidden until an animation finishes and scroll that feels heavy all trade the visitor’s time for effect.

• Respect reduced motion. Operating systems let people ask for less movement. Sites should listen and show the finished state instead.
• Animate the cheap properties. Transforms and opacity stay smooth on most devices. Animating layout properties is what makes pages stutter.
• Keep scroll responsive. Smooth scrolling should feel lighter, never slower than the visitor’s hand.

05How we build it in Webflow

Webflow’s interactions are built on GSAP, the animation library used by many of the most memorable marketing sites, and custom GSAP code can sit alongside them when a moment needs more control. That combination lets motion follow scroll precisely, react to the cursor and still be edited later without rebuilding the page.

The thumbnails on these field notes are a small example: each one rests as a still image, and plays a short animation that explains its topic when you hover it or scroll it into view.

06Questions people ask