annotated analysis · slide · fan · stack

Figma's hero animation — sliding headline with fanning image stack, decoded

Staggered hero reveal featuring a sliding headline, fanning UI image stack, and a secondary transition to an infinite loading spinner.

The page loads a static header before the headline slides in from the left. A stack of UI screenshots then fans out in the center, followed by a 'Get started' button on the right. Finally, the center asset swaps for a grey box containing a looping circular loader.

Choreography, beat by beat

Headline slides and fades in from left
UI image stack reveals with staggered fanning animation in center
CTA button fades and slides up on the right
Image stack fades out; grey placeholder rectangle fades in
Circular spinner begins infinite rotation loop

feelCleanStructuredProfessionalDeliberate

Element	Change	From → To	Timing
Hero Headline	transform	-30px → 0px	600ms · ease-out
UI Asset Stack	reveal	0 → 1	800ms · ease-out
Get started CTA	transform	20px → 0px	500ms · ease-out
Loading Spinner	transform	0deg → 360deg	1200ms · linear

What video honestly can't tell you

Exact cubic-bezier for the staggered fan reveal
Specific z-index layering of individual UI cards
Whether the asset swap to loading state is a site feature or a capture error

Recreate it yourself

This entire page was generated by one analysis. Point your AI agent at any clip or live site and get the same blueprint — plus ready-to-paste code. Try MotionLens free (5 credits, no card) or read the Claude Code setup guide.

Figma's hero animation — sliding headline with fanning image stack, decoded

Choreography, beat by beat

What video honestly can't tell you

Recreate it yourself

More decoded animations