Skip to content

Scroll Velocity Band

The band reacts to your scroll

Scroll Velocity Band preview image 1

Summary

The band reacts to your scroll

Description

Scroll down and the band speeds up and leans into the direction of travel; scroll up and it reverses. Left alone, it keeps drifting at a gentle base speed.

The loop is seamless — it wraps on the measured width of one repeat of your text, not on a percentage, so nothing jumps when you change the copy or the font. The number of repeats is worked out from the block's width automatically.

Adjustable: text, separator, base speed, scroll sensitivity, maximum lean, direction, rule lines, edge fade.

DOM and requestAnimationFrame, no dependencies, nothing loaded from outside. Honours prefers-reduced-motion, and freezes on a still frame inside the Framer canvas. Free.

Rank history How rankings work →

11001200125688/149/49/2610/1811/9
  • All · #1972

Details

More like this