GregØry PearsØn . Design

44.95°N, 93.09°W

(UTC)

GregØry PearsØn . Design

44.95°N, 93.09°W

(UTC)

Scroll snap rail

Type

Experiments

Date

BUILD NØTES

A way to hold more copy than a page has room for. Columns sit side by side on a rail, a cursor drags it, and each column lands on the grid.



Why:

Many of the pages in this project are text heavy. When three columns of copy don't fit, the usual answer is to stack them, and a stack makes the page long. At the 768 width, three columns run about 730 tall stacked and about 470 as a rail.

The usual rail is a carousel, with arrows and dots. The system already has one for cards, and I didn't want another control to learn. I wanted something close to a carousel that reads as content, with nothing to operate. This is the start of testing whether that idea has any merit. I also looked at letting the rail scroll on its own.


What I checked it against:

  • Does it keep the page shorter than a stack?

  • Does it show there's more to the right without arrows or dots?

  • Does it move like the rest of the system, on the same two curves and the same durations?


How it feels:

You drag the rail and let go, and it settles with the next column lined up on the margin. The goal is for it to slide easily and always stop in the same place. The drag uses the system's Exponential curve and the settle uses its Circle In/Out curve, and both are quick.

The hint is the peek. The next column shows at the edge, and a thin line under the active column says where you are. The peek borrows a cue from the card carousel the system already has, where the next card sits at the edge. A small nudge that offers the peek when the section loads is the next thing I want to try.

What Figma Motion does well:

  • Give each part of a move its own curve, so the drag and the settle can feel different

  • Switch a layer on or off at an exact moment, which is how the cursor goes from an arrow to an open hand to a closed hand

  • Export the timeline as a CSS animation, curves included

What Figma Motion doesn't do yet:

  • Respond to a hover, a press or a drag, so the cursor is drawn as a sequence of images

  • Replace a layer's position, so each move adds to where the layer already sits

  • Honor play once in the export, so a timeline set to play once still comes out as a loop



Where it stands:

This is a work in progress, one moment from the exploration and not a full case study. The smallest rail sets the copy budget, at about 160 characters of body copy for the narrow one, so the section has to be written for that width first.


More Experiments

More Experiments
Loading
Heading switch

BUILD NØTES

Loading
Heading switch

BUILD NØTES

Loading
Tab Rail w/ Figma Motion

BUILD NØTES

Loading
Tab Rail w/ Figma Motion

BUILD NØTES

Loading
Hero fit test

BUILD NØTES

Loading
Hero fit test

BUILD NØTES

Loading
Heading switch

BUILD NØTES

Loading
Tab Rail w/ Figma Motion

BUILD NØTES

Loading
Hero fit test

BUILD NØTES

Loading
Author Stack Interaction

BUILD NØTES

GregØry PearsØn . Design

44.95° N, -93.09° W

(UTC)

GregØry PearsØn . Design

44.95° N, -93.09° W

(UTC)

GregØry PearsØn . Design

44.95° N, -93.09° W

(UTC)