Draggable Canvas

Grab anywhere and throw the grid around. It keeps gliding after you let go, tiles itself so it never runs out, and pans on the arrow keys for anyone not using a pointer.

Aperture

Basalt

Cinder

Drift

Ember

Foxglove

Gantry

Halide

Iris

Jasper

Kelp

Lumen

Infinite tiling, edge fade 60, a slow drift while nobody is holding it

01
02
03
04
05
06
07
08
09

Bounded, elastic 0.45. It stretches past the edge, then pulls back

01
02
03
04
05
06
07
08
09

Smaller tiles, drag speed 1.4, so it outruns the pointer

Decide what a finger does before you ship it

A canvas that drags on both axes has to stop the page scrolling while a finger is on it. On a full width hero that traps the reader. All three canvases here are set to Horizontal, so a finger pans them sideways and still scrolls the page. Both Axes is the right choice when the canvas is the whole screen and there is nothing to scroll past. A mouse always gets both axes either way, and the arrow keys pan in all four directions once the canvas has focus.

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