tab rail build notes — figma motion
headline static tab rail marker steps 42px copy block swaps per state counter 1/4 to 4/4 photo swaps per state arrows static
Both layers fade 1.0 0.25 0 0.25 0ms 280ms Only the top layer fades 1.0 0 layer underneath held at 1.0 steps to 0 once covered 0 outgoing layer incoming layer background visible
0 100 200 300 400 500 600ms tab marker counter tab label photo copy block +0 +20 +60 +120 +200 opacity transform still settling
library instance, untouched / 4 digit set to opacity 0 Opacity 0, not visible:false. The digit sits in an auto-layout row with a 4px gap. Hiding it collapses the gap and shifts the “/ 4” to the left. overlay clipping frame 9 × 20px 1 2 3 4 TRANSLATION_Y −20px per state one track, four states
NameCubic bezierUsed for
QUINT_OUT.22, 1, .36, 1marker travel, photo settle, copy arrival
EXPO_OUT.16, 1, .3, 1counter step
SMOOTH.4, 0, .6, 1photo fade
ACCEL_EMPH.3, 0, .8, .15copy exit
FADE_OUT.4, 0, 1, 1label dimming
FADE_IN0, 0, .6, 1label lighting
Fig. 1 — Section layoutThe section running at its real 8.6s timing. The marker steps 42px per state; the photo and copy swap with it.
Fig. 2 — Image crossfadeFading both layers lets the page background through at 25%. Holding the covered layer at opacity 1 removes it.
Fig. 3 — One transition650ms. Marker 0, counter +20ms, label +60ms, photo +120ms, copy +200ms.
Fig. 4 — Live componentThe digit sits on top of the library instance at opacity 0, under a 9×20px clipping frame.
Six curvesNo stock presets. Every curve written out as a cubic-bezier.