Velocity Marquee

A marquee whose speed and direction answer to how fast you scroll. It drifts when the page is still, races when you scroll, and reverses when you scroll back.

Scroll down, then back up.

Motion

Interaction

Design

Framer

Velocity

Scroll

Motion

Interaction

Design

Framer

Velocity

Scroll

Motion

Interaction

Design

Framer

Velocity

Scroll

Motion

Interaction

Design

Framer

Velocity

Scroll

Drift

Boost

Reverse

Wrap

Seamless

Loop

Drift

Boost

Reverse

Wrap

Seamless

Loop

Drift

Boost

Reverse

Wrap

Seamless

Loop

Drift

Boost

Reverse

Wrap

Seamless

Loop

What you are looking at

Top band

Drifts left at 60 px per second and gains four times that at full scroll speed. A restrained setting, the one to reach for behind real content.

Lower band

Drifts right at 40 px per second with a boost of eight. Slower at rest, far more reactive once the page moves, so the two bands separate as you scroll.

Why scroll position is not enough

Framer’s own scroll transforms map scroll position to a style, so they can move something as you travel down the page. Velocity is a derivative of that position, which is a value they never expose. This component measures it, smooths it through a spring, and multiplies the marquee’s idle drift by the result.

Scroll up and the sign of that velocity flips, which is what reverses both bands.

Create a free website with Framer, the website builder loved by startups, designers and agencies.