Skeleton to Content Reveal
Shimmering placeholder cards that crossfade into real content with a stagger, each card's height tweening from the placeholder shape to the content it loaded.
About This Component
A loading state that resolves instead of disappearing. Each card starts as a shimmering placeholder in the shape of the thing it is fetching, then the placeholder fades out, the card's height tweens to the height its real content actually needs, and the content rises into place. Cards resolve one after another so the list settles rather than snapping.
Read the full effect overview
The height morph is measured, not guessed: the placeholder height and the content height are both read at reveal time, so a card whose copy runs long grows and a card whose copy runs short shrinks. Photos fade in on their own load event, so a slow image never leaves a hole. One HTML file, one stylesheet, one script, GSAP core only, and three shipped looks switched by a data-variant attribute.
What's Included
- Placeholder blocks shimmer on background-position, so no CSS transform can collide with a GSAP tween
- Card height tweens from the measured placeholder height to the measured content height
- Content crossfades and rises while the height morph is still running
- Photos fade in on their own load event, whatever order they arrive in
- Cards resolve on a stagger so the list settles instead of snapping
- Border flashes the variant accent once as each card lands
- With JavaScript off the real content is simply the page, no placeholders and no blank state
- Reduced motion switches states instantly instead of animating
- window.skeletonReveal.reveal / reset for your own fetch code
- Three shipped variants: vault, paper, soft
Perfect For
- Feeds, search results and dashboard lists that wait on an API
- Article and product grids fetched after first paint
- Infinite scroll pages that need a placeholder for the next batch
- Any list currently replacing a spinner with a hard content pop
How It Works
The height morph is measured, not guessed
While the placeholder still owns the layout the script reads three numbers: the card's own height, the placeholder's height and the content's height. The target is the card height minus the placeholder height plus the content height, which cancels the card's padding out of the sum entirely, so no padding value is ever read or assumed. GSAP tweens height between those two numbers and the card ends on a cleared inline height, back to auto.
Crossfade, not swap
The content sits absolutely positioned at the top of the card while the placeholder is in flow, so both exist and both can be measured at once. The placeholder fades out, the content fades and rises in on an overlapping tween, and only when the card has landed does the content become a static in-flow block and the placeholder get display none.
The shimmer never fights GSAP
The sweep is a CSS animation on background-position across an oversized linear gradient, not a translated highlight element. Nothing in the stylesheet sets a transform on anything GSAP later animates, which is what keeps the height and opacity tweens starting from a real zero.
No JavaScript, no blank page
The placeholders are gated behind a has-js class set on the root element by one inline line, so a visitor without JavaScript gets the real content in flow and fully visible, and never sees a placeholder that will not resolve. Under prefers-reduced-motion every duration and the stagger collapse to zero, and the shimmer animation is switched off in CSS.